evanw/esbuild v0.14.12

on GitHub

Ignore invalid @import rules in CSS (#1946)

In CSS, @import rules must come first before any other kind of rule (except for @charset rules). Previously esbuild would warn about incorrectly ordered @import rules and then hoist them to the top of the file. This broke people who wrote invalid @import rules in the middle of their files and then relied on them being ignored. With this release, esbuild will now ignore invalid @import rules and pass them through unmodified. This more accurately follows the CSS specification. Note that this behavior differs from other tools like Parcel, which does hoist CSS @import rules.

Print invalid CSS differently (#1947)

This changes how esbuild prints nested @import statements that are missing a trailing ;, which is invalid CSS. The result is still partially invalid CSS, but now printed in a better-looking way:

/* Original code */
.bad { @import url("other") }
.red { background: red; }

/* Old output (with --minify) */
.bad{@import url(other) } .red{background: red;}}

/* New output (with --minify) */
.bad{@import url(other);}.red{background:red}

Warn about CSS nesting syntax (#1945)

There's a proposed CSS syntax for nesting rules using the & selector, but it's not currently implemented in any browser. Previously esbuild silently passed the syntax through untransformed. With this release, esbuild will now warn when you use nesting syntax with a --target= setting that includes a browser.

Warn about } and > inside JSX elements

The } and > characters are invalid inside JSX elements according to the JSX specification because they commonly result from typos like these that are hard to catch in code reviews:

function F() {
  return <div>></div>;
}
function G() {
  return <div>{1}}</div>;
}

The TypeScript compiler already treats this as an error, so esbuild now treats this as an error in TypeScript files too. That looks like this:

✘ [ERROR] The character ">" is not valid inside a JSX element

    example.tsx:2:14:
      2 │   return <div>></div>;
        │               ^
        ╵               {'>'}

  Did you mean to escape it as "{'>'}" instead?

✘ [ERROR] The character "}" is not valid inside a JSX element

    example.tsx:5:17:
      5 │   return <div>{1}}</div>;
        │                  ^
        ╵                  {'}'}

  Did you mean to escape it as "{'}'}" instead?

Babel doesn't yet treat this as an error, so esbuild only warns about these characters in JavaScript files for now. Babel 8 treats this as an error but Babel 8 hasn't been released yet. If you see this warning, I recommend fixing the invalid JSX syntax because it will become an error in the future.

Warn about basic CSS property typos

This release now generates a warning if you use a CSS property that is one character off from a known CSS property:

▲ [WARNING] "marign-left" is not a known CSS property

    example.css:2:2:
      2 │   marign-left: 12px;
        │   ~~~~~~~~~~~
        ╵   margin-left

  Did you mean "margin-left" instead?