[css-nesting-1] Allow relative selector syntax in `@nest` rules. #7854

romainmenke · 2022-10-07T17:38:59Z

This is an alternative proposal to : #7834

It only focusses on a single part of the issues brought up there:

selectors within nested context are incompatible with those outside of nested context, and with syntax within @scope, which invites a lot of copy-paste errors when transferring code among these contexts

Only nested selectors with a single & and if the & is located at the start of the selector could currently match elements outside of a nesting context. (correct me if I am wrong)

Can work in different contexts :

&.foo
& .foo
& + .foo
& .foo + .bar
...

I am unsure about these :

.foo&
.foo &

These will likely not match anything :

& + &
& + .bar ~ &

What makes sense to copy-paste is already a subset of all possible kinds of nesting selectors. So maybe this can be a "power feature" unlocked by using @nest in the current nesting syntax?

@nest already unlocks more features in todays nesting syntax.

.foo {
  @nest .bar {
    /* & .bar */
    /* .foo .bar */
  }
}

/* copy-pasted to another context: */
.bar {
  /* :root .bar */
}

.foo {
  @nest > .bar {
    /* & > .bar */
    /* .foo > .bar */
  }
}

/* copy-pasted to another context: */
> .bar {
  /* :root > .bar */
}

Also valid:

.foo {
  @nest > .bar + & {
    /* & > .bar + & */
    /* .foo > .bar + .foo */
  }
}

/* copy-pasted to another context: */
> .bar + & {
  /* :root > .bar + :root */
  /* this would never match anything but it could be valid for the parser */
}

The text was updated successfully, but these errors were encountered:

FremyCompany · 2022-10-19T17:13:38Z

FWIWI, if we go with option 1 or 3 in 7877, I would strongly support this change.

fantasai · 2022-10-19T17:38:54Z

@FremyCompany I think we should do this regardless of which option we choose. It's compatible with all of them. We noted it in #7834 (comment) but the discussion was mostly about other aspects. Worth splitting out though, so I'll Agenda+

romainmenke · 2022-10-19T17:48:19Z

@fantasai It is only compatible with option 1 as currently discussed.

All other options drop @nest blocks completely. #7834 (comment)

fantasai · 2022-10-26T13:30:18Z

@romainmenke Yeah, so in option 3 you could just write

.foo {
  > .bar {
    /* & > .bar */
    /* .foo > .bar */
  }
}

and in option 4 it would be

.foo { } {
  > .bar {
    /* & > .bar */
    /* .foo > .bar */
  }
}

or

.foo && {
  > .bar {
    /* & > .bar */
    /* .foo > .bar */
  }
}

romainmenke · 2022-10-26T13:36:44Z

@fantasai This issues was specifically about adding relative selector syntax in @nest within proposal 1.

This as a way to have all the benefits of relative selector syntax without all the downsides of the other proposals.

This also allows us to do this :

css-nesting-1 : current specification (a.k.a. proposal 1)
css-nesting-2 : relative selectors in @nest
css-nesting-3 : allow authors to omit & and @nest in as many cases as possible (proposal 3)
or some mutation of that

css-meeting-bot · 2022-10-26T14:57:57Z

The CSS Working Group just discussed Allow relative selector syntax in @nest rules, and agreed to the following:

RESOLVED: allow relative selectors for both nesting and @scope

The full IRC log of that discussion

<emeyer> Topic: Allow relative selector syntax in @nest rules
<emeyer> GitHub: https://github.com//issues/7854
<emeyer> fantasai: We had talked about adopting relative selectors as a way of writing nested selectors
<emeyer> …Thus is you have a combinator, you could just write it without prefixing with an ampersand (&)
<emeyer> …I believe all proposed syntaxes can accept having relative selectors
<emeyer> …I propose we allow that for all of them
<emeyer> …In option 1, you can only put a relative after @nest, but you wouldn’t need an &
<fantasai> s/you can/one proposal is you can/
<lea> +1 for relative selectors, +1 for not requiring @nest (the less @nest the better...)
<emeyer> fremy: We can also do this for @scope
<emeyer> fantasai: I believe that’s correct
<emeyer> miriam: I don’t remember if we clarified that, but I agree it should work
<emeyer> fantasai: I’ll break this down
<emeyer> …Do we want to allow relative selectors for nesting and @scope?
<emeyer> Rossen: Feedback or objections?
<flackr> q+
<emeyer> flackr: It’s a bit odd that we support all selectors except descendant because of the parsing ambiguousness
<Rossen_> ack flackr
<emeyer> Rossen: Still not hearing objections, so will call this resolved
<miriam> scope spec says :scope is assumed at the start of selectors, which is similar to allowing this (but not entirely explicit)
<argyle> i like the relative selector feature as nesting 2
<emeyer> RESOLVED: allow relative selectors for both nesting and @scope
<fantasai> Note: @scope already has this
<fremy> proposal is we allow `@nest > x` == `@nest & > x`
<emeyer> fantasai: The next piece is that for option 1 syntax, where you have to start with an ampersand, do we require it @nest?
<emeyer> lea: The less @nest, the better
<emeyer> TabAtkins: I don’t think it’s useful to discuss option 1 syntax since we don’t know if we’re going to use it
<astearns> q+
<emeyer> fantasai: Whether descendant selectors are allow ing nesting will depend on a following discussion
<emeyer> astearns: Because of the weirdness about descendant selectors, should we define an actual optional syntax for descendant selectors in nest and @scope situations?
<fantasai> s/allow ing/allowed to be written as relative selectors in/
<Rossen_> ack astearns
<emeyer> TabAtkins: I think we should but that should be a different discussion
<emeyer> Rossen: Please open an issue on that if we don’t already have one, Alan?
<emeyer> …Anything else on this topic?
<emeyer> (no)
<Rossen_> https://github.com/w3c/csswg-drafts/blob/main/css-nesting-1/proposals.md
<TabAtkins> /me I propose in the next topic we have a quick refresher on the options (happy to do it, or elika or lea), then have a shortish comment period, then straw poll.
<fantasai> -> https://github.com/w3c/csswg-drafts/blob/main/css-nesting-1/proposals.md
<emeyer> lea: If you followed all this and have an opinion but haven’t recorded a vote, please do so!

tabatkins · 2022-10-27T19:11:42Z

Nesting spec now reflects this; retagging to Cascade 6 to track the remaining edits to @scope.

romainmenke · 2022-10-27T19:29:56Z

@tabatkins This issue was specifically about the now removed proposal 1.

It was very specifically about :

.foo {
  @nest > .bar {
    /* & > .bar */
    /* .foo > .bar */
  }
}

Maybe it will be less confusing to open a new issue?

tabatkins · 2022-10-27T22:47:17Z

No, we chose to reinterpret this as a general referendum on relative selectors in places where we allow nesting. Check the minutes of the discussion.

mirisuzanne · 2023-02-17T18:51:50Z

The details of how we spec this in @scope depends on the resolution of #8377 - documenting so these edits can happen together.

romainmenke mentioned this issue Oct 8, 2022

[css-nesting-1] Syntax Invites Errors #7834

Closed

Myndex mentioned this issue Oct 13, 2022

[css-nesting-1] Syntax Additions and Alternate Syntax Thoughts #7877

Closed

fantasai added Agenda+ css-nesting-1 Current Work labels Oct 19, 2022

atanassov added this to Nesting in October 26 meeting Oct 25, 2022

css-meeting-bot removed the Agenda+ label Oct 26, 2022

mozilla-apprentice mentioned this issue Oct 26, 2022

[css-nesting-1] Allow relative selector syntax in @nest rules. mozilla/wg-decisions#936

Open

tabatkins added css-cascade-6 and removed css-nesting-1 Current Work labels Oct 27, 2022

romainmenke mentioned this issue Nov 3, 2022

[css-selectors] Allow relative selectors everywhere #8010

Closed

mirisuzanne added the Needs Edits label Dec 5, 2022

mirisuzanne added this to Needs Edits in Cascade 6 (Scope) Dec 5, 2022

mirisuzanne mentioned this issue Feb 22, 2023

[css-cascade-6] Scoped selectors shouldn't match the scope root unless explicitly requested with :scope? #8377

Closed

mirisuzanne moved this from Needs Edits to Done in Cascade 6 (Scope) Mar 3, 2023

mirisuzanne added Closed Accepted by CSSWG Resolution and removed Needs Edits labels Mar 3, 2023

mirisuzanne closed this as completed Mar 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-nesting-1] Allow relative selector syntax in `@nest` rules. #7854

[css-nesting-1] Allow relative selector syntax in `@nest` rules. #7854

[css-nesting-1] Allow relative selector syntax in @nest rules. #7854

[css-nesting-1] Allow relative selector syntax in @nest rules. #7854

Comments

[css-nesting-1] Allow relative selector syntax in `@nest` rules. #7854

[css-nesting-1] Allow relative selector syntax in `@nest` rules. #7854