[csswg-drafts] [css-cascade] stylesheet/export conditions (#9427)

romainmenke has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade] stylesheet/export conditions ==
I would like to have the ability to apply conditions to an entire stylesheet from within that stylesheet.

This is possible today but 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 like with `@import` conditions
- does 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 inside these conditions, pushing code to the right.

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

`my-component.css` :

```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 also 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` :

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

`my-component.css` :

```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
- last one applies? / first is valid? / multiple combine somehow?
- does not apply to other imported stylesheets

This at-rule would likely have same syntax as `@import`, minus the url.

_the `stylesheet-conditions` name is a placeholder_

`my-component.css` :

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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9427 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 30 September 2023 07:58:50 UTC