Define how CSS modules interacts with @layer

[jacobrask]

I think all CSS modules by default should end up in a specific CSS layer such as @layer modules or @layer css-modules. This would let you, in a global stylesheet before all CSS modules, declare exactly where modules should be placed in the order of layers, such as:

@layer reset, theme, css-modules, utilities;

Since CSS modules are about encapsulation they pair very well with @layer. A CSS module will then not only not affect global styles through global selectors, it would also have a well-defined specificity that can be overridden by CSS included through other methods.

By making this part of the CSS modules specification, tools and frameworks can also make assumptions about where they want to place other types of styles.

[adamkudrna]

This is exactly what I need! 🙏🏻 Plus I'd appreciate if I could rename the target layer, e.g. to components:

@layer theme, foundation, helpers, components, utilities;

Currently I am unable to point the CSS Module styles into any cascade layer. All other styles are layered, but just my component styles remain unlayered…