Parcel v2.15.0
Parcel v2.15.0 introduces a new transformer and minifier for HTML and SVG, implemented in Rust using browser-grade components from Firefox and Servo. It also reduces the number of npm dependencies by 25% and installed node_modules size by 45%.
New HTML transformer
#Since the first version of Parcel, our HTML transformer has relied on posthtml. This provided an ecosystem of plugins for parsing and transforming HTML, including the htmlnano minifier.
With the ongoing tooling migration to Rust and other native languages, it was time to build a new HTML transformer for Parcel. Rust enables us to reuse high quality battle tested components from browsers, like we did for CSS with Lightning CSS. The new HTML transformer uses Servo's html5ever parser. (Correct) HTML parsing is notoriously hard. There are tons of edge cases and error handling rules described in the spec (which is over 100 printed pages!), developed over the course of decades. Using a browser-grade parser ensures that Parcel can handle any HTML document the same way as browsers do.
Once the HTML is parsed, Parcel traverses the DOM to find dependencies such as images, links, videos, meta tags, etc. In addition, inline <script> and <style> tags are collected. After these are processed, the HTML is updated with the final URL or contents of each asset.
The last step is minification. HTML is quite tricky to minify. Even removing whitespace is not safe in most cases. For example, a CSS stylesheet could apply white-space: pre which would preserve newlines and whitespace between elements. Parcel is now more conservative when minifying, prioritizing correctness over file size. However, minification of other parts of HTML is now improved. For example, quotes can be removed from attributes, boolean attribute values can be omitted, and optional closing elements can be removed (taking advantage of HTML's error recovery).
PostHTML is still supported too. When a .posthtmlrc file is detected, it will be applied as before. In addition, the new minifier is compatible with many options in htmlnano config files. If needed, you can also continue to use htmlnano by adding @parcel/optimizer-htmlnano to your .parcelrc.
SVGO → OXVG
#OXVG is a Rust-based replacement for SVGO written by Noah Baldwin. It is largely compatible with SVGO config files, with multiple times faster performance and improved correctness. It uses Lightning CSS to optimize styles in SVG files, and works on embedded SVGs in HTML using the same AST produced by the html5ever parser.
Your svgo.config.json file will continue to be used by OXVG. If you have custom plugins, or need functionality not yet supported by OXVG, you can add @parcel/optimizer-svgo to your .parcelrc to revert back to SVGO.
SVG to JSX
#Using the same parser and optimization steps described above, Parcel also supports converting SVG to JSX, for example importing icons as React components. The @parcel/transformer-svg-jsx plugin replaces @parcel/transformer-svg-react, which used SVGR for this purpose. Parcel now converts its parsed SVG DOM structure directly to an SWC JavaScript AST.
Most options in svgr.config.json files are supported by the new SVG to JSX transformer. If you have custom plugins, you can continue to use @parcel/transformer-svg-react instead.
Reduced install footprint
#The new HTML and SVG plugins enable us to reduce Parcel's size in node_modules by 45%, and the number of installed dependencies by 25%. We've also split our native binaries into separate packages per architecture in this release. This is less for you to update and maintain, and should lead to faster installs.
Thanks!
#Thanks to everyone who contributed to this release! Check out the full changelog for all of the other bug fixes and improvements.