CSS optimisations

[Inqnuam]

Hello @evanw
Is is possible to deduplicate and move all @import and @font-face rules to the top of css bundle as you do with @charset?

[evanw]

Please provide an example of what you want the input and output to be. There isn't enough information here to know what you mean.

[Inqnuam]

// index.ts
import "./style1.css";
import "./style2.css";
import "./style3.css";

/* style1.css */
@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Oswald:300,400,700");
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);

@font-face {
  font-family: "VeraSeBd";
  src: url(https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf);
}

.class1 {
  height: 909px;
}

/* style2.css */
@charset "utf-8";

@font-face {
  font-family: "VeraSeBd";
  src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
}

.class2 {
  width: 300px;
}

/* style3.css */
.class3 {
  color: red;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);

Current css bundle output

@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Oswald:300,400,700";
@import "https://fonts.googleapis.com/css?family=Roboto:400,500";

/* style1.css */
@font-face {
  font-family: "VeraSeBd";
  src: url(https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf);
}
.class1 {
  height: 909px;
}

/* style2.css */
@font-face {
  font-family: "VeraSeBd";
  src: url(https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf);
}
.class2 {
  width: 300px;
}

/* style3.css */
.class3 {
  color: red;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);

Excepted/optimised output

@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Oswald:300,400,700";
@import "https://fonts.googleapis.com/css?family=Roboto:400,500";

/* style1.css */
@font-face {
  font-family: "VeraSeBd";
  src: url(https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf);
}
.class1 {
  height: 909px;
}

/* style2.css */
.class2 {
  width: 300px;
}

/* style3.css */
.class3 {
  color: red;
}

[evanw]

The problem you're having with the @import rule is because your @import is invalid. Bundling it with esbuild gives the following warning:

▲ [WARNING] All "@import" rules must come first [invalid-@import]

    style3.css:5:0:
      5 │ @import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
        ╵ ~~~~~~~

  This rule cannot come before an "@import" rule

    style3.css:1:0:
      1 │ .class3 {
        ╵ ^

Moving it up to the top of the file where it should be fixes your problem for me, so you should make that change on your end. That's not something that esbuild should fix itself. Invalid @import rules in the input should remain invalid @import rules in the output, otherwise the unbundled and bundled CSS renderings would be different, which would be a bug with esbuild.

The @font-face rules appear to not be deduplicated because they contain an external url() reference and esbuild treats two external references as unequal. That should be something that esbuild can fix. When that's fixed, multiple duplicate @font-face rules should be collapsed into a single rule.

[Inqnuam]

Awesome!
Thank you!