evanw/esbuild v0.14.31

on GitHub

Add support for parsing "optional variance annotations" from TypeScript 4.7 (#2102)

The upcoming version of TypeScript now lets you specify in and/or out on certain type parameters (specifically only on a type alias, an interface declaration, or a class declaration). These modifiers control type paramemter covariance and contravariance:

type Provider<out T> = () => T;
type Consumer<in T> = (x: T) => void;
type Mapper<in T, out U> = (x: T) => U;
type Processor<in out T> = (x: T) => T;

With this release, esbuild can now parse these new type parameter modifiers. This feature was contributed by @magic-akari.

Improve support for super() constructor calls in nested locations (#2134)

In JavaScript, derived classes must call super() somewhere in the constructor method before being able to access this. Class public instance fields, class private instance fields, and TypeScript constructor parameter properties can all potentially cause code which uses this to be inserted into the constructor body, which must be inserted after the super() call. To make these insertions straightforward to implement, the TypeScript compiler doesn't allow calling super() somewhere other than in a root-level statement in the constructor body in these cases.

Previously esbuild's class transformations only worked correctly when super() was called in a root-level statement in the constructor body, just like the TypeScript compiler. But with this release, esbuild should now generate correct code as long as the call to super() appears anywhere in the constructor body:

// Original code
class Foo extends Bar {
  constructor(public skip = false) {
    if (skip) {
      super(null)
      return
    }
    super({ keys: [] })
  }
}

// Old output (incorrect)
class Foo extends Bar {
  constructor(skip = false) {
    if (skip) {
      super(null);
      return;
    }
    super({ keys: [] });
    this.skip = skip;
  }
}

// New output (correct)
class Foo extends Bar {
  constructor(skip = false) {
    var __super = (...args) => {
      super(...args);
      this.skip = skip;
    };
    if (skip) {
      __super(null);
      return;
    }
    __super({ keys: [] });
  }
}

Add support for the new @container CSS rule (#2127)

This release adds support for @container in CSS files. This means esbuild will now pretty-print and minify these rules better since it now better understands the internal structure of these rules:

/* Original code */
@container (width <= 150px) {
  #inner {
    color: yellow;
  }
}

/* Old output (with --minify) */
@container (width <= 150px){#inner {color: yellow;}}

/* New output (with --minify) */
@container (width <= 150px){#inner{color:#ff0}}

This was contributed by @yisibl.

Avoid CSS cascade-dependent keywords in the font-family property (#2135)

In CSS, initial, inherit, and unset are CSS-wide keywords which means they have special behavior when they are specified as a property value. For example, while font-family: 'Arial' (as a string) and font-family: Arial (as an identifier) are the same, font-family: 'inherit' (as a string) uses the font family named inherit but font-family: inherit (as an identifier) inherits the font family from the parent element. This means esbuild must not unquote these CSS-wide keywords (and default, which is also reserved) during minification to avoid changing the meaning of the minified CSS.

The current draft of the new CSS Cascading and Inheritance Level 5 specification adds another concept called cascade-dependent keywords of which there are two: revert and revert-layer. This release of esbuild guards against unquoting these additional keywords as well to avoid accidentally breaking pages that use a font with the same name:

/* Original code */
a { font-family: 'revert'; }
b { font-family: 'revert-layer', 'Segoe UI', serif; }

/* Old output (with --minify) */
a{font-family:revert}b{font-family:revert-layer,Segoe UI,serif}

/* New output (with --minify) */
a{font-family:"revert"}b{font-family:"revert-layer",Segoe UI,serif}

This fix was contributed by @yisibl.