[Bug] build target has one 'chrome58' or 'safari11' output css syntax errors #4265
Description
demo project: https://stackblitz.com/edit/stackblitz-starters-ufutkekg?file=build.mjs
target: [es2020', 'chrome58'] target: [es2020', 'safari11'] output:
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::-moz-placeholder {
color: currentcolor;
}
@supports (color: color-mix(in lab, red, red)) {
{ /* Wrong syntax */
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
::placeholder {
color: currentcolor;
}
@supports (color: color-mix(in lab, red, red)) {
{ /* Wrong syntax */
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}Creates an extra curly brace
target: [es2020'] output:
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::-moz-placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}import esbuild from 'esbuild';
import tailwindPlugin from 'esbuild-plugin-tailwindcss';
import path from 'path';
esbuild
.build({
entryPoints: [path.join(process.cwd(), './src/index.jsx')],
outdir: 'dist',
bundle: true,
// target: ['es2020', 'chrome58'], // target has one 'chrome58' or 'safari11' output css syntax errors
// target: ['es2020', 'safari11'], // target has one 'chrome58' or 'safari11' output css syntax errors
target: ['es2020'], // is right
plugins: [
tailwindPlugin({
/* options */
}),
],
})
.then(() => {
console.log('done');
process.exit(0);
});