[css-cascade] stylesheet conditions

[romainmenke]

I would like to have the ability to apply conditions to an entire stylesheet from within that stylesheet.

This is possible today but not without issues and drawbacks.

A new at-rule to declare conditions for the entire current stylesheet would have specific advantages :

• guaranteed to apply to the entire stylesheet
• local, not external as with @import conditions
• would not apply to further imports

---

We can do this today by carefully wrapping everything in the needed at-rules.
But this is not enforced. Any fellow author can add non conditional styles to this stylesheet.

It forces all styles to be nested, pushing code to the right.

This is harder to read and maintain.
It gets worse if css nesting is (ab)used in such a stylesheet.

my-component.css :

@import './variables.css';

@layer components {
  @scope (.my-component) {
    .my-component {
      color: var(--color-a);

      @media (prefers-color-scheme: dark) {
        color: var(--color-b);
      }
    }

    span {
      color: var(--color-c);
    }
  }
}

---

We can use import conditions to achieve a similar effect.

But this has an unwanted side effect. The import conditions will apply to downstream imports.
@import './variables.css' is now also layered and scoped, which was not the original intention of that code.

Losing the co-location of @scope (.my-component) and all the styles for .my-component is not ideal.

The component specific code in this example doesn't suffer from the same maintenance and readability issues as the first example. However it is harder to consume and maintain this code because it isn't self contained and it has side effects.

style.css :

@import './my-component.css' layer(components) scope((.my-component));

my-component.css :

@import './variables.css';

.my-component {
  color: var(--color-a);

  @media (prefers-color-scheme: dark) {
    color: var(--color-b);
  }
}

span {
  color: var(--color-c);
}

---

Proposal

A new at-rule to declare the conditions and cascade layer that must be applied to the current stylesheet.

• must come after @import
• before any other styles
• does not apply to other imported stylesheets
• last one applies? / first is valid? / multiple combine somehow?
• has the same syntax as @import, minus the url
• stylesheet-conditions name is a placeholder

my-component.css :

@import './variables.css';

@stylesheet-conditions layer(components) scope((.my-component));

.my-component {
  color: var(--color-a);

  @media (prefers-color-scheme: dark) {
    color: var(--color-b);
  }
}

span {
  color: var(--color-c);
}