[css-nesting] Define how relative selectors serialize. #8970

emilio · 2023-06-15T16:34:29Z

https://drafts.csswg.org/css-nesting/#syntax says that you're supposed to parse relative selectors while nesting.

However it doesn't say anything about how to serialize them.

<!doctype html>
<style>
  .foo {
    +bar {
      color: green;
    }
  }
</style>
<script>
  console.log(document.styleSheets[0].cssRules[0].cssRules[0].cssText);
</script>

Blink and WebKit serialize the selector as written (so, + bar).

That's ok, I suppose, but I tend to think it'd be more useful if it serialized to the expanded form (& + bar). That means that .cssText, .selectorText, etc are always valid, independently of whether the rule is a nested style rule or not. So you can always do oneRule.selectorText = anotherRule.selectorText.

Thoughts?

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

emilio · 2023-06-15T16:34:39Z

cc @sesse @andruud @mdubet

emilio · 2023-06-15T16:48:20Z

I guess you could argue the same for nested implicit rules.

So:

.foo {
  @media (min-width: 10px) {
    color: green;
  }
}

The media rule's cssText might want to contain the & { color: green } rather than hide it.

Make parsing test not depend on under-specified serialization details, see w3c/csswg-drafts#8970. Differential Revision: https://phabricator.services.mozilla.com/D181125 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1835068 gecko-commit: dbe4f23432a64d66113d4ae1656844cc498e5011 gecko-reviewers: dshin

Make parsing test not depend on under-specified serialization details, see w3c/csswg-drafts#8970. Differential Revision: https://phabricator.services.mozilla.com/D181125

Make parsing test not depend on under-specified serialization details, see w3c/csswg-drafts#8970. Differential Revision: https://phabricator.services.mozilla.com/D181125 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1835068 gecko-commit: dbe4f23432a64d66113d4ae1656844cc498e5011 gecko-reviewers: dshin

Make parsing test not depend on under-specified serialization details, see w3c/csswg-drafts#8970. Differential Revision: https://phabricator.services.mozilla.com/D181125 UltraBlame original commit: dbe4f23432a64d66113d4ae1656844cc498e5011

Make parsing test not depend on under-specified serialization details, see w3c/csswg-drafts#8970. Differential Revision: https://phabricator.services.mozilla.com/D181125

css-meeting-bot · 2023-07-12T16:09:55Z

The CSS Working Group just discussed [css-nesting] Define how relative selectors serialize., and agreed to the following:

RESOLVED: Nested relative selectors serialize with the (implied) nesting selector
RESOLVED: Grouping rules with direct styles serialize them with the (implied) style rule around them.

The full IRC log of that discussion

<TabAtkins> emilio: Our impl does something different from wk/blink
<TabAtkins> emilio: I prefer ours
<TabAtkins> emilio: blink/wk serialize relative selectors as written
<TabAtkins> emilio: [missed example]
<TabAtkins> emilio: In firefox we add the nesting selector at parse time, so we serialize it as well
<astearns> example in issue
<TabAtkins> emilio: the spec isn't clear. i have a slight preference for firefox, because selectorText works regardless of whether your'e nesting or not
<TabAtkins> emilio: which I think is a nice property to have - you can set selectorText to that of another rule regardless
<TabAtkins> I'm happy to specify firefox's behavior, fwiw
<fantasai> +1 for consistent output
<TabAtkins> emilio: this should probably also apply to the implicit style rule we add when we define nested properties in a grouping rule
<TabAtkins> +1
<TabAtkins> astearns: concerns?
<TabAtkins> [none]
<TabAtkins> proposed resolution: nested relative selectors serialize with the implicit nesting selector
<TabAtkins> proposed resolution: and styles in grouping rules serialize with the implied rule around them
<fantasai> +1
<TabAtkins> RESOLVED: Nested relative selectors serialize with the (implied) nesting selector
<TabAtkins> RESOLVED: Grouping rules with direct styles serialize them with the (implied) style rule around them.

css-meeting-bot · 2023-07-12T16:23:41Z

The CSS Working Group just discussed [css-nesting] Define how relative selectors serialize..

The full IRC log of that discussion

<TabAtkins> fantasai: I think the second reoslution was about styles directly in a media rule?
<fantasai> TabAtkins: For conditional rules that contain declarations
<TabAtkins> TabAtkins: It's about `.foo { @media (...) { display: block; } }`
<TabAtkins> TabAtkins: the reoslution says this'll serialize with a `& { display: block; }` inside the media
<fantasai> fantasai: But doesn't apply to nested rules, right?
<TabAtkins> TabAtkins: Correct, it doesn't, just to non-style rules
<emilio> s/nested rules/nested style rules
<fantasai> fantasai: Concerned about consistency with nested rules
<fantasai> TabAtkins: this makes the serialization match the OM
<TabAtkins> emilio: Yes, also it makes the cssText valid regardless of nesting status
<TabAtkins> emilio: direct properties dont' parse when the @media isn't nested
<TabAtkins> (well, it parses, but they're discarded)
<TabAtkins> fantasai: makes sense, thanks

mdubet · 2023-07-12T16:39:35Z

I understand the benefit of being able to consistenly use selectorText(), but isn't this change a bit against the "serialize CSS text to the smallest syntactic equivalent" rule ?

emilio · 2023-07-12T16:45:22Z

Yes, though the "smallest syntactic equivalent" in this case isn't valid in all contexts, so I think it's better to use the longer form since it's the "always valid" form.

Update as per the resolutions in w3c/csswg-drafts#8970, making the mixed-properties test not tentative. Differential Revision: https://phabricator.services.mozilla.com/D183518 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1843349 gecko-commit: 269d9593b265d4e6c2bc0b1a610dc182258d641a gecko-reviewers: boris

…nt resolutions. r=boris Update as per the resolutions in w3c/csswg-drafts#8970, making the mixed-properties test not tentative. Differential Revision: https://phabricator.services.mozilla.com/D183518

Update as per the resolutions in w3c/csswg-drafts#8970, making the mixed-properties test not tentative. Differential Revision: https://phabricator.services.mozilla.com/D183518 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1843349 gecko-commit: 269d9593b265d4e6c2bc0b1a610dc182258d641a gecko-reviewers: boris

tabatkins · 2023-07-14T16:39:07Z

Ah forgot to tag this issue into the commit message as well, this is fixed in 4810428

…nt resolutions. r=boris Update as per the resolutions in w3c/csswg-drafts#8970, making the mixed-properties test not tentative. Differential Revision: https://phabricator.services.mozilla.com/D183518 UltraBlame original commit: 269d9593b265d4e6c2bc0b1a610dc182258d641a

Make parsing test not depend on under-specified serialization details, see w3c/csswg-drafts#8970. Differential Revision: https://phabricator.services.mozilla.com/D181125

emilio added Agenda+ F2F css-nesting-1 Current Work labels Jun 15, 2023

emilio added Agenda+ and removed Agenda+ F2F labels Jun 15, 2023

moz-wptsync-bot mentioned this issue Jun 16, 2023

[Gecko Bug 1835068] Parse relative selectors for nesting. web-platform-tests/wpt#40595

Merged

css-meeting-bot removed the Agenda+ label Jul 12, 2023

chromium-helper mentioned this issue Jul 12, 2023

[css-nesting] Define how relative selectors serialize. chromium-helper/csswg-resolutions#148

Closed

mozilla-apprentice mentioned this issue Jul 12, 2023

[css-nesting] Define how relative selectors serialize. mozilla/wg-decisions#1154

Open

moz-wptsync-bot mentioned this issue Jul 13, 2023

[Gecko Bug 1843349] [css-nesting] Improve nesting tests to account for recent resolutions. web-platform-tests/wpt#41027

Merged

tabatkins added Closed Accepted by CSSWG Resolution Tested Memory aid - issue has WPT tests labels Jul 14, 2023

bramus mentioned this issue Jul 16, 2023

Feature request: support for nested selectors bramus/specificity#20

Open

emilio mentioned this issue Aug 3, 2023

Fix nesting web-platform-tests/wpt#41213

Merged

emilio closed this as completed Mar 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-nesting] Define how relative selectors serialize. #8970

[css-nesting] Define how relative selectors serialize. #8970

emilio commented Jun 15, 2023

emilio commented Jun 15, 2023

emilio commented Jun 15, 2023

css-meeting-bot commented Jul 12, 2023

css-meeting-bot commented Jul 12, 2023

mdubet commented Jul 12, 2023

emilio commented Jul 12, 2023

tabatkins commented Jul 14, 2023

[css-nesting] Define how relative selectors serialize. #8970

[css-nesting] Define how relative selectors serialize. #8970

Comments

emilio commented Jun 15, 2023

emilio commented Jun 15, 2023

emilio commented Jun 15, 2023

css-meeting-bot commented Jul 12, 2023

css-meeting-bot commented Jul 12, 2023

mdubet commented Jul 12, 2023

emilio commented Jul 12, 2023

tabatkins commented Jul 14, 2023