.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Set up Go 1.x
         uses: actions/setup-go@v3
         with:
-          go-version: 1.20.3
+          go-version: 1.20.4
         id: go
 
       - name: Setup Node.js environment
@@ -50,7 +50,7 @@ jobs:
       - name: Set up Go 1.x
         uses: actions/setup-go@v3
         with:
-          go-version: 1.20.3
+          go-version: 1.20.4
         id: go
 
       - name: Setup Node.js environment

.github/workflows/validate.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Set up Go 1.x
         uses: actions/setup-go@v3
         with:
-          go-version: 1.20.3
+          go-version: 1.20.4
         id: go
 
       - name: Validation checks

CHANGELOG.md

@@ -1,5 +1,84 @@
 # Changelog
 
+## 0.17.19
+
+* Fix CSS transform bugs with nested selectors that start with a combinator ([#3096](https://github.com/evanw/esbuild/issues/3096))
+
+    This release fixes several bugs regarding transforming nested CSS into non-nested CSS for older browsers. The bugs were due to lack of test coverage for nested selectors with more than one compound selector where they all start with the same combinator. Here's what some problematic cases look like before and after these fixes:
+
+    ```css
+    /* Original code */
+    .foo {
+      > &a,
+      > &b {
+        color: red;
+      }
+    }
+    .bar {
+      > &a,
+      + &b {
+        color: green;
+      }
+    }
+
+    /* Old output (with --target=chrome90) */
+    .foo :is(> .fooa, > .foob) {
+      color: red;
+    }
+    .bar :is(> .bara, + .barb) {
+      color: green;
+    }
+
+    /* New output (with --target=chrome90) */
+    .foo > :is(a.foo, b.foo) {
+      color: red;
+    }
+    .bar > a.bar,
+    .bar + b.bar {
+      color: green;
+    }
+    ```
+
+* Fix bug with TypeScript parsing of instantiation expressions followed by `=` ([#3111](https://github.com/evanw/esbuild/issues/3111))
+
+    This release fixes esbuild's TypeScript-to-JavaScript conversion code in the case where a potential instantiation expression is followed immediately by a `=` token (such that the trailing `>` becomes a `>=` token). Previously esbuild considered that to still be an instantiation expression, but the official TypeScript compiler considered it to be a `>=` operator instead. This release changes esbuild's interpretation to match TypeScript. This edge case currently [appears to be problematic](https://sucrase.io/#transforms=typescript&compareWithTypeScript=true&code=x%3Cy%3E%3Da%3Cb%3Cc%3E%3E()) for other TypeScript-to-JavaScript converters as well:
+
+    | Original code | TypeScript | esbuild 0.17.18 | esbuild 0.17.19 | Sucrase | Babel |
+    |---|---|---|---|---|---|
+    | `x<y>=a<b<c>>()` | `x<y>=a();` | `x=a();` | `x<y>=a();` | `x=a()` | Invalid left-hand side in assignment expression |
+
+* Avoid removing unrecognized directives from the directive prologue when minifying ([#3115](https://github.com/evanw/esbuild/issues/3115))
+
+    The [directive prologue](https://262.ecma-international.org/6.0/#sec-directive-prologues-and-the-use-strict-directive) in JavaScript is a sequence of top-level string expressions that come before your code. The only directives that JavaScript engines currently recognize are `use strict` and sometimes `use asm`. However, the people behind React have made up their own directive for their own custom dialect of JavaScript. Previously esbuild only preserved the `use strict` directive when minifying, although you could still write React JavaScript with esbuild using something like `--banner:js="'your directive here';"`. With this release, you can now put arbitrary directives in the entry point and esbuild will preserve them in its minified output:
+
+    ```js
+    // Original code
+    'use wtf'; console.log(123)
+
+    // Old output (with --minify)
+    console.log(123);
+
+    // New output (with --minify)
+    "use wtf";console.log(123);
+    ```
+
+    Note that this means esbuild will no longer remove certain stray top-level strings when minifying. This behavior is an intentional change because these stray top-level strings are actually part of the directive prologue, and could potentially have semantics assigned to them (as was the case with React).
+
+* Improved minification of binary shift operators
+
+    With this release, esbuild's minifier will now evaluate the `<<` and `>>>` operators if the resulting code would be shorter:
+
+    ```js
+    // Original code
+    console.log(10 << 10, 10 << 20, -123 >>> 5, -123 >>> 10);
+
+    // Old output (with --minify)
+    console.log(10<<10,10<<20,-123>>>5,-123>>>10);
+
+    // New output (with --minify)
+    console.log(10240,10<<20,-123>>>5,4194303);
+    ```
+
 ## 0.17.18
 
 * Fix non-default JSON import error with `export {} from` ([#3070](https://github.com/evanw/esbuild/issues/3070))

Makefile

@@ -20,7 +20,7 @@ test-all:
 	@$(MAKE) --no-print-directory -j6 test-common test-deno ts-type-tests test-wasm-node test-wasm-browser lib-typecheck test-yarnpnp
 
 check-go-version:
-	@go version | grep ' go1\.20\.3 ' || (echo 'Please install Go version 1.20.3' && false)
+	@go version | grep ' go1\.20\.4 ' || (echo 'Please install Go version 1.20.4' && false)
 
 # Note: Don't add "-race" here by default. The Go race detector is currently
 # only supported on the following configurations:

cmd/esbuild/version.go

@@ -1,3 +1,3 @@
 package main
 
-const esbuildVersion = "0.17.18"
+const esbuildVersion = "0.17.19"

internal/bundler_tests/bundler_dce_test.go

@@ -3645,3 +3645,105 @@ func TestTreeShakingJSWithAssociatedCSSUnusedNestedImportSideEffectsFalseOnlyJS(
 		},
 	})
 }
+
+func TestPreserveDirectivesMinifyPassThrough(t *testing.T) {
+	dce_suite.expectBundled(t, bundled{
+		files: map[string]string{
+			"/entry.js": `
+				//! 1
+				'use 1'
+				//! 2
+				'use 2'
+				//! 3
+				'use 3'
+				entry()
+				//! 4
+				'use 4'
+				//! 5
+				'use 5'
+				//! 6
+				'use 6'
+			`,
+		},
+		entryPaths: []string{"/entry.js"},
+		options: config.Options{
+			Mode:          config.ModePassThrough,
+			AbsOutputFile: "/out.js",
+			MinifySyntax:  true,
+		},
+	})
+}
+
+func TestPreserveDirectivesMinifyIIFE(t *testing.T) {
+	dce_suite.expectBundled(t, bundled{
+		files: map[string]string{
+			"/entry.js": `
+				//! 1
+				'use 1'
+				//! 2
+				'use 2'
+				//! 3
+				'use 3'
+				entry()
+				//! 4
+				'use 4'
+				//! 5
+				'use 5'
+				//! 6
+				'use 6'
+			`,
+		},
+		entryPaths: []string{"/entry.js"},
+		options: config.Options{
+			Mode:          config.ModeConvertFormat,
+			OutputFormat:  config.FormatIIFE,
+			AbsOutputFile: "/out.js",
+			MinifySyntax:  true,
+		},
+	})
+}
+
+func TestPreserveDirectivesMinifyBundle(t *testing.T) {
+	dce_suite.expectBundled(t, bundled{
+		files: map[string]string{
+			"/entry.js": `
+				//! 1
+				'use 1'
+				//! 2
+				'use 2'
+				//! 3
+				'use 3'
+				entry()
+				//! 4
+				'use 4'
+				//! 5
+				'use 5'
+				//! 6
+				'use 6'
+				import "./nested.js"
+			`,
+			"/nested.js": `
+				//! A
+				'use A'
+				//! B
+				'use B'
+				//! C
+				'use C'
+				nested()
+				//! D
+				'use D'
+				//! E
+				'use E'
+				//! F
+				'use F'
+			`,
+		},
+		entryPaths: []string{"/entry.js"},
+		options: config.Options{
+			Mode:          config.ModeBundle,
+			OutputFormat:  config.FormatIIFE,
+			AbsOutputFile: "/out.js",
+			MinifySyntax:  true,
+		},
+	})
+}

internal/bundler_tests/snapshots/snapshots_dce.txt

@@ -197,6 +197,7 @@ var ns;
 
 ---------- /out/directive-before.js ----------
 function nested() {
+  "directive";
   x = [1, 1];
 }
 
@@ -276,9 +277,9 @@ console.log([
   3 /* a */ === 6 /* b */,
   3 /* a */ !== 6 /* b */
 ], [
-  6 /* b */ << 1,
+  12,
   3,
-  6 /* b */ >>> 1
+  3
 ], [
   2,
   7,
@@ -314,9 +315,9 @@ console.log([
   3 === 6,
   3 !== 6
 ], [
-  6 << 1,
+  12,
   3,
-  6 >>> 1
+  3
 ], [
   2,
   7,
@@ -1505,6 +1506,62 @@ console.log("hello");
 // Users/user/project/src/entry.js
 console.log("unused import");
 
+================================================================================
+TestPreserveDirectivesMinifyBundle
+---------- /out.js ----------
+"use 1";
+"use 2";
+"use 3";
+(() => {
+  // nested.js
+  //! A
+  //! B
+  //! C
+  nested();
+  //! D
+  //! E
+  //! F
+
+  // entry.js
+  //! 1
+  //! 2
+  //! 3
+  entry();
+  //! 4
+  //! 5
+  //! 6
+})();
+
+================================================================================
+TestPreserveDirectivesMinifyIIFE
+---------- /out.js ----------
+"use 1";
+"use 2";
+"use 3";
+(() => {
+  //! 1
+  //! 2
+  //! 3
+  entry();
+  //! 4
+  //! 5
+  //! 6
+})();
+
+================================================================================
+TestPreserveDirectivesMinifyPassThrough
+---------- /out.js ----------
+"use 1";
+"use 2";
+"use 3";
+//! 1
+//! 2
+//! 3
+entry();
+//! 4
+//! 5
+//! 6
+
 ================================================================================
 TestPureCallsWithSpread
 ---------- /out.js ----------

internal/bundler_tests/snapshots/snapshots_default.txt

@@ -5896,7 +5896,7 @@ TestUseStrictDirectiveBundleIssue1837
 ================================================================================
 TestUseStrictDirectiveMinifyNoBundle
 ---------- /out.js ----------
-"use strict";a,b;
+"use strict";"use loose";a,b;
 
 ================================================================================
 TestVarRelocatingBundle

internal/css_ast/css_ast.go

@@ -598,11 +598,14 @@ type ComplexSelector struct {
 	Selectors []CompoundSelector
 }
 
-func (s ComplexSelector) AppendToTokens(tokens []Token) []Token {
+func (s ComplexSelector) AppendToTokensWithoutLeadingCombinator(tokens []Token) []Token {
 	for i, sel := range s.Selectors {
 		if n := len(tokens); i > 0 && n > 0 {
 			tokens[n-1].Whitespace |= WhitespaceAfter
 		}
+		if i == 0 {
+			sel.Combinator = 0
+		}
 		tokens = sel.AppendToTokens(tokens)
 	}
 	return tokens
@@ -714,14 +717,16 @@ func (sel CompoundSelector) AppendToTokens(tokens []Token) []Token {
 		}
 	}
 
-	if sel.HasNestingSelector {
-		tokens = append(tokens, Token{Kind: css_lexer.TDelimAmpersand, Text: "&"})
-	}
-
 	if sel.TypeSelector != nil {
 		tokens = sel.TypeSelector.AppendToTokens(tokens)
 	}
 
+	// Put this after the type selector in case it's substituted for ":is()"
+	// ".foo { > &a, > &b {} }" => ".foo > :is(b.foo, c.foo) {}" (we don't want to get ".foo > :is(.foob, .fooc) {}" instead)
+	if sel.HasNestingSelector {
+		tokens = append(tokens, Token{Kind: css_lexer.TDelimAmpersand, Text: "&"})
+	}
+
 	for _, ss := range sel.SubclassSelectors {
 		tokens = ss.AppendToTokens(tokens)
 	}