Contents
PostCSS
A tool for transforming CSS with plugins: Autoprefixer, minification and future CSS features.
1.Getting started
- What PostCSS isPostCSS is a CSS parser with a plugin system. How it works, how it differs from a preprocessor and what jobs it does.
- Installing and running postcss-cliHow to install PostCSS and postcss-cli with npm, process a file with a plugin from the command line, watch for changes and save commands in package.json.
- The postcss.config.js fileHow to move the plugin list from the command line into postcss.config.js, pass options to a plugin and why plugin order matters.
- PostCSS in ViteVite already contains PostCSS: how to add plugins with postcss.config.js, what Vite does with CSS by itself and how Tailwind CSS 4 and Lightning CSS fit in.
2.Browser compatibility
- Browserslist: the list of browsersHow to state in package.json which browsers a site supports, check the list with npx browserslist and update the browser data.
- AutoprefixerHow Autoprefixer adds vendor prefixes based on the Browserslist list, removes outdated ones and why you should not write prefixes by hand.
- postcss-preset-env: future CSS todayHow postcss-preset-env turns modern CSS into code for older browsers from your Browserslist list, using logical properties, oklch and clamp as examples.
- CSS nestingHow to write nested rules following the CSS Nesting standard and get flat selectors for older browsers with postcss-preset-env or postcss-nesting.
- Named media queries with @custom-mediaHow to name a media query with @custom-media, reuse it across the project and get ordinary media queries with postcss-preset-env.
3.Building and optimizing
- postcss-import: building from several filesHow to split styles into files and join them into one through @import with the postcss-import plugin, include CSS from an npm package and why the plugin goes first.
- cssnano: minifying CSSHow the cssnano plugin shrinks CSS for production: removes whitespace and comments, shortens values and merges identical rules.
- Source mapsWhat a source map is, how PostCSS writes it inside the CSS or into a separate .map file, and how the browser uses it to show the original lines.
- A production buildThe complete PostCSS chain for a site: postcss-import, postcss-preset-env and cssnano, separate settings for development and publishing, and npm scripts.
4.Ecosystem
- Other useful pluginsA short tour of PostCSS plugins beyond the main chain: postcss-pxtorem for turning px into rem, removing unused styles, and Stylelint as a separate tool.
- Your own plugin in five minutesHow to write your own PostCSS plugin: an object with a name and a Declaration handler, changing a property, emitting a warning and adding it to postcss.config.js.
- PostCSS, Sass or Lightning CSSHow PostCSS, Sass and Lightning CSS differ, how they work together and which tool to choose for your project.