Allow `composes` inside `@layer`?

[jeffijoe]

When using composes inside a layer, LightningCSS returns an error stating that composes cannot be used inside nested selectors.

@layer components {
  .foo {
    composes: bar from './other.module.css';
  }
}

Would it be possible to either allow this, or to configure LightningCSS to surround each module file with a configurable layer name?

[kizu]

I think the nesting selector error is correct here: what composes does: when exporting the class name from a CSS module, it adds the other name alongside it.

It does not pull up the composed styles or modify them in any way. Meaning: it does not make sense to compose something inside a layer, as that layer won't apply to the composed class name.

A workaround, in this case, would be:

.foo {
  composes: bar from './other.module.css';
}

@layer components {
  .foo {
    /* All the layered styles */
  }
}

Which, while uglier, will be much less confusing, as it won't create a possible false expectation that a composed class name is something that would also be inside that layer.

[jeffijoe]

My use case is I have a utilities layer and a components layer. I'm not expecting the layering behavior to be altered here. I fully understand how composes works 😄

it won't create a possible false expectation that a composed class name is something that would also be inside that layer.

I do see your point, though, but I think that, for that to be the case, the user would already be misunderstanding how composes works in the first place.

[kizu]

Thinking about this, yeah, I think we need it to work from inside the layers, especially given in CSS you can import things inside layers, or import something as a layer + tooling could want to wrap a component into some layer automatically, and doing so right now via custom visitors will lead to composes not working.