interaction with html link tag

[tmccombs]

Who doe css modules work when used as from a stylesheet link tag in html? or is this not allowed?

[mightyaleksey]

If you use CSS Modules, usually you will put the generated class names to your html markup. So, if you want to inline other styles, I don't see any problem with it.

The default rules for the cascades will be used here. So, your inlined styles will be more specific than styles generated by CSS Modules.

[tmccombs]

Perhaps I wasn't clear:

If you have something like this in the html for your page:

<link rel="stylesheet" href="module.css" />

where module.css is a css module, what happens?

Will this apply all the styles in the stylesheet to the html?

Will it only apply global styles from module.css and it's dependencies? If so, how does it differentiate between a "module" css file and a non-module css file for backwards compatibility?

Can you not use modules for non-generated html? It seems like it would be useful to be able to use your modules from static html as well as generated html.

Or from another angle, suppose I have a module with styles for buttons that use for generated html (react, angular, whatever). And I want to compose those styles into classes that I use from static, non-generated html (or use the classes directly). How would I do that? Using the generated class names isn't really an option there.

[mightyaleksey]

Okay, I got it. Let me explain the way it works and I do hope it will help you to understand CSS Modules.

But before that lets look on the Node.js modules. As you know Node.js threats each JS file as a module and guarantees that all the variables declared inside the module will be local to that module. So, when you use the require function to get the content of the module, you usually get an object (or function) with data available via the module.exports.

Lets look on the CSS now. Usually you provide selectors and describe props. For example:

.foo
{
  color: red;
}

As you know, all the styles apply to the whole document which can result in different problems (like same selectors for the same node). To avoid that CSS Modules generates unique class names. For example, .foo will transform to .component_foo_dj45:

.component_foo_dj45
{
  color: red;
}

So, how to make it happen?
CSS Modules threats your CSS files as modules and makes it possible to use the require function with CSS files. As result you'll get the generated class names which you should inject into your html templates. So, require('./component/foo.css') will return an object:

{
  'foo': 'component_foo_dj45'
}

Here is a small example with react component: https://github.com/sullenor/todos/blob/master/components/header/index.js#L2-L10

Those dependencies will be resolved by the compiler and you'll get the appropriate CSS file which you'll link to the html document.

So back to your questions.

Will this apply all the styles in the stylesheet to the html?

yes, it will

Will it only apply global styles from module.css and it's dependencies? If so, how does it differentiate between a "module" css file and a non-module css file for backwards compatibility?

It will apply all the styles and there is not much difference between a "module" css file and a non-module css file except that you have generated selectors for the first one.

Can you not use modules for non-generated html? It seems like it would be useful to be able to use your modules from static html as well as generated html.

Actually you need to inject the generated class names into your html, so I don't see any opportunity to use it without templating system.

Or from another angle, suppose I have a module with styles for buttons that use for generated html (react, angular, whatever). And I want to compose those styles into classes that I use from static, non-generated html (or use the classes directly). How would I do that? Using the generated class names isn't really an option there.

You can't do that for the same reasons that you need the templating system.

[mightyaleksey]

But it is possible to use external CSS libraries with CSS Modules.

I have a small example with font-awesome library. I use few icons for my components:
https://github.com/sullenor/todos/blob/master/components/icon/index.css#L20 which is possible with the compose key word. Necessary styles from that lib will be added to the resulting CSS bundle and all selectors will be unique.

[themitchy]

It's worth mentioning here that composing this way can multiply your css size really quickly. If you're going to compose 3rd party CSS libraries like mentioned above you pretty much have to create custom components for whatever uses them.

ie. This pattern seems sane but isn't:

icons.css

.navicon {
  composes: fa fa-navicon from "../node_modules/font-awesome/css/font-awesome.min.css";
}

main.css

.menuIcon {
  composes: navicon from './icons.css';
  font-size: 27px;
}

someWidget.css

.menuIcon {
  composes: navicon from './icons.css';
  font-size: 32px;
}

^^^ you've now imported all of font-awesome 3 times, adding ~240K to your CSS

Might be obvious to React experts as css-modules is tightly coupled to React patterns but I thought I'd mention it.

[mightyaleksey]

@themitchy Actually I can't agree here. "Compose" doesn't extends the original classes. Instead of that it concats the names only, so in the resulting html you'll get something like this:

<div class="menuIcon__xxx navicon__yyy fa__zzz fa-navicon__ccc"></div>

and the resulting css file will contain only one copy of the font-awesome library in the provided example:

/*...*/
.menuIcon__xxx { /**/ }
.navicon__yyy { /**/ }
.fa__zzz { /**/ }
.fa-navicon__ccc { /**/ }

Also I believe that it will be possible to remove the unnecessary code in future on the compile step, since all the dependencies are explicit.

[geelen]

Yep you should definitely not see duplication of output using CSS Modules as @sullenor said. font-awesome.min.css should only be included in your output once. Are you seeing something different?

[themitchy]

It's absolutely pulling in the library twice. Must be an issue with css-modulesify. All you have to do is import main.css and someWidget.css.

[themitchy]

I've opened an issue under css-modulesify and included a gist with code samples since this is not really the right thread for this.

css-modules/css-modulesify#58

[joshwnj]

Yep there was a bug in css-modulesify that was duplicating the library. Fixed in css-modules/css-modulesify#61