PostCSS
Advanced PostCSS configuration with plugins
PostCSS
PostCSS is the default processing pipeline for CSS in Packem. The PostCSS loader
in @visulima/rollup-plugin-css automatically
picks up a postcss.config.js file and also accepts inline plugin configuration.
Overview
This example demonstrates:
- Using a
postcss.config.jsfile with autoprefixer and other plugins - Configuring plugins inline in
packem.config.ts - Controlling the config loader,
@importresolution, and URL handling
Setup
Install postcss plus any plugins you need. postcss-load-config is used to
discover the config file.
npm install --save-dev postcss autoprefixer postcss-nestedDirectory Structure
my-package/
├── src/
│ ├── index.ts
│ └── styles.css
├── postcss.config.js
├── package.json
└── packem.config.tsSource Files
src/styles.css
.card {
display: grid;
gap: 1rem;
.title {
font-size: 1.25rem;
font-weight: bold;
}
}src/index.ts
import './styles.css'
export function createCard() {
const card = document.createElement('div')
card.className = 'card'
return card
}Using a PostCSS Config File
The PostCSS loader detects and applies your postcss.config.js automatically.
// postcss.config.js
export default {
plugins: {
'postcss-nested': {},
autoprefixer: {},
},
}Then register the PostCSS loader:
import { defineConfig } from '@visulima/packem/config'
import transformer from '@visulima/packem/transformer/esbuild'
import postcssLoader from '@visulima/packem/css/loader/postcss'
export default defineConfig({
transformer,
rollup: {
css: {
mode: 'extract',
loaders: [postcssLoader],
},
},
})Inline Plugin Configuration
Plugins listed in the postcss.plugins option run before any plugins loaded
from the config file. Each entry can be a plugin instance, a module name string,
or a [name, options] tuple.
import { defineConfig } from '@visulima/packem/config'
import transformer from '@visulima/packem/transformer/esbuild'
import postcssLoader from '@visulima/packem/css/loader/postcss'
export default defineConfig({
transformer,
rollup: {
css: {
mode: 'extract',
loaders: [postcssLoader],
postcss: {
plugins: [
'autoprefixer',
['postcss-custom-properties', { preserve: false }],
],
},
},
},
})PostCSS Loader Options
The postcss option exposes several sub-options:
config— enable/disable or configure the config-file loader (set tofalseto ignorepostcss.config.js, or pass{ path, ctx })plugins— plugins applied before config-file pluginsimport— options for the CSS@importresolver (orfalseto disable)url— options for the CSS URL resolver (orfalseto disable)modules— enable/configure CSS Modulesparser,syntax,stringifier— override the PostCSS parser/syntax/stringifierto— thetooption for plugins that require it
css: {
loaders: [postcssLoader],
postcss: {
// Skip the postcss.config.js file and use inline plugins only
config: false,
plugins: ['autoprefixer'],
// Disable the built-in @import resolver
import: false,
},
}The built-in @import and URL resolvers run by default. Disable them by setting
postcss.import or postcss.url to false when you want a plugin to handle
them instead.
Building
packem build