Support css that is imported by multiple files

[romeovs]

If I have multiple files that import the same css file, but use different classes from it, no-unused-class will warn me, even if it's not necessary.

Eg.

// a.js
import styles from "./styles.css"
console.log(styles.a)

// b.js
import styles from "./styles.css"
console.log(styles.b)

// styles.css
.a { color: red }
.b { color: blue }

Will yield these warnings:

a.js: Unused classes found: b   css-modules/no-unused-class
b.js: Unused classes found: a   css-modules/no-unused-class

Is there a way to prevent this, so this plugin can be reliably used as a css dead-code detection tool?

[atfzl]

see #28

[romeovs]

Oh that makes sense.

[romeovs]

The explanation given in #28 only makes sense in some cases. In others, it does not.

First of all, duplication of the generated css classes is not a given. For instance, in my setup, the generated class name only depends on the content of the class not on the path where it was defined.

Secondly, putting css in different files still breaks in some cases. For instance:

// parent.js
import styles from "./parent.css"
console.log(styles.parent)

// child.js
import styles from "./child.css"
console.log(styles.child)

// parent.css
.parent { background: red }

// child.css
.child { background: blue }
.parent .child { background: green }

which yields the following error:

child.js:  Unused classes found: .parent   css-modules/no-unused-class

This is not an edge-case IMHO. In css, it's often not clear where to split the components (eg. it is hard to awnser the question: "Is .parent .child a concern of the parent or of the child?").

[romeovs]

Any news on this? I'd love to create a PR that tries to resolve this, but let's get on the same page first!

[SpainTrain]

I don't understand your example. .parent in parent.css is :local and not the same as .parent in child.css, so the lint error is correct.

Fundamentally, in CSS Modules, if one wants to use a class selector across different CSS files, one must either make it global or (if the scenario permits) use compose.

[bhollis]

I've done a bunch of testing, and I don't think the explanation in #28 is still true with recent versions of css-loader. I can import the same style into multiple files and they'll always get the same class name. It'd be great if this feature could be added so that we can continue sharing styles in different places and still find dead code.

[jch254]

I agree it would be fantastic if this could be added, I've adopted for all CSS files in our project that are only imported by one file but it's not feasible for shared CSS.

[luvenan]

I guess this never got addressed? Did anyone find another tool that does the job better?