evanw/esbuild
evanw/esbuild
Activity
Last release
Open issues
Open PRs
License
release notes
An extremely fast bundler for the web
release notes
Published 1/20/2022
PatchSafe upgradeIgnore invalid [@import](https://github.com/import) rules in CSS (#1946)
In CSS, [@import](https://github.com/import) rules must come first before any other kind of rule (except for [@charset](https://github.com/charset) rules). Previously esbuild would warn about incorrectly ordered [@import](https://github.com/import) rules and then hoist them to the top of the file. This broke people who wrote invalid [@import](https://github.com/import) rules in the middle of their files and then relied on them being ignored. With this release, esbuild will now ignore invalid [@import](https://github.com/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](https://github.com/import) rules.
Print invalid CSS differently (#1947)
This changes how esbuild prints nested [@import](https://github.com/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](https://github.com/import) url("other") }
.red { background: red; }
/* Old output (with --minify) */
.bad{[@import](https://github.com/import) url(other) } .red{background: red;}}
/* New output (with --minify) */
.bad{[@import](https://github.com/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?
release notes
Published 1/20/2022
PatchSafe upgradeIgnore invalid [@import](https://github.com/import) rules in CSS (#1946)
In CSS, [@import](https://github.com/import) rules must come first before any other kind of rule (except for [@charset](https://github.com/charset) rules). Previously esbuild would warn about incorrectly ordered [@import](https://github.com/import) rules and then hoist them to the top of the file. This broke people who wrote invalid [@import](https://github.com/import) rules in the middle of their files and then relied on them being ignored. With this release, esbuild will now ignore invalid [@import](https://github.com/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](https://github.com/import) rules.
Print invalid CSS differently (#1947)
This changes how esbuild prints nested [@import](https://github.com/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](https://github.com/import) url("other") }
.red { background: red; }
/* Old output (with --minify) */
.bad{[@import](https://github.com/import) url(other) } .red{background: red;}}
/* New output (with --minify) */
.bad{[@import](https://github.com/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?