Support nested CSS rules in modal layouts

Author: wieslawsoltes

experiments/WebScene.NativeEngine.Probe/native/html_parser/src/lib.rs

@@ -958,15 +958,13 @@ mod css_syntax {
             if prelude.name.eq_ignore_ascii_case("font-face")
                 || prelude.name.eq_ignore_ascii_case("page")
             {
-                let before = self.state.declaration_count.get();
-                parse_css_stream_declaration_list(
+                declarations = parse_css_stream_declaration_list(
                     input,
                     CssStreamingParser {
                         state: self.state.clone(),
                         parent_index: index,
                     },
                 );
-                declarations = (self.state.declaration_count.get() - before) as usize;
             } else if prelude.name.eq_ignore_ascii_case("media")
                 || prelude.name.eq_ignore_ascii_case("supports")
                 || prelude.name.eq_ignore_ascii_case("layer")
@@ -1014,24 +1012,21 @@ mod css_syntax {
             let index = self
                 .state
                 .begin_rule(CSS_RULE_STYLE, true, self.parent_index, "", prelude, _start.source_location());
-            let before = self.state.declaration_count.get();
-            parse_css_stream_declaration_list(
+            let declarations = parse_css_stream_declaration_list(
                 input,
                 CssStreamingParser {
                     state: self.state.clone(),
                     parent_index: index,
                 },
             );
-            self.state.end_rule(
-                index,
-                (self.state.declaration_count.get() - before) as usize,
-            );
+            self.state.end_rule(index, declarations);
             Ok(())
         }
     }
 
     struct CssStreamingDeclarationListParser {
         parser: CssStreamingParser,
+        direct_declarations: usize,
     }
 
     impl<'i> DeclarationParser<'i> for CssStreamingDeclarationListParser {
@@ -1044,7 +1039,11 @@ mod css_syntax {
             input: &mut Parser<'i, 't>,
             declaration_start: &ParserState,
         ) -> Result<Self::Declaration, ParseError<'i, Self::Error>> {
-            self.parser.parse_value(name, input, declaration_start)
+            let parsed = self.parser.parse_value(name, input, declaration_start);
+            if matches!(parsed, Ok(CssStreamingBodyItem::Declaration)) {
+                self.direct_declarations += 1;
+            }
+            parsed
         }
     }
 
@@ -1082,9 +1081,45 @@ mod css_syntax {
     }
 
     impl<'i> QualifiedRuleParser<'i> for CssStreamingDeclarationListParser {
-        type Prelude = ();
+        type Prelude = &'i str;
         type QualifiedRule = CssStreamingBodyItem;
         type Error = ();
+
+        fn parse_prelude<'t>(
+            &mut self,
+            input: &mut Parser<'i, 't>,
+        ) -> Result<Self::Prelude, ParseError<'i, Self::Error>> {
+            let prelude = consume_raw(input);
+            if prelude.is_empty() {
+                return Err(input.new_error(BasicParseErrorKind::QualifiedRuleInvalid));
+            }
+            Ok(prelude)
+        }
+
+        fn parse_block<'t>(
+            &mut self,
+            prelude: Self::Prelude,
+            start: &ParserState,
+            input: &mut Parser<'i, 't>,
+        ) -> Result<Self::QualifiedRule, ParseError<'i, Self::Error>> {
+            let index = self.parser.state.begin_rule(
+                CSS_RULE_STYLE,
+                true,
+                self.parser.parent_index,
+                "",
+                prelude,
+                start.source_location(),
+            );
+            let declarations = parse_css_stream_declaration_list(
+                input,
+                CssStreamingParser {
+                    state: self.parser.state.clone(),
+                    parent_index: index,
+                },
+            );
+            self.parser.state.end_rule(index, declarations);
+            Ok(CssStreamingBodyItem::Ignored)
+        }
     }
 
     impl RuleBodyItemParser<'_, CssStreamingBodyItem, ()> for CssStreamingDeclarationListParser {
@@ -1093,23 +1128,27 @@ mod css_syntax {
         }
 
         fn parse_qualified(&self) -> bool {
-            false
+            true
         }
     }
 
     fn parse_css_stream_declaration_list<'i>(
         input: &mut Parser<'i, '_>,
         parser: CssStreamingParser,
-    ) {
+    ) -> usize {
         let errors = parser.state.errors.clone();
         let first_error = parser.state.first_error.clone();
-        let mut body_parser = CssStreamingDeclarationListParser { parser };
+        let mut body_parser = CssStreamingDeclarationListParser {
+            parser,
+            direct_declarations: 0,
+        };
         for item in RuleBodyParser::new(input, &mut body_parser) {
             if let Err((error, _)) = item {
                 if first_error.get().is_none() { first_error.set(Some(error.location)); }
                 errors.set(errors.get() + 1);
             }
         }
+        body_parser.direct_declarations
     }
 
     fn parse_css_stream_rule_list<'i>(input: &mut Parser<'i, '_>, mut parser: CssStreamingParser) {

experiments/WebScene.NativeEngine.Probe/native/webscene_css_stylesheet_sink.h

@@ -3,10 +3,13 @@
 #include "webscene_css_matching.h"
 #include "webscene_css_transitions.h"
 
+#include <iterator>
+
 namespace webscene_native::css {
 // Host supplies rule/keyframe storage, media capability inventory and diagnostics.
-// This adapter preserves the existing runtime at-rule policy; it is not a full
-// implementation of supports, layers, containers or CSS nesting.
+// This adapter preserves the existing runtime at-rule policy. CSS nesting is
+// expanded before selector compilation; supports, layers, and containers remain
+// the bounded implementations documented below.
 template<typename Host>
 class stylesheet_sink final : public css_syntax_sink {
 public:
@@ -48,7 +51,16 @@ class stylesheet_sink final : public css_syntax_sink {
 
         if (kind == css_syntax_style_rule) {
             current.prelude = std::string(prelude);
-            current.children_active = false;
+            if (const auto* parent = nearest_style_frame(); parent != nullptr
+                && !parent->keyframes) {
+                current.prelude = combine_nested_selectors(
+                    parent->prelude, current.prelude);
+                owner_.record_feature(
+                    "css", "css-nesting", "supported",
+                    "qualified nested rules with implicit descendant, combinator, and ampersand expansion",
+                    "stylesheet-parser");
+            }
+            current.children_active = current.active;
             // Two declarations is the common generated-rule shape and
             // avoids the former IR's exact-size allocation without
             // over-reserving every small rule.
@@ -156,11 +168,33 @@ class stylesheet_sink final : public css_syntax_sink {
                     inherited_media.push_back(ancestor.media_query);
                 }
             }
-            owner_.append_parsed_css_style_rule(
-                std::move(current.prelude),
-                std::move(current.declarations),
-                inherited_media,
-                stylesheet_address_);
+            std::vector<completed_style_rule> completed;
+            completed.reserve(1U + current.nested_rules.size());
+            if (!current.declarations.empty()) {
+                completed.push_back({
+                    std::move(current.prelude),
+                    std::move(current.declarations),
+                    std::move(inherited_media)});
+            }
+            completed.insert(
+                completed.end(),
+                std::make_move_iterator(current.nested_rules.begin()),
+                std::make_move_iterator(current.nested_rules.end()));
+            if (auto* parent = nearest_style_frame(); parent != nullptr
+                && !parent->keyframes) {
+                parent->nested_rules.insert(
+                    parent->nested_rules.end(),
+                    std::make_move_iterator(completed.begin()),
+                    std::make_move_iterator(completed.end()));
+                return true;
+            }
+            for (auto& rule : completed) {
+                owner_.append_parsed_css_style_rule(
+                    std::move(rule.selector),
+                    std::move(rule.declarations),
+                    rule.media_queries,
+                    stylesheet_address_);
+            }
         } else if (current.keyframes) {
             completed_keyframes_.emplace_back(
                 std::move(current.prelude),
@@ -177,19 +211,128 @@ class stylesheet_sink final : public css_syntax_sink {
     }
 
 private:
+    struct completed_style_rule final {
+        std::string selector;
+        std::vector<css_declaration> declarations;
+        std::vector<std::string> media_queries;
+    };
+
     struct frame final {
         size_t rule_index{css_syntax_no_parent};
         uint32_t kind{css_syntax_style_rule};
         std::string prelude;
         std::string media_query;
         std::vector<css_declaration> declarations;
+        std::vector<completed_style_rule> nested_rules;
         css_opacity_keyframes keyframe_definition;
         size_t observed_declarations{0U};
         bool active{false};
         bool children_active{false};
         bool keyframes{false};
     };
 
+    frame* nearest_style_frame() noexcept
+    {
+        for (auto iterator = stack_.rbegin(); iterator != stack_.rend(); ++iterator) {
+            if (iterator->keyframes) return nullptr;
+            if (iterator->kind == css_syntax_style_rule) return &*iterator;
+        }
+        return nullptr;
+    }
+
+    const frame* nearest_style_frame() const noexcept
+    {
+        for (auto iterator = stack_.rbegin(); iterator != stack_.rend(); ++iterator) {
+            if (iterator->keyframes) return nullptr;
+            if (iterator->kind == css_syntax_style_rule) return &*iterator;
+        }
+        return nullptr;
+    }
+
+    static std::vector<std::string> split_selector_list(std::string_view value)
+    {
+        std::vector<std::string> result;
+        size_t start = 0U;
+        size_t parentheses = 0U;
+        size_t brackets = 0U;
+        char quote = '\0';
+        auto escaped = false;
+        for (size_t index = 0U; index <= value.size(); ++index) {
+            const auto character = index < value.size() ? value[index] : ',';
+            if (escaped) {
+                escaped = false;
+                continue;
+            }
+            if (character == '\\') {
+                escaped = true;
+                continue;
+            }
+            if (quote != '\0') {
+                if (character == quote) quote = '\0';
+                continue;
+            }
+            if (character == '\'' || character == '"') {
+                quote = character;
+                continue;
+            }
+            if (character == '(') ++parentheses;
+            else if (character == ')' && parentheses > 0U) --parentheses;
+            else if (character == '[') ++brackets;
+            else if (character == ']' && brackets > 0U) --brackets;
+            else if (character == ',' && parentheses == 0U && brackets == 0U) {
+                auto selector = trim_value(value.substr(start, index - start));
+                if (!selector.empty()) result.push_back(std::move(selector));
+                start = index + 1U;
+            }
+        }
+        return result;
+    }
+
+    static std::string replace_nesting_selector(
+        std::string child,
+        const std::string& parent)
+    {
+        size_t offset = 0U;
+        while ((offset = child.find('&', offset)) != std::string::npos) {
+            child.replace(offset, 1U, parent);
+            offset += parent.size();
+        }
+        return child;
+    }
+
+    static std::string combine_nested_selectors(
+        std::string_view parent,
+        std::string_view child)
+    {
+        const auto parents = split_selector_list(parent);
+        const auto children = split_selector_list(child);
+        if (parents.empty() || children.empty()) return {};
+        std::string parent_reference;
+        if (parents.size() == 1U) {
+            parent_reference = parents.front();
+        } else {
+            parent_reference = ":is(";
+            for (const auto& selector : parents) {
+                if (parent_reference.size() > 4U) parent_reference += ", ";
+                parent_reference += selector;
+            }
+            parent_reference += ')';
+        }
+        std::string result;
+        for (const auto& child_selector : children) {
+            if (!result.empty()) result += ", ";
+            if (child_selector.find('&') != std::string::npos) {
+                result += replace_nesting_selector(
+                    child_selector, parent_reference);
+            } else {
+                result += parent_reference;
+                result += ' ';
+                result += child_selector;
+            }
+        }
+        return result;
+    }
+
     Host& owner_;
     const std::string& stylesheet_address_;
     std::vector<frame> stack_;

experiments/WebScene.NativeEngine.Probe/tests/css_parser_tests.cpp

@@ -158,6 +158,31 @@ void direct_streaming_sink()
     require(parsed.metrics.parser_retained_bytes == 0U, "direct parser stream retains no Rust output");
 }
 
+void nested_style_rule_stream()
+{
+    const auto parsed = parse_css_syntax_stylesheet(R"CSS(
+        .modal, .panel {
+            position: fixed;
+            .resizable { position: absolute; }
+            &.wide { width: 80%; }
+            > .content { min-width: 0; }
+        }
+    )CSS");
+    require(static_cast<bool>(parsed), parsed.error);
+    require(parsed.metrics.parse_error_count == 0U,
+        "valid nested style rules have no syntax errors");
+    require(parsed.rules.size() == 4U,
+        "nested style rules are retained in the rule tree");
+    require(parsed.rules[1].parent_index == 0U
+        && parsed.rules[2].parent_index == 0U
+        && parsed.rules[3].parent_index == 0U,
+        "nested style rules point to their style-rule parent");
+    require(parsed.rules[0].declaration_count == 1U,
+        "the parent declaration is retained beside nested rules");
+    require(parsed.declarations.size() == 4U,
+        "nested declarations are emitted exactly once");
+}
+
 } // namespace
 
 int main()
@@ -166,6 +191,7 @@ int main()
     stylesheet_structure();
     invalid_utf8_is_rejected();
     direct_streaming_sink();
+    nested_style_rule_stream();
     std::cout << "CSS parser tests passed\n";
     return 0;
 }