fix #4114: add a limit to css nesting expansion

Author: evanw

CHANGELOG.md

@@ -52,6 +52,28 @@
 
     Some libraries have many files and also use the same legal comment text in all files. Previously esbuild would copy each legal comment to the output file. Starting with this release, legal comments duplicated across separate files will now be grouped in the output file by unique comment content.
 
+* Add a limit to CSS nesting expansion ([#4114](https://github.com/evanw/esbuild/issues/4114))
+
+    With this release, esbuild will now fail with an error if there is too much CSS nesting expansion. This can happen when nested CSS is converted to CSS without nesting for older browsers as expanding CSS nesting is inherently exponential due to the resulting combinatorial explosion. The expansion limit is currently hard-coded and cannot be changed, but is extremely unlikely to trigger for real code. It exists to prevent esbuild from using too much time and/or memory. Here's an example:
+
+    ```css
+    a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{color:red}}}}}}}}}}}}}}}}}}}}
+    ```
+
+    Previously, transforming this file with `--target=safari1` took 5 seconds and generated 40mb of CSS. Trying to do that will now generate the following error instead:
+
+    ```
+    ✘ [ERROR] CSS nesting is causing too much expansion
+
+        example.css:1:60:
+          1 │ a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{color:red}}}}}}}}}}}}}}}}}}}}
+            ╵                                                             ^
+
+      CSS nesting expansion was terminated because a rule was generated with 65536 selectors. This limit
+      exists to prevent esbuild from using too much time and/or memory. Please change your CSS to use
+      fewer levels of nesting.
+    ```
+
 * Fix path resolution edge case ([#4144](https://github.com/evanw/esbuild/issues/4144))
 
     This fixes an edge case where esbuild's path resolution algorithm could deviate from node's path resolution algorithm. It involves a confusing situation where a directory shares the same file name as a file (but without the file extension). See the linked issue for specific details. This appears to be a case where esbuild is correctly following [node's published resolution algorithm](https://nodejs.org/api/modules.html#all-together) but where node itself is doing something different. Specifically the step `LOAD_AS_FILE` appears to be skipped when the input ends with `..`. This release changes esbuild's behavior for this edge case to match node's behavior.

internal/css_parser/css_nesting.go

@@ -41,7 +41,7 @@ func (p *parser) lowerNestingInRule(rule css_ast.Rule, results []css_ast.Rule) [
 			// Filter out pseudo elements because they are ignored by nested style
 			// rules. This is because pseudo-elements are not valid within :is():
 			// https://www.w3.org/TR/selectors-4/#matches-pseudo. This restriction
-			// may be relaxed in the future, but this restriction hash shipped so
+			// may be relaxed in the future, but this restriction has shipped so
 			// we're stuck with it: https://github.com/w3c/csswg-drafts/issues/7433.
 			//
 			// Note: This is only for the parent selector list that is used to
@@ -109,6 +109,8 @@ type lowerNestingContext struct {
 func (p *parser) lowerNestingInRuleWithContext(rule css_ast.Rule, context *lowerNestingContext) css_ast.Rule {
 	switch r := rule.Data.(type) {
 	case *css_ast.RSelector:
+		oldSelectorsLen := len(r.Selectors)
+
 		// "a { & b {} }" => "a b {}"
 		// "a { &b {} }" => "a:is(b) {}"
 		// "a { &:hover {} }" => "a:hover {}"
@@ -227,6 +229,16 @@ func (p *parser) lowerNestingInRuleWithContext(rule css_ast.Rule, context *lower
 			r.Selectors = selectors
 		}
 
+		// Put limits on the combinatorial explosion to avoid using too much time
+		// and/or memory.
+		if n := len(r.Selectors); n > oldSelectorsLen && n > 0xFFFF {
+			p.log.AddErrorWithNotes(&p.tracker, logger.Range{Loc: rule.Loc}, "CSS nesting is causing too much expansion",
+				[]logger.MsgData{{Text: fmt.Sprintf("CSS nesting expansion was terminated because a rule was generated with %d selectors. "+
+					"This limit exists to prevent esbuild from using too much time and/or memory. "+
+					"Please change your CSS to use fewer levels of nesting.", n)}})
+			return css_ast.Rule{}
+		}
+
 		// Lower all child rules using our newly substituted selector
 		context.loweredRules = p.lowerNestingInRule(rule, context.loweredRules)
 		return css_ast.Rule{}

scripts/js-api-tests.js

@@ -5963,6 +5963,17 @@ class Foo {
     assert.strictEqual(code, `div{color:#abcd}\n`)
   },
 
+  async cssNestingExpansionLimit({ esbuild }) {
+    const css = `a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{a,b{color:red}}}}}}}}}}}}}}}}}}}}`
+    try {
+      await esbuild.transform(css, { loader: 'css', target: 'safari1' })
+      throw new Error('Expected a transform failure')
+    } catch (e) {
+      assert.strictEqual(e.errors.length, 1)
+      assert.strictEqual(e.errors[0].text, 'CSS nesting is causing too much expansion')
+    }
+  },
+
   async cjs_require({ esbuild }) {
     const { code } = await esbuild.transform(`const {foo} = require('path')`, {})
     assert.strictEqual(code, `const { foo } = require("path");\n`)