LibWeb/CSS: Parse and use nested style rules

For example, this:

```css
.foo {
  color: red;
  &:hover {
    color: green;
  }
}
```

now has the same effect as this:

```css
.foo {
  color: red;
}
.foo:hover {
  color: green;
}
```

CSSStyleRule now has "absolutized selectors", which are its selectors
with any `&`s resolved. We use these instead of the "real" selectors
when matching them, meaning the style computer doesn't have to know or
care about where the selector appears in the CSS document.
This commit is contained in:
Sam Atkins 2024-10-17 12:26:37 +01:00 committed by Andreas Kling
commit 53f99e51f8
Notes: github-actions[bot] 2024-10-17 18:57:13 +00:00
8 changed files with 345 additions and 10 deletions

View file

@ -24,6 +24,7 @@ public:
virtual ~CSSStyleRule() override = default;
SelectorList const& selectors() const { return m_selectors; }
SelectorList const& absolutized_selectors() const;
PropertyOwningCSSStyleDeclaration const& declaration() const { return m_declaration; }
virtual Type type() const override { return Type::Style; }
@ -40,9 +41,11 @@ private:
virtual void initialize(JS::Realm&) override;
virtual void visit_edges(Cell::Visitor&) override;
virtual void clear_caches() override;
virtual String serialized() const override;
SelectorList m_selectors;
mutable Optional<SelectorList> m_cached_absolutized_selectors;
JS::NonnullGCPtr<PropertyOwningCSSStyleDeclaration> m_declaration;
};