From 6e61048dfdcb09f67eefeaeff2ce0d9af4032a74 Mon Sep 17 00:00:00 2001
From: Jan Nicklas <j.nicklas@me.com>
Date: Tue, 11 Jun 2024 10:16:45 +0200
Subject: [PATCH] Feature/nested starting style (#4)

---
 .changeset/brown-onions-relate.md |  5 +++
 lib/parse.js                      |  3 +-
 spec/parse.spec.js                | 74 +++++++++++++++++++++++++++++++
 3 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/brown-onions-relate.md

diff --git a/.changeset/brown-onions-relate.md b/.changeset/brown-onions-relate.md
new file mode 100644
index 0000000..d5ddc3d
--- /dev/null
+++ b/.changeset/brown-onions-relate.md
@@ -0,0 +1,5 @@
+---
+"rrweb-cssom": patch
+---
+
+fix parsing errors for nested starting-style rules
diff --git a/lib/parse.js b/lib/parse.js
index 575d96f..dfade12 100644
--- a/lib/parse.js
+++ b/lib/parse.js
@@ -181,7 +181,7 @@ CSSOM.parse = function parse(token) {
 				break;
 			} else if (token.indexOf("@starting-style", i) === i) {
 				state = "startingStyleRule-begin";
-				i += "startingStyle".length;
+				i += "starting-style".length;
 				startingStyleRule = new CSSOM.CSSStartingStyleRule();
 				startingStyleRule.__starts = i;
 				buffer = "";
@@ -430,6 +430,7 @@ CSSOM.parse = function parse(token) {
 							parentRule.constructor.name === "CSSMediaRule"
 							|| parentRule.constructor.name === "CSSSupportsRule"
 							|| parentRule.constructor.name === "CSSContainerRule"
+							|| parentRule.constructor.name === "CSSStartingStyleRule"
 						) {
 							prevScope = currentScope;
 							currentScope = parentRule;
diff --git a/spec/parse.spec.js b/spec/parse.spec.js
index c851c6f..9691316 100644
--- a/spec/parse.spec.js
+++ b/spec/parse.spec.js
@@ -999,6 +999,80 @@ var TESTS = [
 			return result;
 		})()
 	},
+	{
+		input: "@starting-style { @media screen { body { background: red; } } }",
+		result: (function() {
+			var result = {
+				cssRules: [
+				{
+					cssRules: {
+						0: {
+							cssRules: {
+								0: {
+									parentRule: "../..",
+									parentStyleSheet: "../../../../../..",
+									selectorText: "body",
+									style: {
+										0: "background",
+										length: 1,
+										parentRule: "..",
+										background: "red",
+									},
+								},
+							},
+							parentRule: null,
+							media: {
+								0: "screen",
+								length: 1
+							}
+						},
+					},
+					parentRule: null,
+				},
+				],
+				parentStyleSheet: null,
+			};
+			result.cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[0].parentStyleSheet = result;
+			return result;
+		})()
+	},
+	{
+		input: "@media screen { @starting-style { body { background: red; } } }",
+		result: (function() {
+			var result = {
+				cssRules: [
+				{
+					cssRules: {
+					0: {
+						cssRules: {
+							0: {
+								parentRule: "../..",
+								parentStyleSheet: "../../../../../..",
+								selectorText: "body",
+								style: {
+									0: "background",
+									length: 1,
+									parentRule: "..",
+									background: "red",
+								},
+							},
+						},
+						parentRule: null,
+					},
+				},
+            parentRule: null,
+			media: {
+				0: "screen",
+				length: 1
+			}
+          },
+        ],
+        parentStyleSheet: null,
+      };
+			result.cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[0].parentStyleSheet = result;
+			return result;
+		})()
+	},
 	{
 		// Non-vendor prefixed @keyframes rule, from Twitter Bootstrap (progress-bars):
 		input: '@keyframes progress-bar-stripes {\n  from  { background-position: 0 0; }\n  to    { background-position: 40px 0; }\n}',