Multiple JS files for one CSS file

[atfzl]

Multiple JS files for one CSS file

[athomann]

That doesn't seem to happen to me. When using [name]__[local]___[hash:base64:5]. The name is based on the CSS module name, not the Javascript file.

[martinmacko47]

We have the same problem. Rule css-modules/no-unused-class should probably check if every defined css class is used in at least one js file, not in all js files it's imported in.

Btw, we can't split the css file to separate css files for each js file, because we reuse some css classes in multiple js files.

[atfzl]

Hi,

I have seen people following this pattern of reusing same css file and importing in multiple js files but this is an anti-pattern. I'll try to explain why.

Let's assume we have a single css file which has some classes which will be used in 2 different js files with some common class which will be reused:

.class1 {
  color: red;
}

.class2 {
  color: blue;
}

.commonClass {
  font-size: 14px;
}

class1 is going to be used in 1.js
class2 in 2.js
and
commonClass will be used in all the files

Let us assume the class generated by using the css-loaders with css-modules is of form: [filename]_[className]_[hash]

When you import the css file in file 1 the following classes are generated

1_class1_xxx
1_class2_yyy
1_commonClass_www

Even if you only use 1_class1_xxx you are actually including the other unused classes also in the bundle, hence the lint error.

Even if you think that you are reusing the commonClass you are actually creating copies of it because of how css-modules creates the css class name.

The second file 2.js will be creating the following classes:

2_class1_333
2_class2_444
2_commonClass_ppp

you will be using only 2_class2_444 but still the other classes will be bundled.

The commonClass will be having multiple copies which is redundant.

I would recommend using composes property of css-modules to share common classes.