0Pricing
CSS Academy · Lesson

What PostCSS Does and How It Works

Understand PostCSS as a CSS transformation tool powered by JavaScript plugins.

What PostCSS Does and How It Works is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is PostCSS?

PostCSS is a CSS transformation tool — not a language extension like Sass, but a JavaScript-powered processor that transforms standard CSS through plugins. Its plugin architecture makes it highly composable.

PostCSS vs Sass

Sass is a preprocessor with its own language features. PostCSS is a transformation pipeline that operates on standard CSS. They can be used together: Sass compiles first, then PostCSS applies further transformations.

How PostCSS Works

PostCSS parses CSS into an AST (Abstract Syntax Tree), plugins transform the AST, and PostCSS serializes it back to CSS. Plugins can add, remove, or modify any CSS node.

Installing PostCSS

PostCSS is most commonly used via Vite, webpack, or the postcss CLI:

npm install postcss postcss-cli autoprefixer cssnano

postcss.config.js

The standard PostCSS configuration file:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' })
  ]
};

PostCSS as a Build Pipeline Step

In Vite, PostCSS is built-in. Add config to vite.config.js or postcss.config.js:

// vite.config.js
import autoprefixer from 'autoprefixer';

export default {
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
};

PostCSS Node Types

PostCSS's AST has four main node types:

  • Root: the entire CSS file
  • Rule: a selector + declaration block
  • Declaration: a property: value pair
  • AtRule: @-rules (@media, @keyframes, etc.)

Popular PostCSS Plugins

The PostCSS ecosystem includes hundreds of plugins:

  • autoprefixer: adds vendor prefixes
  • cssnano: minifies CSS
  • postcss-preset-env: converts modern CSS to browser-compatible
  • postcss-import: inlines @import statements
  • purgecss: removes unused CSS

Source Maps

PostCSS can generate source maps, mapping minified output back to original CSS for easier debugging in browser DevTools.

PostCSS vs CSS-in-JS

PostCSS transforms static CSS files. CSS-in-JS generates CSS dynamically in JavaScript at runtime. They are different tools for different use cases — PostCSS is better for traditional stylesheets; CSS-in-JS for component-scoped dynamic styles.

Running PostCSS via CLI

Process a file with the CLI:

npx postcss input.css -o output.css --use autoprefixer cssnano

Quick Check

What does PostCSS use to represent CSS for transformation?

Recap

PostCSS is a CSS transformation tool that processes CSS through a plugin pipeline. It parses CSS to an AST, plugins transform it, and it serializes back to CSS. Use it for autoprefixing, minification, modern CSS polyfills, and custom transformations. It integrates natively with Vite and webpack build tools.

Frequently asked questions

Is the “What PostCSS Does and How It Works” lesson free?

Yes — the full text of “What PostCSS Does and How It Works” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “What PostCSS Does and How It Works”?

Understand PostCSS as a CSS transformation tool powered by JavaScript plugins. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “What PostCSS Does and How It Works” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. What PostCSS Does and How It Works
  2. Autoprefixer and cssnano
  3. Custom PostCSS Plugins
  4. PostCSS in Vite and Webpack
← Back to CSS Academy