css className conflict

[chenxsan]

Just set up a repo https://github.com/chenxsan/css-module-class-conflict to demo this problem, I had these css codes

.title {
  composes: small from './border.css';
  composes: small from './borderRadius.css';
}

in app.css, expected the exported class name to be border__small__xxxxx borderRadius__small__xxxxx, but i got this:

I got two borderRadius__small__xxxxx, the first small was overwritten by the second small.

Is this an expected behavior?

[saintwinkle]

Because you have assigned variable 'small' twice.
Try to use 'smallA' and 'smallB', or something else to make a distinction.

[NekR]

@saintwinkle What? This breaks all the concepts of the encapsulation/modules. small is not a variable, but key (read css class) in both border.css and borderRadius.css. Having smallBorder and smallRadius in css files mean that then there is no sense to use CSS Modules at all (since class names are not unique).

If this really happens, then it's just a bug. Bad bug, but still simply a bug (and not conceptual feature).

[sokra]

That's my fault. Try to delete this lines: https://github.com/webpack/css-loader/blob/c2f9150caba481e7506265860e0f81216ee11e41/lib/processCss.js#L146-L148