CSS Cascade Layers (@layer) support

[paulshryock]

Would it be possible to add support for CSS Cascade Layers (@support)? This plugin would potentially handle ordering/scoping during compilation to provide the expected behavior of Cascade Layers in compiled CSS files if browsers indicated in browserslist do not yet support Cascade Layers.

I haven't given extensive thought to this idea, so if it just wouldn't work the way I described, then fair enough--feel free to close this.

Resources

• Bram.us article about Cascade Layers
• CSS Tricks article about Cascade Layers

[Antonio-Laguna]

@paulshryock this is a great feature but I'm afraid is not as straightforward as just reordering given that specificity changes drastically its meaning and layer order matters most.

As an example:

<input type="text" id="input" class="my-input" />

With this CSS:

@layer theme {
  #input {
    color: red;
  }
}

@layer overrides {
  .my-input {
    color: blue;
  }
}

Would make the input be colored blue since order matters more than specificity. Moving things around wouldn't solve this issue. I'd say we'd need JS here to apply things. It'd be surely fun to prototype but not something we can quickly achieve.

Thanks for articulating it and linking to resources though!

[paulshryock]

Fair enough, that makes sense.

[romainmenke]

More explainer : https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/

---

I think we can implement this with :not() selectors.

1. calculate the highest a specificity (id's) in any selector (X) from any layer
2. calculate the number of layers (Y)
3. take an obscure short id selector (#obscure)
4. assign each unlayered selector X + Y :not(#obscure) suffixes
5. for each layered selector do the same but use X + index in layer order

This can be further minimised by more carefully calculating the minimum number of needed selectors.

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

/* wins */
p {
  color: red;
}

becomes

.blue {
  color: blue;
}

/* wins */
p:not(#obscure) {
  color: red;
}

[mindplay-dk]

Reordering alone wouldn't work, but could we use :where() to remove specificity? 🤔

[oluoluoxenfree]

I'm working on a polyfill using the is() selector: is there a contribution guide for this project? I couldn't find it.

[Antonio-Laguna]

@oluoluoxenfree thanks for asking!

We do have a contribution guide along with a code of conduct.

There's a plugin for :is which you can find here: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class , is there anything missing there?

[romainmenke]

@oluoluoxenfree At the moment there is no specific guide for a new plugin.
But the steps broadly are :

• clone the repo and run npm install
• duplicate postcss-base-plugin
• change the plugin name to what you desire
• run npm install again (this will do some npm stuff for the new package)
• cd into the plugin folder
• run npm run build && npm run test to make sure you start from a good state
• write your plugin

At first it is totally fine to focus on the plugin logic and ignore things like the README and full test coverage.

It's easier for us to provide feedback if the pull request grows in smaller steps.

Can you provide an outline of how your plugin would work?

[oluoluoxenfree]

Oh sorry @Antonio-Laguna ; a plugin for cascade layers using :is()? I'm working with Miriam Suzanne as the CSS expert, I'll get my notes togther.

[romainmenke]

I'll get my notes togther.

This can be very rough and high level :)
Mainly curious about the mechanic.

[oluoluoxenfree]

Miriam wrote this. and I'm trying to break it down into small feature stages, she's already told me about a number of edge cases.