[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);
}

[mirisuzanne]

@romainmenke This seems related to your recent comment on a scope PR, which would allow this sort of condition to be applied externally via @import. I wonder if we need both, and if so, how they interact.

[romainmenke]

I've also been wondering how the @sheet proposal interacts with all this.

It would allow:

@import "unrelated.css";

@sheet a-sheet {
  .bar { color :green; }
}

/* syntax for how `a-sheet` is referenced is still undecided */
@import "a-sheet" layer scope(.some-scope) supports(color) screen and (width: 500px);

By wrapping everything in a sheet and immediately importing that sheet it is possible to have some benefits:

• the styles and conditions are both local
• indent/nesting level remains low
• easy to enforce with a linter
• conditions aren't applied to other imports in the same file.

@sheet doesn't immediately make it possible to bundle scope conditions on @import if they have distinct behavior from @scope rules but that is only a short term pain. Eventually support will catch up.