From 5a5f926bbf22e055d323f34a7e974955cac17077 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=80=E4=B8=9D?= Date: Fri, 25 Mar 2022 19:18:20 +0800 Subject: [PATCH 1/3] feat: support @container --- CHANGELOG.md | 25 ++++++++++++++++++++-- internal/css_parser/css_parser.go | 4 ++++ internal/css_parser/css_parser_test.go | 29 ++++++++++++++++++++++++++ 3 files changed, 56 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4be5f45edfd..2e15423eeb4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,26 @@ # Changelog +## Unreleased + +* Add support for [`@container`](https://drafts.csswg.org/css-contain-3/#container-rule) at rule, this is the main syntax for CSS container queries. + + ```css + /* Original code */ + @supports ( container-type: size ) { + @container ( width <= 150px ) { + #inner { + background-color: skyblue; + } + } + } + + /* Old output (with --minify) */ + @supports (container-type: size){@container (width <= 150px){#inner {background-color: skyblue;}}} + + /* New output (with --minify) */ + @supports (container-type: size){@container (width <= 150px){#inner{background-color:#87ceeb}}} + ``` + ## 0.14.28 * 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)) @@ -294,7 +315,7 @@ * Remove simplified statement-level literal expressions ([#2063](https://github.com/evanw/esbuild/issues/2063)) - With this release, esbuild now removes simplified statement-level expressions if the simplified result is a literal expression even when minification is disabled. Previously this was only done when minification is enabled. This change was only made because some people are bothered by seeing top-level literal expressions. This change has no effect on code behavior. + With this release, esbuild now removes simplified statement-level expressions if the simplified result is a literal expression even when minification is disabled. Previously this was only done when minification is enabled. This change was only made because some people are bothered by seeing top-level literal expressions. This change has no effect on code behavior. * Ignore `.d.ts` rules in `paths` in `tsconfig.json` files ([#2074](https://github.com/evanw/esbuild/issues/2074), [#2075](https://github.com/evanw/esbuild/pull/2075)) @@ -5238,7 +5259,7 @@ In addition to the breaking changes above, the following features are also inclu * Fix some obscure TypeScript type parsing edge cases - In TypeScript, type parameters come after a type and are placed in angle brackets like `Foo`. However, certain built-in types do not accept type parameters including primitive types such as `number`. This means `if (x as number < 1) {}` is not a syntax error while `if (x as Foo < 1) {}` is a syntax error. This release changes TypeScript type parsing to allow type parameters in a more restricted set of situations, which should hopefully better resolve these type parsing ambiguities. + In TypeScript, type parameters come after a type and are placed in angle brackets like `Foo`. However, certain built-in types do not accept type parameters including primitive types such as `number`. This means `if (x as number < 1) {}` is not a syntax error while `if (x as Foo < 1) {}` is a syntax error. This release changes TypeScript type parsing to allow type parameters in a more restricted set of situations, which should hopefully better resolve these type parsing ambiguities. ## 0.10.2 diff --git a/internal/css_parser/css_parser.go b/internal/css_parser/css_parser.go index 0f8f75dc71a..2e0809dfbe1 100644 --- 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 index 73298bb6431..0df8641761d 100644 --- 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 { From 15ee32c45ca27102ba0b7c4aacd4b04ba9e9e477 Mon Sep 17 00:00:00 2001 From: Evan Wallace Date: Sun, 3 Apr 2022 22:19:09 -0400 Subject: [PATCH 2/3] update changelog --- CHANGELOG.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ef904eb56cf..0fe1d0c51db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -61,25 +61,27 @@ } ``` -* Add support for [`@container`](https://drafts.csswg.org/css-contain-3/#container-rule) at rule, this is the main syntax for CSS container queries. +* Add support for the new `@container` CSS rule ([#2127](https://github.com/evanw/esbuild/pull/2127)) + + This release adds support for [`@container`](https://drafts.csswg.org/css-contain-3/#container-rule) in CSS files. 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 */ - @supports ( container-type: size ) { - @container ( width <= 150px ) { - #inner { - background-color: skyblue; - } + @container (width <= 150px) { + #inner { + color: yellow; } } /* Old output (with --minify) */ - @supports (container-type: size){@container (width <= 150px){#inner {background-color: skyblue;}}} + @container (width <= 150px){#inner {color: yellow;}} /* New output (with --minify) */ - @supports (container-type: size){@container (width <= 150px){#inner{background-color:#87ceeb}}} + @container (width <= 150px){#inner{color:#ff0}} ``` + This was contributed by [@yisibl](https://github.com/yisibl). + ## 0.14.30 * Change the context of TypeScript parameter decorators ([#2147](https://github.com/evanw/esbuild/issues/2147)) From 16ed446c665b5333f36227d646a654496fc733a9 Mon Sep 17 00:00:00 2001 From: Evan Wallace Date: Sun, 3 Apr 2022 22:24:34 -0400 Subject: [PATCH 3/3] match formatting of surrounding tests --- internal/css_parser/css_parser_test.go | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/internal/css_parser/css_parser_test.go b/internal/css_parser/css_parser_test.go index b70abda3b81..2f201c2a089 100644 --- a/internal/css_parser/css_parser_test.go +++ b/internal/css_parser/css_parser_test.go @@ -883,16 +883,13 @@ func TestAtRule(t *testing.T) { } } `) - - expectPrintedMinify(t, `@container card ( inline-size > 30em ) and style( --responsive = true ) { + expectPrintedMinify(t, `@container card ( inline-size > 30em ) and style( --responsive = true ) { .foo { - color: skyblue; - } + 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 ) { + expectPrintedMangleMinify(t, `@supports ( container-type: size ) { + @container ( width <= 150px ) { #inner { background-color: skyblue; }