1838172 - selector highlighter doesn't work for nested rules in style editor

Status: NEW

(DevTools :: Style Editor, defect, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

Steps to reproduce

1. Navigate to data:text/html,<meta charset=utf8><style>body { & h1 { color: gold; }}</style><h1>Hello</h1>
2. Open the style editor
3. Hover the & h1 token in the editor

Expected results

The element is highlighted in the page

Actual results

Highlighter is never displayed

---

It may be because we're using the rule selector directly (& h1), 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) h1