Jetpack uses PostCSS by default, because:
- this way you get autoprefixing and modern CSS features
- you can be sure that the code you write will run in all the browsers you support
Jetpack uses the following PostCSS plugins and presets:
postcss-import
postcss-flexbugs-fixes
postcss-preset-env
See lib/webpack.css.js for the exact configuration.
There are 2 ways to cusotmize postcss config.
If you just want to go beyond using Stage 2 PostCSS features, you can toggle them in jetpack.config.js
:
module.exports = {
css: {
features: {
'nesting-rules': true,
'custom-media-queries': true
}
}
}
You can also create a postcss.config.js and use that to configure any plugins or other PostCSS features. Note that this will override any of the jetpack's configurations, so you might want to do something like:
// postcss.config.js
module.exports = {
plugins: {
'jetpack/postcss-import': {},
'jetpack/postcss-flexbugs-fixes': {},
'jetpack/postcss-preset-env': {
autoprefixer: { grid: true }
},
colorguard: {},
stylelint: {}
}
}
Note! If you use custom postcss.config.js
, by default, postcss-preset-env
will use browserslist default browsers and no longer jetpack's browserslist. That might be ok for the most part, but you should take extra care.