diff --git a/CHANGELOG.md b/CHANGELOG.md index 342d276ddba..50866bfb160 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -102,6 +102,22 @@ } ``` +* Add support for the new [`@starting-style`](https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule) CSS rule ([#3249](https://github.com/evanw/esbuild/pull/3249)) + This at rule allow authors to start CSS transitions on first style update. That is, you can now make the transition take effect when the display property changes from none to block. + + ```css + /* Original code */ + @starting-style { + h1 { + background-color: transparent; + } + } + + /* Output */ + @starting-style{h1{background-color:transparent}} + ``` + + This was contributed by [@yisibl](https://github.com/yisibl). ## 0.18.14 * Implement local CSS names ([#20](https://github.com/evanw/esbuild/issues/20)) diff --git a/internal/css_parser/css_parser.go b/internal/css_parser/css_parser.go index 72cfb5ae4f2..6b5d150e227 100644 --- a/internal/css_parser/css_parser.go +++ b/internal/css_parser/css_parser.go @@ -985,6 +985,10 @@ var specialAtRules = map[string]atRuleKind{ // Container Queries // Reference: https://drafts.csswg.org/css-contain-3/#container-rule "container": atRuleInheritContext, + + // Defining before-change style: the @starting-style rule + // Reference: https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule + "starting-style": atRuleInheritContext, } var atKnownRuleCanBeRemovedIfEmpty = map[string]bool{ diff --git a/internal/css_parser/css_parser_test.go b/internal/css_parser/css_parser_test.go index ca2311a4bdf..d1d389888e5 100644 --- a/internal/css_parser/css_parser_test.go +++ b/internal/css_parser/css_parser_test.go @@ -1199,6 +1199,37 @@ func TestAtRule(t *testing.T) { } }`, "@supports (container-type: size){@container (width <= 150px){#inner{background-color:#87ceeb}}}") + // 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}}") + // https://drafts.csswg.org/css-counter-styles/#the-counter-style-rule expectPrinted(t, ` @counter-style box-corner {