diff --git a/.changeset/giant-chicken-arrive.md b/.changeset/giant-chicken-arrive.md new file mode 100644 index 000000000..16d13114e --- /dev/null +++ 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 index 7ad6c93ae..9510b841b 100644 --- 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 index 7c86497fe..401b20027 100644 --- 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 index 2df47754e..5246c9b2d 100644 --- 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\");", ": WARNING: Expected string token but found \"url(\"\n") expectParseError(t, "@charset \"UTF-8\" ", ": WARNING: Expected \";\" but found whitespace\n") expectParseError(t, "@charset \"UTF-8\"{}", ": 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 index 30c10c51e..92800c5da 100644 --- 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")