Duplicated css declarations

[Inqnuam]

/* 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

[evanw]

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 with minifySyntax: true. Or you could rearrange the declarations so that -webkit-backdrop-filter comes before backdrop-filter.

[Inqnuam]

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:

body {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(45px);
}

esbuild produce:

body {
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(45px);
}

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]

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.