The team behind the Parcel build tool has released Parcel CSS. The parser, compiler and minifier written in Rust should, among other things, show faster performance during minification and increase its quality. Parcel CSS can be used in Parcel, wrapped as a standalone library from within JavaScript or Rust, or as a plugin in another tool.
Rapid performance thanks to Rust
CSS minification is said to do Parcel CSS over 100x faster than CSSNano, and 3x faster than esbuild. In addition, the output of Parcel CSS should sometimes be significantly smaller than that of similar tools, since it can convert legacy CSS syntax to modern syntax and understand every CSS property. Using the benchmark example of the Bootstrap 4 minification, which consists of around 10,000 lines, the parcel team demonstrates the speed of parcel CSS and the size of the output.
Minification of Bootstrap 4 with Parcel CSS compared to esbuild and CSSNano
(Image: Parcel)
Under the hood, Parcel CSS is based on that developed by Mozilla and used in Firefox Rust Crate cssparser, a CSS tokenizer. This should provide a solid framework, including for tokenization and basic parsing. However, the capabilities of Parcel CSS go beyond the capabilities of cssparser as it can also interpret CSS properties and rules and do minification and compilation as well as output back to CSS.
Use with Parcel
If you use the Parcel build tool, you can already use Parcel CSS as a CSS transformer or minifier – in the near future it will completely replace the standard transformer and minifier. To try out the tool, add the following code to the .parcelrc file:
{
"extends": "@parcel/config-default",
"transformers": {
"*.css": ["@parcel/transformer-css-experimental"]
},
"optimizers": {
"*.css": ["@parcel/optimizer-css"]
}
}The parcel team also points out that the property browserslist to add in the package.json. It defines for which target browsers the CSS is compiled. Parcel CSS is designed to work with the most widely used PostCSS plugins like Autoprefixer or postcss-preset-env and CSS modules, but not with more custom plugins like Tailwind CSS. Then the addition @parcel/transformer-postcss before @parcel/transformer-css-experimental to insert If the previously listed plug-ins are removed from the PostCSS configuration, Parcel CSS takes care of them. Parcel CSS can also be configured in package.json in the root of the project.
Other uses
Developers who don’t use Parcel can use Parcel CSS either as a standalone library, with the JavaScript API, or by creating a plugin for any build tool. The Rust Crate parcel_css offers another alternative, but is still in alpha status, unlike the stable JavaScript API. It allows full access to the Abstract Syntax Tree (AST) and offers the possibility to develop custom tooling.
To demonstrate the capabilities of the project, the parcel team has also als Browser-Live-Demo den Parcel CSS Playground created. Parcel CSS stands just like Parcel under MIT license on GitHub.
More information about the new tool offers the blog entry for the announcement.
(May)
