CSS (PostCSS)

To motivate some of the following tips, here's an overview over how Parcel processes CSS files (in that order):

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): .postcssrc, .postcssrc.json, .postcssrc.js, postcss.config.js.

ΒΆ CSS Modules

There are two ways to enable CSS modules:

.postcssrc:
{
"modules": true,
"plugins": {
"postcss-modules": {
"generateScopedName": "_[name]__[local]"
}
}
}
app.module.css:
.main {
color: grey;
}
index.js:
import { main } from "./app.module.css";

export function App() {
return <div className={main} />;
}

ΒΆ 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:

app.module.css:
.main {
color: grey;
}

.unused {
color: grey;
}
index.js:
import * as style from "./app.module.css";

export function App() {
return <div className={style.main} />;
}

Tree shaking isn't possible with default imports: import style from "./app.module.css";. Use namespace imports as above β€” no other changes are neccessary.

ΒΆ Using postcss-import

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 @imports) and 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).

index.html
index.html:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="./app.css" />
<div id="icon"></div>
.postcssrc:
{
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-custom-properties": {}
}
}
app.css:
@import "./config/index.css";

html {
background-color: var(--varColor);
}
.icon {
width: 50px;
height: 50px;
background-image: var(--varIcon);
}
config/index.css:
:root {
--varColor: red;
--varIcon: url("../icon.svg");
}