fix js target affecting css

evanw · Mar 9, 2021 · 07cceea · 07cceea
1 parent ba90d1b
commit 07cceea
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/internal/compat/css_table.go b/internal/compat/css_table.go
@@ -48,6 +48,10 @@ var cssTable = map[CSSFeature]map[Engine][]int{
 func UnsupportedCSSFeatures(constraints map[Engine][]int) (unsupported CSSFeature) {
 	for feature, engines := range cssTable {
 		for engine, version := range constraints {
+			if engine == ES || engine == Node {
+				// Specifying "--target=es2020" shouldn't affect CSS
+				continue
+			}
 			if minVersion, ok := engines[engine]; !ok || isVersionLessThan(version, minVersion) {
 				unsupported |= feature
 			}

diff --git a/scripts/js-api-tests.js b/scripts/js-api-tests.js
@@ -2741,6 +2741,35 @@ let transformTests = {
     assert.strictEqual(code, `.π:after {\n  content: "π";\n}\n`)
   },
 
+  async cssMinify({ esbuild }) {
+    const { code } = await esbuild.transform(`div { color: #abcd }`, { loader: 'css', minify: true })
+    assert.strictEqual(code, `div{color:#abcd}\n`)
+  },
+
+  // Using an "es" target shouldn't affect CSS
+  async cssMinifyTargetES6({ esbuild }) {
+    const { code } = await esbuild.transform(`div { color: #abcd }`, { loader: 'css', minify: true, target: 'es6' })
+    assert.strictEqual(code, `div{color:#abcd}\n`)
+  },
+
+  // Using a "node" target shouldn't affect CSS
+  async cssMinifyTargetNode({ esbuild }) {
+    const { code } = await esbuild.transform(`div { color: #abcd }`, { loader: 'css', minify: true, target: 'node8' })
+    assert.strictEqual(code, `div{color:#abcd}\n`)
+  },
+
+  // Using an older browser target should affect CSS
+  async cssMinifyTargetChrome8({ esbuild }) {
+    const { code } = await esbuild.transform(`div { color: #abcd }`, { loader: 'css', minify: true, target: 'chrome8' })
+    assert.strictEqual(code, `div{color:rgba(170,187,204,.867)}\n`)
+  },
+
+  // Using a newer browser target shouldn't affect CSS
+  async cssMinifyTargetChrome80({ esbuild }) {
+    const { code } = await esbuild.transform(`div { color: #abcd }`, { loader: 'css', minify: true, target: 'chrome80' })
+    assert.strictEqual(code, `div{color:#abcd}\n`)
+  },
+
   async cjs_require({ esbuild }) {
     const { code } = await esbuild.transform(`const {foo} = require('path')`, {})
     assert.strictEqual(code, `const {foo} = require("path");\n`)