To motivate some of the following tips, here's an overview over how Parcel processes CSS files (in that order):
.postcssrcand might generate a CSS modules map
url(...)into Parcel's graph
@parcel/packager-css: Concat all CSS assets into a single bundle.
@parcel/optimizer-cssnano: Minify the bundle output from
As you can see, each asset is processed individually by PostCSS and concatenated with the others afterwards.
Parcel reads PostCSS from these files (in that priority):
¶ CSS Modules
There are two ways to enable CSS modules:
- Either globally in the PostCSS config file (this way you can also configure the underlying
- Or on a per-file basis: by using the file extension
¶ CSS modules tree shaking
With scope hoisting, unused classes in CSS modules are removed if a namespace import (or a named import as above) is used:
Some PostCSS plugins (e.g.
postcss-custom-properties) potentionally need to access declarations from other
@imported CSS assets.
If you do want to run PostCSS on the whole bundle, we recommend you use
postcss-import (to inline
postcss-url (to rewrite
url(...) expressions appropriately).
This isn't done by default because it would have a negative effect on caching (Parcel could't reuse unchanged CSS files anymore).