[csswg-drafts] [css-nesting] selecting grandparent selector with @nest (#6977)

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

== [css-nesting] selecting grandparent selector with @nest  ==
The current spec might seem to have missing grandparent selector, which is also very used feature in many preprocessors.

This is currently still possible with [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting), with `noIsPseudoSelector: true` option. Which results in following:


```css
.a {
  color: blue;
  & .b {
    @nest :not(.c)& {
      color: red
    }
  }
}

.a:not(.c) .b {
    color: red;
}
```

This is also the same way **Less** uses grandparent, and **Sass** uses `@at-rule`

```css
.a {
  color: blue;
  .b {
    :not(.c)& {
      color: red
    }
  }
}

.a:not(.c) .b {
    color: red;
}
```

My question, is this something that should also be added to spec? Becuase I didn't find any mention of this in there. Or should some different syntax be proposed for selecting gradparent selector? Any thoughts on this @tabatkins ?

This issue is also related to grandparent selector - https://github.com/w3c/csswg-drafts/issues/6330

Also related  postcss issue here - https://github.com/csstools/postcss-plugins/issues/195 and supposedly grandselector syntax that previously worked in postcss-nesting was a bug

Current way that works in postcss-nestning is following, which I am not sure if is corect

```css
.a {
  color: blue;
  & .b {
    @nest .a:not(.c) & {
      color: red
    }
  }
}

.a:not(.c) :is(.a .b) {
    color: red;
}
```

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


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

Received on Saturday, 22 January 2022 22:50:10 UTC