[csswg-drafts] [css-nesting] Allow Group Rules and Relative Selector Lists in the Same Nested Style Rule (#8840)

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

== [css-nesting] Allow Group Rules and Relative Selector Lists in the Same Nested Style Rule ==
Hey everyone, hope you’re all doing well. I’m not super familiar with the terminology, so it’s possible I might have some terms wrong. This should be the [spec](https://drafts.csswg.org/css-nesting). 

I was writing some nested CSS and was surprised to find that it was not possible to include group rules and relative selector lists in the same style rule. Basically, I wanted to include a media query for prefers color scheme and a class to force a color scheme on the same line, instead of having to duplicate a bunch of CSS. Hopefully, this example clears things up.

What if instead of writing:

```css
body {
     background: var(--color);

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

     @media(prefers-color-scheme: light) {
         --color: blue;
    }

     &.dark {
         --color: navy;
    }

     &.light {
         --color: blue;
    }
}
```


We could write:

```css
body {
     background: var(--color);

     @media(prefers-color-scheme: dark), &.dark {
     &:not(.light) {
          --color: navy;
 }
    }

     @media(prefers-color-scheme: light), &.light {
     &:not(.dark) {
          --color: blue;
 }
    }
}
```

Which would be equivalent to:

```css
body {
     background: var(--color);
}

@media(prefers-color-scheme: dark) {
     body:not(.light) {
         --color: navy;
    }
}

 body.dark:not(.light) {
     --color: navy;
}

 @media(prefers-color-scheme: light) {
     body:not(.dark) {
         --color: blue;
    }
}

 body.light:not(.dark) {
     --color: blue;
}
```

I realize this could be something that looks simple to implement from the outside but is actually very complex. It would definitely make it way easier to have default light or dark styles based on the device's color scheme while allowing the user to override your site. Thanks!


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


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

Received on Saturday, 13 May 2023 17:20:10 UTC