Lightning CSS is an exceptionally fast CSS parser, transformer, and minifier written in Rust, primarily maintained by the Parcel team. Currently at version 1.32.0, it undergoes active development with frequent minor and patch releases, ensuring up-to-date feature support and performance improvements. Its key differentiators include leveraging Rust for unparalleled performance, a browser-grade parser (based on Mozilla's `cssparser` and `selectors` crates), and sophisticated typed property values that ensure consistent and accurate transformations across various CSS features. Beyond basic minification, it performs advanced optimizations such as combining longhand properties into shorthands, merging adjacent rules, and reducing `calc()` expressions. It also provides robust vendor prefixing based on configurable browser targets (integrating with Browserslist) and comprehensive syntax lowering for modern CSS features like CSS Nesting, Custom Media Queries, and advanced Color Level 4/5 functions, enabling developers to write modern CSS while ensuring broad browser compatibility and optimized output size.
npm install lightningcssVerified import paths — ran on the pinned version, not inferred.
This example demonstrates how to use `lightningcss` to parse, minify, apply vendor prefixes, and lower modern CSS syntax (like nesting, custom media, and advanced color functions) for broad browser compatibility, while generating a source map.
Review any relative color calculations (e.g., `lab(from purple calc(l * .8) a b)`) that use percentages and update them to use numbers where appropriate, following the updated CSS Color Level 5 specification.
Ensure your Node.js environment is version 12.0.0 or higher. You can update Node.js using `nvm` or by installing a newer version directly.
If encountering installation or runtime errors on specific platforms, first ensure you are on the latest patch version of `lightningcss`. If issues persist, check the GitHub issues for similar reports or open a new one with your environment details.
Provide a custom `resolver` function to the `bundle` options if your `@import` paths are not standard file system paths, or if you need to handle external imports. Ensure all imported CSS files exist and are accessible.
Migrate from the deprecated `@value` at-rule to modern CSS Custom Properties or other CSS Module features that align with current specifications.
Ensure your project is configured for ESM (e.g., `"type": "module"` in `package.json`) and use `import { ... } from 'lightningcss';`. If you must use CommonJS, ensure your bundler or Node.js version is configured to correctly handle dual CJS/ESM packages, or use dynamic `import('lightningcss')`.Check the `lightningcss` documentation and release notes for support of the specific feature. If it's a draft feature, you might need to explicitly enable it via the `drafts` option in `transform` or `bundle` configuration (e.g., `drafts: { 'css-nesting': true }`). If it's not supported, consider a polyfill or waiting for a future release.Ensure you are passing a valid `targets` array to the `transform` or `bundle` function. This often involves using `browserslistToTargets(browserslist(YOUR_BROWSERSLIST_QUERY))` to generate the correct targets. Verify your Browserslist query correctly includes the desired browsers and versions.
No dependency data recorded yet.