Parcel CSS parser offered as performance enhancer

Parcel CSS, a Rust-based CSS parser, compiler, and minifier, was announced this week and is being positioned as a tool offering benefits in performance and minification.

Written in the Rust language, the tool handles compiling of CSS modules as well as tree shaking and transpiling CSS features such as nesting, logical properties, and Level 4 color syntax. Unveiled January 12 by the makers of the Parcel build tool for the web, Parcel CSS can be found on GitHub. Parcel CSS can be used with Parcel or as a stand-alone library from JavaScript or Rust. It also can be wrapped as a plug-in within other tools.

Developers can try a live demo in the browser. According to a bulletin on the technology, Parcel CSS is fast not just because it was written in a native language but because it was designed to be high performing. The tool has memory optimizations such as representing vendor prefixes using single-byte flags and parsing CSS properties into structured data rather than representing them as strings needing to be reparsed with each use. Although positioned for speed, Parcel CSS does not compromise on size, proponents said. It can produce a smaller output than other tools in many cases, as it has the ability to convert legacy CSS syntax used in many libraries to smaller, modern syntax. It also understands each individual CSS property.

Underpinning Parcel CSS is the cssparser Rust crate, a browser-grade tokenizer used in the Firefox browser. This is intended to provide a foundation that includes tokenization and basic parsing. Parcel users can try out Parcel CSS by adding the following to their .parcelrc file:

{   "extends": "@parcel/config-default",   "transformers": {     "*.css": ["@parcel/transformer-css-experimental"]   },   "optimizers": {     "*.css": ["@parcel/optimizer-css"]   } }

Users also should add a browserlist property to their package.json to define the target browsers for which the target CSS will be compiled.