feat: support @container

evanw · Mar 25, 2022 · 1075d1a · 1075d1a
1 parent 517f77f
commit 1075d1a
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,19 +4,27 @@
 
 * Add support for some new CSS rules ([#2115](https://github.com/evanw/esbuild/issues/2115), [#2116](https://github.com/evanw/esbuild/issues/2116), [#2117](https://github.com/evanw/esbuild/issues/2117))
 
-    This release adds support for [`@font-palette-values`](https://drafts.csswg.org/css-fonts-4/#font-palette-values), [`@counter-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style), and [`@font-feature-values`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values). This means esbuild will now pretty-print and minify these rules better since it now better understands the internal structure of these rules:
+    This release adds support for [`@container`](https://drafts.csswg.org/css-contain-3/#container-rule), [`@counter-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style), [`@font-palette-values`](https://drafts.csswg.org/css-fonts-4/#font-palette-values) and [`@font-feature-values`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values). This means esbuild will now pretty-print and minify these rules better since it now better understands the internal structure of these rules:
 
     ```css
     /* Original code */
     @font-palette-values Foo { base-palette: 1; }
     @counter-style bar { symbols: b a r; }
-    @font-feature-values Bop { @styleset { test: 1; } }
+    @font-feature-values Bop { @styleset { sharp-terminals: 16 1; } }
+
+    @supports ( container-type: size ) {
+      @container ( width <= 150px ) {
+        #inner {
+          background-color: skyblue;
+        }
+      }
+    }
 
     /* Old output (with --minify) */
-    @font-palette-values Foo{base-palette: 1;}@counter-style bar{symbols: b a r;}@font-feature-values Bop{@styleset {test: 1;}}
+    @font-palette-values Foo{base-palette: 1;}@counter-style bar{symbols: b a r;}@font-feature-values Bop{@styleset {sharp-terminals: 16 1;}}@supports (container-type: size){@container (width <= 150px){#inner {background-color: skyblue;}}}
 
     /* New output (with --minify) */
-    @font-palette-values Foo{base-palette:1}@counter-style bar{symbols:b a r}@font-feature-values Bop{@styleset{test:1}}
+    @font-palette-values Foo{base-palette:1}@counter-style bar{symbols:b a r}@font-feature-values Bop{@styleset{sharp-terminals:16 1}}@supports (container-type: size){@container (width <= 150px){#inner{background-color:#87ceeb}}}
     ```
 
 * Upgrade to Go 1.18.0
@@ -3574,15 +3582,15 @@ In addition to the breaking changes above, the following features are also inclu
 
 * Minify the syntax `Infinity` to `1 / 0` ([#1385](https://github.com/evanw/esbuild/pull/1385))
 
-	The `--minify-syntax` flag (automatically enabled by `--minify`) will now minify the expression `Infinity` to `1 / 0`, which uses fewer bytes:
+  The `--minify-syntax` flag (automatically enabled by `--minify`) will now minify the expression `Infinity` to `1 / 0`, which uses fewer bytes:
 
-	```js
-	// Original code
-	const a = Infinity;
+  ```js
+  // Original code
+  const a = Infinity;
 
-	// Output with "--minify-syntax"
-	const a = 1 / 0;
-	```
+  // Output with "--minify-syntax"
+  const a = 1 / 0;
+  ```
 
     This change was contributed by [@Gusted](https://github.com/Gusted).
 

diff --git a/internal/css_parser/css_parser.go b/internal/css_parser/css_parser.go
@@ -700,6 +700,10 @@ var specialAtRules = map[string]atRuleKind{
 	"styleset":            atRuleDeclarations,
 	"stylistic":           atRuleDeclarations,
 	"swash":               atRuleDeclarations,
+
+	// Container Queries
+	// Reference: https://drafts.csswg.org/css-contain-3/#container-rule
+	"container": atRuleInheritContext,
 }
 
 type atRuleValidity uint8

diff --git a/internal/css_parser/css_parser_test.go b/internal/css_parser/css_parser_test.go
@@ -870,6 +870,35 @@ func TestAtRule(t *testing.T) {
 }
 `)
 
+	// https://drafts.csswg.org/css-contain-3/#container-rule
+	expectPrinted(t, `
+		@container my-layout (inline-size > 45em) {
+			.foo {
+				color: skyblue;
+			}
+		}
+	`, `@container my-layout (inline-size > 45em) {
+  .foo {
+    color: skyblue;
+  }
+}
+`)
+
+	expectPrintedMinify(t, `@container  card (  inline-size  >  30em  )   and   style(  --responsive   =   true  )  {
+	.foo {
+			color: skyblue;
+		}
+}`, "@container card (inline-size > 30em) and style(--responsive = true){.foo{color:skyblue}}")
+
+	// Nested @supports
+	expectPrintedMangleMinify(t, `@supports (  container-type: size  ) {
+	@container (  width  <=  150px  ) {
+		#inner {
+			background-color: skyblue;
+		}
+	}
+}`, "@supports (container-type: size){@container (width <= 150px){#inner{background-color:#87ceeb}}}")
+
 	// https://drafts.csswg.org/css-counter-styles/#the-counter-style-rule
 	expectPrinted(t, `
 		@counter-style box-corner {