feat(all): Support for CSS Cascade Layers

[johanndev]

Feature Description

Are there any plans to introduce support for CSS Cascade Layers?

References: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers https://caniuse.com/css-cascade-layers https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/

Use Case

To meet the demands of our customers, our team often has to override the default styles of angular material components. We'd like to use cascade layers to organize our normalization, override, and custom styles. If the angular components would be wrapped in a dedicated (configurable?) layer, our material overrides could be embedded more conveniently into our overall style logic.

[alexlehner86]

I'd very much appreciate this too! The problem right now is that many Angular Material components add CSS rules inside a style tag to the document's head. Currently there is no way to configure that these CSS rules should be defined as part of a specific CSS cascade layer.

I would also like to offer my help in implementing this feature.

[alexlehner86]

Any update on this?

[Opcyc-Ben]

Can I be of assistance with this? Has anyone already worked on this, or do you guys have a specific design in mind?

[alexlehner86]

@OpCyc-Ben As far as I know, nobody has worked on this yet. Here's a suggestion how it could work:

• Developers using Angular Material in an Angular application, can provide the name for a dedicated cascade layer via an InjectionToken.
• If the layer name is provided, then all Material components wrap their styles in this cascade layer using the @layer block at-rule.
• If developers don't want to use a cascade layer for Angular Material components, then they simply don't provide the layer name. In this case, the components would provide the styles as is, without wrapping them in a cascade layer block.
• The documentation for the cascade layer option should explain that the developers must define the order of the cascade layers in their project, e.g., by using @layer followed by the names of the layers without assigning any styles. It's possible that this order definition has to be done in the first style tag in the head section of the index.html, but I'm not sure. Maybe it's sufficient to do it in the (S)CSS files that are bundled into the styles.css file. This would need some experimentation.

What do you think?

[Opcyc-Ben]

@alexlehner86 While I love that idea, I'd like to first discuss first what we are conceptually trying to do. I'm even torn whether angular itself might be a better place for this. To be transparent about my motivation, our (my) use-case for this would be to wrap any non-layered styles into a base-layer. This use-case would go beyond the scope of 'material' or angular's own components.

• As far as I understand style isolation seems to attempt to keep intact whatever styles a component author sets.
• ::ng-deep allows you to explicitly override styles for all children of a given selector even protected ones, by adding whatever css that requires, at the level you need it.
• Adding @layer, it seems to me, would have to be more like an app-wide configuration change, as the emitted style tag this would have to end up in isn't repeated for every instance of every component they apply to.

My open questions to you would be: Where exactly do you envision that InjectionToken to go, and what exactly do you think it should do to the output? What's your use-case?