[css-nesting] Allow Group Rules and Relative Selector Lists in the Same Nested Style Rule

[Jothsa]

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.

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:

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:

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:

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!

[romainmenke]

Hi @Jothsa!

There is an existing thread that is focussed on the same issue, although with a different syntax suggestion, might be interesting to check out : #6247