# PostCSS — Transform CSS with JavaScript Plugins

> A tool for transforming CSS with an ecosystem of plugins. PostCSS parses CSS into an AST, passes it through plugins for autoprefixing, nesting, minification, and more, then outputs the result.

## Install

Save as a script file and run:

# PostCSS — Transform CSS with JavaScript Plugins

## Quick Use
```bash
npm install postcss postcss-cli autoprefixer
# Create postcss.config.js:
# module.exports = { plugins: [require('autoprefixer')] };
# Then: npx postcss src/style.css -o dist/style.css
```

## Introduction
PostCSS is a CSS transformation tool driven by JavaScript plugins. Rather than being a preprocessor like Sass, it operates on standard CSS via an abstract syntax tree, letting you pick exactly the transformations you need — from vendor prefixing to future CSS syntax transpilation.

## What PostCSS Does
- Parses CSS into a fast, detailed abstract syntax tree
- Runs an ordered pipeline of JavaScript plugins that read and modify the AST
- Supports hundreds of plugins: Autoprefixer, cssnano, postcss-preset-env, Tailwind CSS, and more
- Outputs transformed CSS with optional source maps
- Integrates with webpack, Vite, Rollup, Parcel, and other build tools natively

## Architecture Overview
PostCSS uses a tokenizer and parser written in JavaScript to build a CSS AST of Root, Rule, Declaration, AtRule, and Comment nodes. Each plugin is a function that receives the AST and a helpers object, traverses or mutates nodes, and returns. Plugins run in sequence, so order matters. The stringifier then serializes the final AST back to CSS. Source maps track transformations across the full pipeline.

## Self-Hosting & Configuration
- Install PostCSS and desired plugins via npm
- Configure plugins in `postcss.config.js`, `postcss.config.mjs`, or inline in your bundler config
- Use `postcss-cli` for standalone builds or integrate through your bundler's PostCSS loader
- Enable source maps with the `map` option for debugging in dev tools
- Pin plugin versions to avoid unexpected behavior from semver-minor changes

## Key Features
- Modular architecture — only pay for the transforms you use
- Autoprefixer plugin is the industry standard for vendor prefix management
- postcss-preset-env transpiles modern CSS features (nesting, custom media) for older browsers
- cssnano plugin provides production-grade CSS minification
- Powers Tailwind CSS under the hood as its processing engine

## Comparison with Similar Tools
- **Sass/SCSS** — preprocessor with its own syntax; PostCSS works on standard CSS
- **Less** — another preprocessor; PostCSS is more modular and extensible via plugins
- **Lightning CSS** — Rust-based CSS transformer; faster but with a fixed feature set
- **Stylelint** — CSS linter that also uses PostCSS's parser internally
- **esbuild CSS** — handles basic CSS bundling; less plugin flexibility than PostCSS

## FAQ
**Q: Is PostCSS a replacement for Sass?**
A: It can be. With plugins like postcss-nested and postcss-mixins you get similar features, but many teams use PostCSS alongside Sass for tasks like autoprefixing.

**Q: Does Tailwind CSS require PostCSS?**
A: Tailwind CSS v3 uses PostCSS as its processing engine. Tailwind v4 introduces its own engine but still supports PostCSS integration.

**Q: How does plugin order affect the output?**
A: Plugins run sequentially. For example, run postcss-preset-env before cssnano so modern syntax is transpiled before minification.

**Q: Is PostCSS fast enough for large projects?**
A: Yes. The JavaScript parser is optimized and handles large stylesheets efficiently. For extreme performance needs, Lightning CSS is a Rust-based alternative.

## Sources
- https://github.com/postcss/postcss
- https://postcss.org/

---
Source: https://tokrepo.com/en/workflows/5c3d451a-41cf-11f1-9bc6-00163e2b0d79
Author: Script Depot