In January, we announced Parcel CSS, a super fast new CSS parser, compiler, and minifier written in Rust. Since then, we have been hard at work improving it, with many new features and even better performance. Today, we're excited to announce that Parcel CSS is now the default CSS transformer and minifier in Parcel v2.4.0!
New features
#Here is a summary of some of the major features that have been added to Parcel CSS since our initial announcement.
@custom-mediadraft syntax- Improved minification of custom properties
- Cascade layers (i.e.
@layer) - Registered custom properties (i.e.
@property) - CSS Color Level 4, including
lab(), and other color spaces with fallbacks for older browsers. color-mix()function from CSS Color Level 5- Automatic vendor prefixing for
mask,clip-path, andfilter. - And much more!
With these features, Parcel CSS can now be used as a replacement for many common PostCSS-based setups, including autoprefixer, postcss-preset-env, postcss-modules, and cssnano.
Upgrading
#In Parcel v2.4.0, the default CSS transformer and minifier have been updated to use Parcel CSS. In most projects, this should be seamless. However, there are a few things to be aware of.
PostCSS is still fully supported, so your current configuration should still work just fine. However, we have added warnings to Parcel to notify you when we recommend updating your project's configuration to improve build performance.
cssnano config
#If you have a cssnano config file in your project, such as .cssnanorc, it will no longer be used by default. You may see a warning about this in the console when building your project. You can either delete this config file if you don't need it anymore, or set up a .parcelrc to continue using cssnano. See the docs for more details.
autoprefixer and postcss-preset-env
#In most cases, Parcel will now automatically handle vendor prefixing and transpiling CSS for your browser targets, just like it does for JavaScript. All you need to do is set up a browserslist field in your package.json, and Parcel will take care of the rest.
Parcel also has opt-in support for compiling draft syntax such as nesting, custom media queries, and pseudo-class polyfills. See the new docs for more information about all of Parcel's CSS transpilation features.
If you were using autoprefixer and postcss-preset-env for this before, you may be able to remove these from your PostCSS config to improve build performance. If these were the only PostCSS plugins you were using, you can delete your PostCSS config entirely. Check out the docs for more details.
CSS modules
#CSS modules are handled automatically by Parcel when named with the .module.css suffix. Previously, this was powered by postcss-modules under the hood, but now it is handled by Parcel CSS instead.
You can also enable all CSS files to be processed as CSS modules. Previously, this was done with the top-level modules option in a PostCSS config file. This option has moved to a config key in package.json for @parcel/transformer-css. See the docs for more information.
Strict parsing
#The Parcel CSS parser is more strict than PostCSS. It will error when a selector, at rule, or declaration is invalid. This is useful as it avoids accidentally shipping code that is ignored when loaded in the browser.
Parcel CSS is also more spec-compliant when it comes to dependencies. If you have url() dependencies in CSS custom properties, you may see a new error if you reference a file by a relative path. This is ambiguous because the CSS spec actually resolves these based on where the var() is used, rather than where the custom property is defined. Parcel now requires that urls in custom properties are defined using absolute paths instead. See the docs for details.
Other changes
#Parcel v2.4.0 also brings several other bug fixes and improvements, including upgrades to SWC to improve JavaScript dead code elimination, and support for class static initialization blocks. Check out the changelog to see a full list of all the improvements.