PostCSS ➝ is a modular CSS preprocessor based on JavaScript.
These are the PostCSS plugins we use:
Plugin | Description |
---|---|
postcss-focus ➝ | Adds a :focus selector to every :hover selector for keyboard accessibility. |
autoprefixer ➝ | Adds vendor prefixes for the last two versions of all major browsers and IE10+. |
cssnext ➝ | Transpiles CSS4 features down to CSS3. |
cssnano ➝ | Optimizes & minifies your CSS file. |
Check out the comprehensive, fully-searchable catalog of available plugins at postcss.parts ➝
- Add the plugin to your project (e.g.
yarn add --save-dev postcss-super-plugin
). - Modify
internals/webpack/webpack.dev.babel.js
:- Add
const postcssSuperPlugin = require('postcss-super-plugin')
to the// PostCSS plugins
section. - Find
postcss: () => [/* ... current set of plugins ... */]
and add the new plugin to the list:postcssPlugins: [/* ... */, postcssSuperPlugin()]
.
- Add
- Restart the server (
CTRL+C
,npm start
) for the new plugin to become available (webpack does not pick up config changes while running).
Before installing a new plugin, make sure that you are not trying to add a feature that is already available. It is likely that what you are looking for is already supported by cssnext ➝