CSS Cascade Layers support

[AlexandrHoroshih]

Relates to #26

Hello and thank you for the awesome library! 👋

Since CSS Cascade Layers support is gettng better in the browsers, i was wondering if there any plans to support this feature?

Right now it seems to be not supported: I wrote some snapshot tests and current version of used-styles just adds all @layer-related stuff into the critiical styles without considering, if any of styles in that layer are actually used

So it looks like that some special handling, like it is done for @media rules, is needed 🤔

There is a polyfill for CSS Layers and it does work much better with used-styles, but since this feature is getting wider support in the browsers (90% according to caniuse), i think, it is a good time to introduce a native support

CSS Layers are pretty cool, since by using it

Authors can create layers to represent element defaults, third-party libraries, themes, components, overrides, and other styling concerns – and are able to re-order the cascade of layers in an explicit way, without altering selectors or specificity within each layer, or relying on source-order to resolve conflicts across layers

which is basically a native CSS solution to issue #26

What do you think?

[AlexandrHoroshih]

I see a possible way to support CSS Layers as follows:

1. layer order definitions are treated the same way as tag-based selectors (html, body, etc.), so things like @layer theme, layout, utilities; are always included in critical css
2. "Layered" styles ( @layer theme { ... }) are handled the same way @media is handled now

If PR with this feature would be welcome, I'd be happy to work on it 🙂

[theKashey]

Absolutely correct

• for .1 all you need is to make layer definition "not extractable", so it will be always extracted like html, body, and so on
• to keep @layer all you need is to modify toAst and fromAst, but I am not sure how ease it will be to add one extra level of nesting. Not quite sure how Postcss handles this, but probably you will get one extra parent here - https://github.com/theKashey/used-styles/blob/master/src/parser/toAst.ts#L12 and and it's that simple - "restore" it here - https://github.com/theKashey/used-styles/blob/master/src/parser/fromAst.ts#L75

If PR with this feature would be welcome, I'd be happy to work on it 🙂

Yes please, my capacity is quite limited now. I even answering to issues a couple of days late 😿