Re: [csswg-drafts] [css-nesting-1] Wrapping parent selectors with `:is()` introduces a host of problems (#9492)

I've been starting to use CSS Nesting and ran into this problem.

Here's what I tried, that didn't work:

```js
sl-card {
    &::part(base) {
        @media (prefers-color-scheme: light) {
            background: rgb(255 255 255 / 0.4);
            backdrop-filter: saturate(1.3) contrast(1.5) blur(33px);
        }
        @media (prefers-color-scheme: dark) {
            background: hsl(240 5.9% 11% / 0.65);
            backdrop-filter: blur(33px);
        }
    }
}
```

I had to change it to this for it to work:

```js
sl-card {
    @media (prefers-color-scheme: light) {
        &::part(base) {
            background: rgb(255 255 255 / 0.4);
            backdrop-filter: saturate(1.3) contrast(1.5) blur(33px);
        }
    }
    @media (prefers-color-scheme: dark) {
        &::part(base) {
            background: hsl(240 5.9% 11% / 0.65);
            backdrop-filter: blur(33px);
        }
    }
}
```

I thought CSS Nesting was not working as it should.; I thought Nesting was merely syntax sugar. Then someone pointed me to this issue.

-- 
GitHub Notification of comment by trusktr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9492#issuecomment-2047935760 using your GitHub account


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

Received on Wednesday, 10 April 2024 16:03:35 UTC