Re: [csswg-drafts] [css-nesting] :selector-replace() pseudo-class function (#6330)

Ok, so if `.foo:focus .bar .baz` is the intended output, I think I would define it like this, following your proposal:

```css
.foo {
  scope-name: foo;

  & .bar {
    & .baz {
      &foo:focus {
      
      }
    } 
  }
}
```

I guess you named the scope `bar` to make it clear that this is an arbitrary label. But in a real case you’d probably use part of the class name of the scope (foo)? And I think `&foo:focus` should go inside `.baz`, because this way you can also have `.baz` styles without the focus modifier.

The issues I see with this approach:
  - This introduces a new `scope-name` property, that is merely used as an aid for the syntactical sugar of nesting. I’m not sure this is legit, I believe this would be a precedential case?
  - I chose the original example above deliberately as it features an edge case: what if you didn’t just want to add a pseudo-class like `:focus` somewhere in the full selector but wanted to modify it with a more complex selector? E.g. how would you modify `.foo .bar .baz` to `.foo .qux.active .bar .baz` with the proposed approach?

The benefit of the originally proposed `:selector-replace()` function is that it can take selectors of any complexity as arguments.

But let’s take a step backward. To be clear, I’m not attached to the original syntax, first and foremost I would like to come to an understanding in terms of the `&` nesting selector – I believe the draft of the nesting spec is incomplete. The `&` allows us to append something to the full selector, like:
```css
.foo {
  .bar {
    &:hover {
    
    }
  }
}
```
It also provides means to prepend something to the full selector, like:
```css
.foo {
  .bar {
    @nest :hover & {
  
    }
  }
}
```
And you can have media queries right in place (which is great for responsive layouts):
```css
.foo {
  .bar {
    @media (min-width: 768px) {
      & {
      
      }
    }
  }
}
```
So you can basically do everything you want within an existing nesting – except if the selector in question is accidentally part of the nesting. In this case the only way (currently) is to replicate the modified nesting (and that’s a bad thing for several reasons). It is kind of 'discriminatory' to the selectors that happen to be in the nesting:
```css
.foo {
  .bar {
  
  }
  
  &:hover {
    .bar {
   
    }  
  }
}
```

So I think once nesting is introduced there should not only be means to prepend and append something to `&`, but also means to modify `&`. Are we on the same page here?


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


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

Received on Tuesday, 1 June 2021 11:52:26 UTC