Recommended way to "extend" native HTML elements about css-modules

[hnqlv]

+1

This is an issue if you're using for example markdown-loader or any third-party where it returns pure html. We'd have to overwrite the loader to add a className to the elements.

Keen to know what is the best way to achieve this.

I'm going to cc @markdalgleish the godfather of CSS modules 😄

[nkbt]

The solution is to add a class to every element you want to style.

[nkbt]

For 3rd party html use `:global`.

[hnqlv]

@nkbt not really a solution when you're dealing with 3rd party and can't just drop a :global. To be honest I don't mind to style each one but I guess my friend @peduarte will get mad at this 😂

[peduarte]

That is not a solution. It is merely a workaround!

Why would you sacrifice the basic behaviour of CSS?

I have a better solution which I will post here later.

[peduarte]

Ok first, I am extremely disappointed with the lack of essential documentation.

I think it's selfish that a a tool such as this is released without informing users that the most common thing CSS is used for will not work.

I think by now every half-decent front end developer understand that isolating and modularising your UI Components is a good thing, but frankly, it is something that can be done with CSS alone.

Tools like this is not supposed to remove the default functionality of CSS, it is supposed to enhance it, and take it to the next level.

I think that whoever is responsible for this documentation, all the developers writing articles about css-modules hoping to get more Twitter followers should let their readers know.

On a separate note, here is a half-decent solution, if someone is really that desperate to use this half-built tool:

Based on my current workflow: webpack + react + css-loader + postcss-loader + cssnext-loader

_Refactored/simplified for example purpose_

base.css
We use cssnext to define our variables and custom media queries

:root {
  --color-text: #333;

  --size-s: 1.618rem;
  --size-l: 4.236rem;
}

@custom-media --medium-viewport (min-width: 768px);

typography.css
Shared component – supposed to be extended by using css-module's compose 😂

/* Get access to cssnext variables */
@import './base.css';

.small {
  font-size: var(--size-s);
}

.large {
  font-size: var(--size-l);
}

color.css
Shared component – supposed to be extended by using css-module's compose 😂

/* Get access to cssnext variables */
@import './base.css';

.text {
  color: var(--color-text);
}

global.css
This is where you can define some default styling for native html elements

@import './base.css';

body {
  /* half-decent solution */
  font-size: var(--size-s);

  /* ideal solution */
  composes: small from './typography.css';
}

h1 {
  /* half-decent solution */
  font-size: var(--size-l);

  /* ideal solution */
  composes: large from './typography.css';
}

p {
  /* half-decent solution */
  color: var(--color-text);

  /* ideal solution */
  composes: text from './color.css';
}

component.css
This is your component, the CSS here will be namespaced (what css-modules is for)

/* component title */
.title {
  /* Here it works because this is not a HTML element selector */
  composes: color from './color.css'
}

Although this solution is not perfect, using _cssnext_ allows me to still have my variables and custom media queries which can be used to style native HTML selector and used to extend my CSS modules.

I am happy to hear if anything else has found a nicer approach.

/cc @henriquea @markdalgleish

✌️

[geelen]

@peduarte that comment is completely unacceptable. This is the CSS Modules issue tracker, a place for open, respectful discussion about an incredibly nascent project. You call us "selfish", attempt to impose your own "purpose" on the project, claim I'm only interested in gaining twitter followers & call the project "half-built". I won't tolerate self-righteous entitled vitriol on this issue tracker, not by you or anyone else.

Furthermore, you @-spammed myself & many knowledgable CSS people (none of whom are part of the CSS Modules team) on Twitter 3 times in order for someone to help. Yet you ignored @nkbt who has been active on this tracker and answered your question almost immediately. You went from "I can't find a solution" to "this project is selfish/half-built" in 3 hours!. 1am to 4am my local time.

I'm closing and locking this discussion as a result. This is an open source project, learn to be respectful and cooperate or go somewhere else.

p.s. The real pity is that the original question is surprising behaviour and does need explanation. So if someone would like to raise another issue around the same question I'll jump on and answer it.