From 929a7c7b5168bd03dfa52010c7091af26845792c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E4=B8=9D?= <percyley@qq.com>
Date: Wed, 19 Jul 2023 21:40:41 +0800
Subject: [PATCH] feat: support CSS @starting-style rule

---
 CHANGELOG.md                           | 16 +++++++++++++
 internal/css_parser/css_parser.go      |  4 ++++
 internal/css_parser/css_parser_test.go | 31 ++++++++++++++++++++++++++
 3 files changed, 51 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index df68bf96d11..241c7f51544 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -96,6 +96,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 {