Skip to content

Duplicated css declarations #3292

Closed
Closed
@Inqnuam

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

evanw commented on Aug 6, 2023

@evanw
Owner

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

Inqnuam commented on Aug 6, 2023

@Inqnuam
Author

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

evanw commented on Aug 6, 2023

@evanw
Owner

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.

added a commit that references this issue on Jan 27, 2024

fix evanw#3292: avoid generating duplicate css prefixes

02e13e0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Duplicated css declarations · Issue #3292 · evanw/esbuild