1838164 - Nested rules are styled as unmatched

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, defect, P1)

Description

[Nicolas Chevobbe [:nchevobbe]]

If you have the following

body {
  & main {
    …
  }
}

The rule have the unmatched style (e.g. the selector as a lighter gray)

---

It looks like this is because we're using the rule selector directly (& main), but & can't be used to query an element, we need to substitute it with the parent selector (and if the parent selector also has &, we need to substitute it with its parent selector as well, and so on)

From the spec (https://www.w3.org/TR/css-nesting-1/#nest-selector) :

The nesting selector can be desugared by replacing it with the parent style rule’s selector, wrapped in an :is() selector.

So for our case, & main should be turned into :is(body) main

(this may be resolved at the same time as Bug 1838163, since the issue does look similar, but let's have different bugs to add specific tests)

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Julian encountered a similar issue:

I only found one STR which confuses a bit the rule view:

• open https://bug1836873-css-nesting-example.glitch.me/
• inspect the innermost square
• edit the & > .awesome selector so that it no longer matches (eg & > .awesom)
• revert the selector so that it matches
  ER: The selector should be updated to full opacity, AR: The selector still looks as if it is not matching

Let's check it again once we have the basic case covered

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1838164 - [devtools] Fix matchedSelectors for nested rules. r=#devtools-reviewers.

Return the desugared selectors from getMatchedSelectors, and use the desugared
selector we have on the rule to match against those.
A test case with nested rule is added to ensure the issue is properly fixed.

Depends on D181732

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4fdf608cf773
[devtools] Fix matchedSelectors for nested rules. r=devtools-reviewers,ochameau.

Comment 4

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/4fdf608cf773