Doesn't allow composition into single global classname.

[tj]

For this project I'm using global css instead of local, but composes seems busted:

.Card {
  composes: small from "./shadows.css";
}

yields the following error:

  Error: composition is only allowed when selector is single :local class name not in ".Card", ".Card" is weird

I've done similar with the local-first behaviour and it seemed fine, but that's not the case with global apparently.

Not sure which module actually holds the composition stuff but these are the versions:

└─┬ [email protected]
  ├─┬ [email protected]
  │ ├── [email protected]
  │ ├─┬ [email protected]
  │ │ └── [email protected]
  │ ├── [email protected]
  │ ├─┬ [email protected]
  │ │ └─┬ [email protected]
  │ │   ├── [email protected]
  │ │   ├── [email protected]
  │ │   └─┬ [email protected]
  │ │     ├── [email protected]
  │ │     ├── [email protected]
  │ │     └─┬ [email protected]
  │ │       └── [email protected]
  │ ├── [email protected]
  │ └── [email protected]

Any tips would be great!

[geelen]

Yeah you can't use composes inside a global class. Composition works by exporting an extra class along with your local class (it doesn't rewrite the CSS at all), but global classes don't export anything so there's nothing to attach the extra export to.

Same reason why .localClass > * { composes: x from "./y.css"; } doesn't work. Since CSS Modules is all about classes, there's no way to attach classes to the elements targeted by .localClass > *

There's a much bigger discussion on the point over here at css-modules/css-modules#33 (comment) where I go into it in a bit more depth. Hope that helps!

[tj]

ahhh I see, thanks that makes sense!