Feature request: Support for cascade layers

[Jarzka]

Hi

Modern CSS supports cascade layers that are useful for example overriding framework specific styles: https://developer.chrome.com/blog/cascade-layers/

I wonder if there is a support coming for this in Garden? Something like at-layer could be a reasonable way to implement this.

[WorldsEndless]

Interesting! My first thought was that we already have "layers" since nesting is one of the huge features of Garden (although it is also now included in CSS proper). But then I read your link and saw that this is about a new sort of selector. Can you help teach why this would be desirable instead of, eg, principled nesting/variables that are so easy in what Garned users have? Perhaps a (psuedo-code) example?

[Jarzka]

Let's say my site uses some 3rd party CSS framework as a base style. In this framework, there is a selector which adds a style for list items with links:

.list > li > a {
  color: red;
}

Now I want to override this style in my application code and turn the color into blue. A simple way to do this would be adding an utility class of blue to the a element and creating the equivalent CSS class selector with Garden. The end result would be:

.blue {
  color: blue;
}

However, if I attach this blue class to my a item, it's still going to have red as a color, because the framework's selector .list > li > a is stronger than my own .blue selector. In order to override the red color, I would need to create a selector which is stronger than the one in the framework, something like .list > li > a.blue (this would also kinda defeat the purpose of the blue utility class, it should work everywhere with a simple class selector).

Cascade layers could make this process much simpler. I could wrap all the framework specific code into "framework" layer like so:

@layer framework {
  .list > li > a {
    color: red;
  }
}

Then I would wrap all my application code into its own "application" layer (i.e. I would use the at-layer rule in Garden), which comes after the "framework" layer like so:

@layer application {
  .blue {
    color: blue;
  }
}

Now my a element turns into blue. The @layer rule creates a new cascading context, which automatically overrides all framework selectors, no matter how strong they are.

[dgb23]

To add to this discussion. Here is a CSS snippet from a project I'm working on. It simply describes the layer hierarchy. Anything defined on a layer to the right will override something in the layer to the left.

@layer reset, globals, layout, components, partials, utilities;