An extremely fast CSS parser, transformer, and minifier written in Rust. Use it with Parcel, as a standalone library or CLI, or via a plugin with any other tool.
- Extremely fast – Parsing and minifying large files is completed in milliseconds, often with significantly smaller output than other tools. See benchmarks below.
- Typed property values – many other CSS parsers treat property values as an untyped series of tokens. This means that each transformer that wants to do something with these values must interpret them itself, leading to duplicate work and inconsistencies.
@parcel/cssparses all values using the grammar from the CSS specification, and exposes a specific value type for each property.
- Browser-grade parser –
@parcel/cssis built on the cssparser and selectors crates created by Mozilla and used by Firefox and Servo. These provide a solid general purpose CSS-parsing foundation on top of which
@parcel/cssimplements support for all specific CSS rules and properties.
- Minification – One of the main purposes of
@parcel/cssis to minify CSS to make it smaller. This includes many optimizations including:
- Combining longhand properties into shorthands where possible.
- Merging adjacent rules with the same selectors or declarations when it is safe to do so.
- Combining CSS transforms into a single matrix or vice versa when smaller.
- Removing vendor prefixes that are not needed, based on the provided browser targets.
calc()expressions where possible.
- Converting colors to shorter hex notation where possible.
- Minifying gradients.
- Minifying CSS grid templates.
- Normalizing property value order.
- Removing default property sub-values which will be inferred by browsers.
- Many micro-optimizations, e.g. converting to shorter units, removing unnecessary quotation marks, etc.
- Vendor prefixing –
@parcel/cssaccepts a list of browser targets, and automatically adds (and removes) vendor prefixes.
- Syntax lowering –
@parcel/cssparses modern CSS syntax, and generates more compatible output where needed, based on browser targets.
- CSS Nesting (draft spec)
- Custom media queries (draft spec)
- Logical properties
- Color Level 4
color()function supporting predefined color spaces such as
- Space separated components in
- Hex with alpha syntax
- Percent syntax for opacity
:notwith multiple arguments
:langwith multiple arguments
- Double position gradient stops (e.g.
red 40% 80%)
- Alignment shorthands (e.g.
- Media query range syntax (e.g.
@media (width <= 100px)or
@media (100px < width < 500px))
system-uifont family fallbacks
- CSS modules –
@parcel/csssupports compiling a subset of CSS modules features.
- Locally scoped class and id selectors
- Locally scoped custom identifiers, e.g.
@keyframesnames, grid lines/areas,
- Opt-in support for locally scoped CSS variables and other dashed identifiers.
See the TypeScript definitions for full API docs.
Here is a simple example that compiles the input CSS for Safari 13.2, and minifies the output.
const css = require; let = css.;
You can also convert the results of running
browserslist into targets which can be passed to
const browserslist = require; const css = require; let targets = css.;
Bundling is also possible by using the
bundle API. This processes
@import rules and inlines them. This API requires filesystem access, so it does not accept
code directly via the API.
let = css.;
See the Rust API docs on docs.rs.
@parcel/css as the default CSS transformer. You should also add a
browserslist property to your
package.json, which defines the target browsers that your CSS will be compiled for.
While Parcel CSS handles the most commonly used PostCSS plugins like
postcss-preset-env, and CSS modules, you may still need PostCSS for more custom plugins like TailwindCSS. If that's the case, your PostCSS config will be picked up automatically. You can remove the plugins listed above from your PostCSS config, and they'll be handled by Parcel CSS.
You can also configure Parcel CSS in the
package.json in the root of your project. Currently, three options are supported:
drafts, which can be used to enable CSS nesting and custom media queries,
pseudoClasses, which allows replacing some pseudo classes like
cssModules, which enables CSS modules globally rather than only for files ending in
.module.css, or accepts an options object.
See the Parcel docs for more details.
From Deno or in browser
@parcel/css-wasm package can be used in Deno or directly in browsers. This uses a WebAssembly build of Parcel CSS. Use
TextDecoder convert code from a string to a typed array and back.
import init from 'https://unpkg.com/@parcel/css-wasm'; await ; let = ; console.log;
css-minimizer-webpack-plugin has builtin support for
@parcel/css in your project, and configure the plugin as documented here.
From the CLI
Parcel CSS includes a standalone CLI that can be used to compile, minify, and bundle CSS files. It can be used when you only need to compile CSS, and don't need more advanced functionality from a larger build tool such as code splitting and support for other languages.
To use the CLI, install the
@parcel/css-cli package with an npm compatible package manager:
npm install @parcel/css-cli
Then, you can run the
parcel-css command via
yarn, or by setting up a script in your package.json.
To see all of the available options, use the
npx parcel-css --help
By default, Parcel CSS is strict, and will error when parsing an invalid rule or declaration. However, sometimes you may encounter a third party library that you can't easily modify, which unintentionally contains invalid syntax, or IE-specific hacks. In these cases, you can enable the
errorRecovery option (or
--error-recovery CLI flag). This will skip over invalid rules and declarations, omitting them in the output, and producing a warning instead of an error. You should also open an issue or PR to fix the issue in the library if possible.
$ node bench.js bootstrap-4.css cssnano: 544.809ms 159636 bytes esbuild: 17.199ms 160332 bytes parcel-css: 4.16ms 143091 bytes $ node bench.js animate.css cssnano: 283.105ms 71723 bytes esbuild: 11.858ms 72183 bytes parcel-css: 1.973ms 23666 bytes $ node bench.js tailwind.css cssnano: 2.198s 1925626 bytes esbuild: 107.668ms 1961642 bytes parcel-css: 43.368ms 1824130 bytes
For more benchmarks comparing more tools and input, see here. Note that some of the tools shown perform unsafe optimizations that may change the behavior of the original CSS in favor of smaller file size. Parcel CSS does not do this – the output CSS should always behave identically to the input. Keep this in mind when comparing file sizes between tools.