Closed
Description
/* styles.css */
body {
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
// index.ts
import "./styles.css";
// bundle.mjs
import esbuild from "esbuild";
await esbuild.build({
entryPoints: ["./index.ts"],
platform: "browser",
target: "safari12",
bundle: true,
outdir: "./out",
});
current css output
/* styles.css */
body {
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
desired css output
/* styles.css */
body {
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}
tested with 0.18.17 and 0.18.18
Activity
evanw commentedon Aug 6, 2023
The duplicate rule that you don’t want is being automatically generated for you because of the
target
you set combined with esbuild’s automatic generation of prefixed declarations. The simplest solution is to just delete the-webkit-backdrop-filter
and let esbuild generate it for you. Another solution is to enable rule deduplication withminifySyntax: true
. Or you could rearrange the declarations so that-webkit-backdrop-filter
comes beforebackdrop-filter
.Inqnuam commentedon Aug 6, 2023
Thanks for your quick response!
Deleting "-webkit-backdrop-filter" is acceptable if its value is exactly the same as for backdrop-filter.
For some reason if need different values depending on browser such as:
esbuild produce:
Also if we use an external library which already includes both "backdrop-filter" and "-webkit-backdrop-filter" it will be difficult to manipulate library's generated css to meet esbuild requirements.
Maybe we need a new build option for esbuild to change this behaviour ?
evanw commentedon Aug 6, 2023
One reason to keep both the automatically-generated one and the manually-written one in the case where the values are different is if the value manually-written one is not understood by the browser. In that case the browser would fall back to the automatically-generated one. However, Autoprefixer appears to never automatically generate one even in this case, so perhaps esbuild should do this too to match people's expectations.
fix evanw#3292: avoid generating duplicate css prefixes