evanw/esbuild v0.19.2

on GitHub

Update how CSS nesting is parsed again

CSS nesting syntax has been changed again, and esbuild has been updated to match. Type selectors may now be used with CSS nesting:

.foo {
  div {
    color: red;
  }
}

Previously this was disallowed in the CSS specification because it's ambiguous whether an identifier is a declaration or a nested rule starting with a type selector without requiring unbounded lookahead in the parser. It has now been allowed because the CSS working group has decided that requiring unbounded lookahead is acceptable after all.

Note that this change means esbuild no longer considers any existing browser to support CSS nesting since none of the existing browsers support this new syntax. CSS nesting will now always be transformed when targeting a browser. This situation will change in the future as browsers add support for this new syntax.

Fix a scope-related bug with --drop-labels= (#3311)

The recently-released --drop-labels= feature previously had a bug where esbuild's internal scope stack wasn't being restored properly when a statement with a label was dropped. This could manifest as a tree-shaking issue, although it's possible that this could have also been causing other subtle problems too. The bug has been fixed in this release.

Make renamed CSS names unique across entry points (#3295)

Previously esbuild's generated names for local names in CSS were only unique within a given entry point (or across all entry points when code splitting was enabled). That meant that building multiple entry points with esbuild could result in local names being renamed to the same identifier even when those entry points were built simultaneously within a single esbuild API call. This problem was especially likely to happen with minification enabled. With this release, esbuild will now avoid renaming local names from two separate entry points to the same name if those entry points were built with a single esbuild API call, even when code splitting is disabled.

Fix CSS ordering bug with @layer before @import

CSS lets you put @layer rules before @import rules to define the order of layers in a stylesheet. Previously esbuild's CSS bundler incorrectly ordered these after the imported files because before the introduction of cascade layers to CSS, imported files could be bundled by removing the @import rules and then joining files together in the right order. But with @layer, CSS files may now need to be split apart into multiple pieces in the bundle. For example:

/* Original code */
@layer start;
@import "data:text/css,@layer inner.start;";
@import "data:text/css,@layer inner.end;";
@layer end;

/* Old output (with --bundle) */
@layer inner.start;
@layer inner.end;
@layer start;
@layer end;

/* New output (with --bundle) */
@layer start;
@layer inner.start;
@layer inner.end;
@layer end;

Unwrap nested duplicate @media rules (#3226)

With this release, esbuild's CSS minifier will now automatically unwrap duplicate nested @media rules:

/* Original code */
@media (min-width: 1024px) {
  .foo { color: red }
  @media (min-width: 1024px) {
    .bar { color: blue }
  }
}

/* Old output (with --minify) */
@media (min-width: 1024px){.foo{color:red}@media (min-width: 1024px){.bar{color:#00f}}}

/* New output (with --minify) */
@media (min-width: 1024px){.foo{color:red}.bar{color:#00f}}

These rules are unlikely to be authored manually but may result from using frameworks such as Tailwind to generate CSS.