postcss/postcss

How postcss/postcss works

PostCSS is a JavaScript framework for transforming CSS and other stylesheet syntaxes with plugins. The principal workflow is: a caller configures a processor, supplies CSS, plugins visit and modify the parsed syntax tree, and PostCSS returns generated CSS and source-map information. The graph separates processing, parsing and input handling, the mutable AST, and output and diagnostics. Core call relationships are supported by the excerpts or SOURCE INDEX; broader syntax-extension capabilities are documented in the README, but their external implementations are not in this repository.

Main entry points: parser.js CSS parser · lazy-result.js Plugin execution · input.js CSS input · container.js AST container

Components 26

Processing API

Public API lib/postcss.js
Processor lib/processor.js
Plugin execution lib/lazy-result.js

Parsing and Input

CSS input lib/input.js
Parse entry lib/parse.js
CSS parser lib/parser.js
Tokenizer lib/tokenize.js
Syntax extensions lib

Stylesheet AST

Base node lib/node.js
AST container lib/container.js
Root tree lib/root.js
Document tree lib/document.js
Rules lib/rule.js
At-rules lib/at-rule.js
Declarations lib/declaration.js
Comments lib/comment.js
AST deserialization lib/fromJSON.js

Output and Diagnostics

Stringify entry lib/stringify.js
CSS generation lib/stringifier.js
Source maps lib/map-generator.js
Previous maps lib/previous-map.js
Processing result lib/result.js
Warnings lib/warning.js
Syntax errors lib/css-syntax-error.js

Other components

CSS caller
PostCSS plugins

Connections 33

CSS caller → Public API: uses README.md
PostCSS plugins → Plugin execution: register callbacks lib/lazy-result.js
Public API → Processor: creates lib/postcss.js
Public API → Parse entry: exposes lib/postcss.js
Public API → AST deserialization: exposes lib/postcss.js
Processor → Plugin execution: creates result lib/processor.js
Plugin execution → CSS input: constructs lib/lazy-result.js
Plugin execution → Parse entry: parses CSS lib/lazy-result.js
Parse entry → CSS input: creates input lib/parse.js
Parse entry → CSS parser: invokes lib/parse.js
CSS parser → Tokenizer: tokenizes lib/parser.js
CSS parser → Root tree: builds tree lib/parser.js
CSS parser → Rules: creates nodes lib/parser.js
CSS parser → At-rules: creates nodes lib/parser.js
CSS parser → Declarations: creates nodes lib/parser.js
CSS parser → Comments: creates nodes lib/parser.js
AST container → Base node: extends lib/container.js
Rules → AST container: extends lib/rule.js
Root tree → AST container: extends lib/root.js
Document tree → AST container: extends lib/document.js
At-rules → AST container: extends lib/at-rule.js
Declarations → Base node: extends lib/declaration.js
Comments → Base node: extends lib/comment.js
Plugin execution → Stringify entry: generates CSS lib/lazy-result.js
Stringify entry → CSS generation: uses lib/stringify.js
Plugin execution → Source maps: generates maps lib/lazy-result.js
Source maps → CSS input: reads source lib/map-generator.js
CSS input → Previous maps: loads prior map lib/input.js
Plugin execution → Processing result: creates result lib/lazy-result.js
Processing result → Warnings: creates warnings lib/result.js
CSS input → Syntax errors: reports errors lib/input.js
Base node → Syntax errors: creates errors lib/node.js
CSS caller → Syntax extensions: can supply syntax README.md

More TypeScript diagrams: bytedance/ui-tars-desktop · gitbookio/gitbook · invoke-ai/invokeai · yamadashy/repomix · firecrawl/open-lovable

Drawn by GitDiagram on November 9, 2026 from the repository's file tree, README and source files. Read as Markdown ·