update css nesting stuff to match the latest spec

Author: evanw

CHANGELOG.md

@@ -2,6 +2,34 @@
 
 ## Unreleased
 
+* Update esbuild's handling of CSS nesting to match the latest specification changes ([#1945](https://github.com/evanw/esbuild/issues/1945))
+
+    The syntax for the upcoming CSS nesting feature has [recently changed](https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/). The `@nest` prefix that was previously required in some cases is now gone, and nested rules no longer have to start with `&` (as long as they don't start with an identifier or function token).
+
+    This release updates esbuild's pass-through handling of CSS nesting syntax to match the latest specification changes. So you can now use esbuild to bundle CSS containing nested rules and try them out in a browser that supports CSS nesting (which includes nightly builds of both Chrome and Safari).
+
+    However, I'm not implementing lowering of nested CSS to non-nested CSS for older browsers yet. While the syntax has been decided, the semantics are still in flux. In particular, there is still some debate about changing the fundamental way that CSS nesting works. For example, you might think that the following CSS is equivalent to a `.outer .inner button { ... }` rule:
+
+    ```css
+    .inner button {
+      .outer & {
+        color: red;
+      }
+    }
+    ```
+
+    But instead it's actually equivalent to a `.outer :is(.inner button) { ... }` rule which unintuitively also matches the following DOM structure:
+
+    ```html
+    <div class="inner">
+      <div class="outer">
+        <button></button>
+      </div>
+    </div>
+    ```
+
+    The `:is()` behavior is preferred by browser implementers because it's more memory-efficient, but the straightforward translation into a `.outer .inner button { ... }` rule is preferred by developers used to the existing CSS preprocessing ecosystem (e.g. SASS). It seems premature to commit esbuild to specific semantics for this syntax at this time given the ongoing debate.
+
 * Fix cross-file CSS rule deduplication involving `url()` tokens ([#2936](https://github.com/evanw/esbuild/issues/2936))
 
     Previously cross-file CSS rule deduplication didn't handle `url()` tokens correctly. These tokens contain references to import paths which may be internal (i.e. in the bundle) or external (i.e. not in the bundle). When comparing two `url()` tokens for equality, the underlying import paths should be compared instead of their references. This release of esbuild fixes `url()` token comparisons. One side effect is that `@font-face` rules should now be deduplicated correctly across files:

internal/bundler_tests/bundler_css_test.go

@@ -700,18 +700,71 @@ func TestCSSExternalQueryAndHashMatchIssue1822(t *testing.T) {
 func TestCSSNestingOldBrowser(t *testing.T) {
 	css_suite.expectBundled(t, bundled{
 		files: map[string]string{
-			"/entry.css": `
-				a { &:hover { color: red; } }
-			`,
+			"/[email protected]":      `a { @layer base { color: red; } }`,
+			"/[email protected]":      `a { @media screen { color: red; } }`,
+			"/nested-ampersand.css":   `a { &, & { color: red; } }`,
+			"/nested-attribute.css":   `a { [href] { color: red; } }`,
+			"/nested-colon.css":       `a { :hover { color: red; } }`,
+			"/nested-dot.css":         `a { .cls { color: red; } }`,
+			"/nested-greaterthan.css": `a { > b { color: red; } }`,
+			"/nested-hash.css":        `a { #id { color: red; } }`,
+			"/nested-plus.css":        `a { + b { color: red; } }`,
+			"/nested-tilde.css":       `a { ~ b { color: red; } }`,
+
+			"/toplevel-ampersand.css":   `a { &, & { color: red; } }`,
+			"/toplevel-attribute.css":   `a { [href] { color: red; } }`,
+			"/toplevel-colon.css":       `a { :hover { color: red; } }`,
+			"/toplevel-dot.css":         `a { .cls { color: red; } }`,
+			"/toplevel-greaterthan.css": `a { > b { color: red; } }`,
+			"/toplevel-hash.css":        `a { #id { color: red; } }`,
+			"/toplevel-plus.css":        `a { + b { color: red; } }`,
+			"/toplevel-tilde.css":       `a { ~ b { color: red; } }`,
+		},
+		entryPaths: []string{
+			"/[email protected]",
+			"/[email protected]",
+			"/nested-ampersand.css",
+			"/nested-attribute.css",
+			"/nested-colon.css",
+			"/nested-dot.css",
+			"/nested-greaterthan.css",
+			"/nested-hash.css",
+			"/nested-plus.css",
+			"/nested-tilde.css",
+
+			"/toplevel-ampersand.css",
+			"/toplevel-attribute.css",
+			"/toplevel-colon.css",
+			"/toplevel-dot.css",
+			"/toplevel-greaterthan.css",
+			"/toplevel-hash.css",
+			"/toplevel-plus.css",
+			"/toplevel-tilde.css",
 		},
-		entryPaths: []string{"/entry.css"},
 		options: config.Options{
 			Mode:                   config.ModeBundle,
-			AbsOutputFile:          "/out.css",
+			AbsOutputDir:           "/out",
 			UnsupportedCSSFeatures: compat.Nesting,
 			OriginalTargetEnv:      "chrome10",
 		},
-		expectedScanLog: `entry.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+		expectedScanLog: `[email protected]: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+[email protected]: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+nested-ampersand.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+nested-attribute.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+nested-colon.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+nested-dot.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+nested-greaterthan.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+nested-hash.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+nested-plus.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+nested-tilde.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+toplevel-ampersand.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+toplevel-attribute.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+toplevel-colon.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+toplevel-dot.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+toplevel-greaterthan.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+toplevel-hash.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+toplevel-plus.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
+toplevel-tilde.css: WARNING: CSS nesting syntax is not supported in the configured target environment (chrome10)
 `,
 	})
 }
@@ -802,6 +855,5 @@ func TestDeduplicateRules(t *testing.T) {
 			AbsOutputDir: "/out",
 			MinifySyntax: true,
 		},
-		expectedScanLog: "no0.css: WARNING: CSS nesting syntax cannot be used outside of a style rule\n",
 	})
 }

internal/bundler_tests/snapshots/snapshots_css.txt

@@ -180,10 +180,148 @@ console.log(void 0);
 
 ================================================================================
 TestCSSNestingOldBrowser
----------- /out.css ----------
-/* entry.css */
+---------- /out/[email protected] ----------
+/* [email protected] */
+a {
+  @layer base {
+    color: red;
+  }
+}
+
+---------- /out/[email protected] ----------
+/* [email protected] */
+a {
+  @media screen {
+    color: red;
+  }
+}
+
+---------- /out/nested-ampersand.css ----------
+/* nested-ampersand.css */
+a {
+  &,
+  & {
+    color: red;
+  }
+}
+
+---------- /out/nested-attribute.css ----------
+/* nested-attribute.css */
+a {
+  [href] {
+    color: red;
+  }
+}
+
+---------- /out/nested-colon.css ----------
+/* nested-colon.css */
+a {
+  :hover {
+    color: red;
+  }
+}
+
+---------- /out/nested-dot.css ----------
+/* nested-dot.css */
+a {
+  .cls {
+    color: red;
+  }
+}
+
+---------- /out/nested-greaterthan.css ----------
+/* nested-greaterthan.css */
+a {
+  > b {
+    color: red;
+  }
+}
+
+---------- /out/nested-hash.css ----------
+/* nested-hash.css */
+a {
+  #id {
+    color: red;
+  }
+}
+
+---------- /out/nested-plus.css ----------
+/* nested-plus.css */
+a {
+  + b {
+    color: red;
+  }
+}
+
+---------- /out/nested-tilde.css ----------
+/* nested-tilde.css */
+a {
+  ~ b {
+    color: red;
+  }
+}
+
+---------- /out/toplevel-ampersand.css ----------
+/* toplevel-ampersand.css */
+a {
+  &,
+  & {
+    color: red;
+  }
+}
+
+---------- /out/toplevel-attribute.css ----------
+/* toplevel-attribute.css */
+a {
+  [href] {
+    color: red;
+  }
+}
+
+---------- /out/toplevel-colon.css ----------
+/* toplevel-colon.css */
+a {
+  :hover {
+    color: red;
+  }
+}
+
+---------- /out/toplevel-dot.css ----------
+/* toplevel-dot.css */
+a {
+  .cls {
+    color: red;
+  }
+}
+
+---------- /out/toplevel-greaterthan.css ----------
+/* toplevel-greaterthan.css */
+a {
+  > b {
+    color: red;
+  }
+}
+
+---------- /out/toplevel-hash.css ----------
+/* toplevel-hash.css */
+a {
+  #id {
+    color: red;
+  }
+}
+
+---------- /out/toplevel-plus.css ----------
+/* toplevel-plus.css */
+a {
+  + b {
+    color: red;
+  }
+}
+
+---------- /out/toplevel-tilde.css ----------
+/* toplevel-tilde.css */
 a {
-  &:hover {
+  ~ b {
     color: red;
   }
 }

internal/css_ast/css_ast.go

@@ -437,12 +437,11 @@ func (r *RUnknownAt) Hash() (uint32, bool) {
 type RSelector struct {
 	Selectors []ComplexSelector
 	Rules     []Rule
-	HasAtNest bool
 }
 
 func (a *RSelector) Equal(rule R, check *CrossFileEqualityCheck) bool {
 	b, ok := rule.(*RSelector)
-	if ok && len(a.Selectors) == len(b.Selectors) && a.HasAtNest == b.HasAtNest {
+	if ok && len(a.Selectors) == len(b.Selectors) {
 		for i, ai := range a.Selectors {
 			if !ai.Equal(b.Selectors[i], check) {
 				return false
@@ -606,7 +605,7 @@ func (a ComplexSelector) Equal(b ComplexSelector, check *CrossFileEqualityCheck)
 
 	for i, ai := range a.Selectors {
 		bi := b.Selectors[i]
-		if ai.NestingSelector != bi.NestingSelector || ai.Combinator != bi.Combinator {
+		if ai.HasNestingSelector != bi.HasNestingSelector || ai.Combinator != bi.Combinator {
 			return false
 		}
 
@@ -629,19 +628,11 @@ func (a ComplexSelector) Equal(b ComplexSelector, check *CrossFileEqualityCheck)
 	return true
 }
 
-type NestingSelector uint8
-
-const (
-	NestingSelectorNone                NestingSelector = iota
-	NestingSelectorPrefix                              // "&a {}"
-	NestingSelectorPresentButNotPrefix                 // "a& {}"
-)
-
 type CompoundSelector struct {
-	Combinator        string // Optional, may be ""
-	TypeSelector      *NamespacedName
-	SubclassSelectors []SS
-	NestingSelector   NestingSelector // "&"
+	Combinator         string // Optional, may be ""
+	TypeSelector       *NamespacedName
+	SubclassSelectors  []SS
+	HasNestingSelector bool // "&"
 }
 
 type NameToken struct {