Merge pull request #1972 from lightpanda-io/fix-issue-1970

Fix Expo Web crash by gracefully handling at-rules in CSSStyleSheet.insertRule

src/browser/css/Parser.zig

@@ -306,6 +306,7 @@ pub fn parseStylesheet(input: []const u8) RulesIterator {
 pub const RulesIterator = struct {
     input: []const u8,
     stream: TokenStream,
+    has_skipped_at_rule: bool = false,
 
     pub fn init(input: []const u8) RulesIterator {
         return .{
@@ -358,6 +359,7 @@ pub const RulesIterator = struct {
             }
 
             if (peeked.token == .at_keyword) {
+                self.has_skipped_at_rule = true;
                 self.skipAtRule();
                 selector_start = null;
                 selector_end = null;

src/browser/tests/css/stylesheet.html

@@ -480,6 +480,24 @@
 }
 </script>
 
+<script id="CSSStyleSheet_insertRule_multiple_rules">
+{
+    const style = document.createElement('style');
+    document.head.appendChild(style);
+    const sheet = style.sheet;
+
+    let caught = false;
+    try {
+        sheet.insertRule('a { color: red; } b { color: blue; }');
+    } catch (e) {
+        caught = true;
+        testing.expectEqual('SyntaxError', e.name);
+    }
+    testing.expectTrue(caught);
+    testing.expectEqual(0, sheet.cssRules.length);
+}
+</script>
+
 <script id="CSSStyleSheet_replaceSync">
 {
     const sheet = new CSSStyleSheet();

src/browser/webapi/css/CSSStyleSheet.zig

@@ -1,4 +1,5 @@
 const std = @import("std");
+const log = @import("../../../log.zig");
 const js = @import("../../js/js.zig");
 const Page = @import("../../Page.zig");
 const Element = @import("../Element.zig");
@@ -75,7 +76,19 @@ pub fn getOwnerRule(self: *const CSSStyleSheet) ?*CSSRule {
 pub fn insertRule(self: *CSSStyleSheet, rule: []const u8, maybe_index: ?u32, page: *Page) !u32 {
     const index = maybe_index orelse 0;
     var it = Parser.parseStylesheet(rule);
-    const parsed_rule = it.next() orelse return error.SyntaxError;
+    const parsed_rule = it.next() orelse {
+        if (it.has_skipped_at_rule) {
+            log.debug(.not_implemented, "CSSStyleSheet.insertRule", .{});
+            // Lightpanda currently skips at-rules (e.g., @keyframes, @media) in its
+            // CSS parser. To prevent JS apps (like Expo/Reanimated) from crashing
+            // during initialization, we simulate a successful insertion by returning
+            // the requested index.
+            return index;
+        }
+        return error.SyntaxError;
+    };
+
+    if (it.next() != null) return error.SyntaxError;
 
     const style_rule = try CSSStyleRule.init(page);
     try style_rule.setSelectorText(parsed_rule.selector, page);