search

eagerpatch / navita

Atomic CSS-in-JS with zero runtime
https://navita.style
MIT License
51 stars 0 forks source link

CSS specificity for certain rules #22

Closed Zn4rK closed 9 months ago

Zn4rK commented 10 months ago

I've come across at least one case where we need to control the CSS specificity better. It's mainly if the user is specifying the declaration:

all: unset;

Rules in a specific list needs to be rendered before rest of the CSS, and possibly live in a separate layer. Right now I can only think of "all: unset" specifically, but it should be pretty easy to just sort the rules in the css printer.

Zn4rK commented 10 months ago

To expand on this;

If Navita is configured to use opinionatedLayers, we'll need to specify a new layer that has lower specificity than rules.

https://github.com/eagerpatch/navita/blob/9e4ac18dd5fa9c5e74bc07290103d810f5a39588/packages/engine/src/index.ts#L218C17-L218C40

@layer static,[here],rules,at

If opinionatedLayers is not specified, we need to make sure to filter out / sort out, rules that should always be printed earlier in the document.