v1.18.0

This release adds support for custom transform visitors written in JavaScript, which lets you extend Lightning CSS with support for custom CSS syntax extensions, perform build time transforms, and more. It also adds support for nested @container and @layer rules, implements vendor prefixing for @supports, adds support for compiling from stdin via the CLI, and reduces compile times for the Rust crate by adding feature flags.

Custom transforms

The Lightning CSS visitor API enables you to implement custom non-standard extensions to CSS, making your code easier to author while shipping standard CSS to the browser. You can implement extensions such as custom shorthand properties or additional at-rules (e.g. mixins), build time transforms (e.g. convert units, inline constants, etc.), CSS rule analysis, and much more.

The API is designed to call into JavaScript as little as possible. You provide functions for specific types of values you're interested in such as Length, Url, or specific properties or rules. Lightning CSS fully parses all CSS rules and properties (with individual type definitions!), and only calls your plugin when it visits a value type you need to transform. This granularity improves performance, and also makes it much easier to build plugins since you don't need to worry about parsing values or selectors yourself. You can return a new value from a visitor function, or even remove or replace a value with multiple values in some cases. Check out the docs for more details!

Custom transforms have a build time cost: it can be around 2x slower to compile with a JS visitor than without. That being said, it is around 6x faster than equivalent postcss plugins in my testing. While standard CSS features should continue to be implemented in Rust as part of Lightning CSS core, the plugin API can help you migrate from other tools while supporting non-standard syntax extensions you might use. We look forward to hearing your feedback!

Playground updates

The Lightning CSS playground has also been updated to support visitors, which makes it easy to play around right in your browser. It also has a new editor experience powered by Code Mirror including syntax highlighting and inline errors. Check out an example with a custom visitor to see what it can do.

New docs

The Lightning CSS website has also been updated to include documentation for all of the features, including transpilation, CSS modules, bundling, and minification.

Features

• JavaScript visitor API for custom transforms – #363
• Add visitor support to WASM build via napi-wasm – #373
• Parse @container and @layer block rules nested within style rules – 615893c
• Add projectRoot option and use relative paths for CSS module hashes – 33febb4
• Implement vendor prefixing for @supports – 787f46f
• CLI support for piping – #380
• Introduce "bundler" feature flag – #358
• Put all of serde behind feature flag – #360
• Introduce "visitor" feature flag – #367
• Add sourcemap feature – #372
• Remove derive-move – #377

Fixes

• Fix important declarations within nested at rules – 6a7d19e
• Remove parentheses from supports condition AST – 87ca705