Support CSS @starting-style rule (#866)

* Support CSS `@starting-style` rule From: evanw/esbuild#3249 * More tests for `@starting-style` * Add changeset
withastro · Sep 19, 2023 · 7579d7c · 7579d7c
1 parent 2169e80
commit 7579d7c
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 0 deletions.
diff --git a/.changeset/giant-chicken-arrive.md b/.changeset/giant-chicken-arrive.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': minor
+---
+
+Support CSS `@starting-style` rule (From: https://github.com/evanw/esbuild/pull/3249)
diff --git a/internal/transform/scope-css_test.go b/internal/transform/scope-css_test.go
@@ -269,6 +269,11 @@ func TestScopeStyle(t *testing.T) {
 			source: "@layer theme, layout, utilities; @layer special { .item { color: rebeccapurple; }}",
 			want:   "@layer theme,layout,utilities;@layer special{.item:where(.astro-xxxxxx){color:rebeccapurple}}",
 		},
+		{
+			name:   "@starting-style",
+			source: "@starting-style{.class{}}",
+			want:   "@starting-style{.class:where(.astro-xxxxxx){}}",
+		},
 	}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {

diff --git a/lib/esbuild/css_parser/css_parser.go b/lib/esbuild/css_parser/css_parser.go
@@ -682,6 +682,9 @@ var specialAtRules = map[string]atRuleKind{
 	// Reference: https://github.com/w3c/csswg-drafts/issues?q=is%3Aissue+label%3Acss-contain-3+
 	"container": atRuleInheritContext,
 
+	// Reference: https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule
+	"starting-style": atRuleInheritContext,
+
 	// Reference: https://drafts.csswg.org/css-nesting-1/
 	"nest": atRuleDeclarations,
 }

diff --git a/lib/esbuild/css_parser/css_parser_test.go b/lib/esbuild/css_parser/css_parser_test.go
@@ -868,6 +868,36 @@ func TestAtCharset(t *testing.T) {
 	expectParseError(t, "@charset url(\"UTF-8\");", "<stdin>: WARNING: Expected string token but found \"url(\"\n")
 	expectParseError(t, "@charset \"UTF-8\" ", "<stdin>: WARNING: Expected \";\" but found whitespace\n")
 	expectParseError(t, "@charset \"UTF-8\"{}", "<stdin>: WARNING: Expected \";\" but found \"{\"\n")
+
+	// https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule
+	expectPrinted(t, `
+	@starting-style {
+		h1 {
+			background-color: transparent;
+		}
+		@layer foo {
+			div {
+				height: 100px;
+			}
+		}
+	}
+	`, `@starting-style {
+  h1 {
+    background-color: transparent;
+  }
+  @layer foo {
+    div {
+      height: 100px;
+    }
+  }
+}
+`)
+
+	expectPrintedMinify(t, `@starting-style {
+	h1 {
+		background-color: transparent;
+	}
+}`, "@starting-style{h1{background-color:transparent}}")
 }
 
 func TestAtImport(t *testing.T) {

diff --git a/lib/esbuild/css_printer/css_printer_test.go b/lib/esbuild/css_printer/css_printer_test.go
@@ -356,6 +356,13 @@ func TestAtPage(t *testing.T) {
 	expectPrintedMinify(t, "@page :first { margin: 1cm }", "@page :first{margin:1cm}")
 }
 
+func TestAtStartingStyle(t *testing.T) {
+	expectPrinted(t, "@starting-style { div { color: red } }", "@starting-style {\n  div {\n    color: red;\n  }\n}\n")
+	expectPrinted(t, "@starting-style{div{color:red}}", "@starting-style {\n  div {\n    color: red;\n  }\n}\n")
+	expectPrintedMinify(t, "@starting-style { div { color: red } }", "@starting-style{div{color:red}}")
+	expectPrintedMinify(t, "@starting-style{div{color:red}}", "@starting-style{div{color:red}}")
+}
+
 func TestMsGridColumnsWhitespace(t *testing.T) {
 	// Must not insert a space between the "]" and the "("
 	expectPrinted(t, "div { -ms-grid-columns: (1fr)[3] }", "div {\n  -ms-grid-columns: (1fr)[3];\n}\n")