CSS Academy · Lesson

What PostCSS Does and How It Works

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

Lesson 1 of 413 steps

What PostCSS Does and How It Works is a free CSS Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

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.)

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?

Answer it in the interactive lesson

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.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

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. 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. The CSS Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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

← Back to CSS Academy