Showing preview only (613K chars total). Download the full file or copy to clipboard to get everything.
Repository: postcss/postcss
Branch: main
Commit: 65de53745f7b
Files: 106
Total size: 582.9 KB
Directory structure:
gitextract_x9pi1t66/
├── .editorconfig
├── .github/
│ ├── CONTRIBUTING.md
│ ├── FUNDING.yml
│ └── workflows/
│ ├── release.yml
│ └── test.yml
├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── docs/
│ ├── README-cn.md
│ ├── README.md
│ ├── architecture.md
│ ├── guidelines/
│ │ ├── plugin.md
│ │ └── runner.md
│ ├── plugins.md
│ ├── source-maps.md
│ ├── syntax.md
│ └── writing-a-plugin.md
├── eslint.config.mjs
├── lib/
│ ├── at-rule.d.ts
│ ├── at-rule.js
│ ├── comment.d.ts
│ ├── comment.js
│ ├── container.d.ts
│ ├── container.js
│ ├── css-syntax-error.d.ts
│ ├── css-syntax-error.js
│ ├── declaration.d.ts
│ ├── declaration.js
│ ├── document.d.ts
│ ├── document.js
│ ├── fromJSON.d.ts
│ ├── fromJSON.js
│ ├── input.d.ts
│ ├── input.js
│ ├── lazy-result.d.ts
│ ├── lazy-result.js
│ ├── list.d.ts
│ ├── list.js
│ ├── map-generator.js
│ ├── no-work-result.d.ts
│ ├── no-work-result.js
│ ├── node.d.ts
│ ├── node.js
│ ├── parse.d.ts
│ ├── parse.js
│ ├── parser.js
│ ├── postcss.d.mts
│ ├── postcss.d.ts
│ ├── postcss.js
│ ├── postcss.mjs
│ ├── previous-map.d.ts
│ ├── previous-map.js
│ ├── processor.d.ts
│ ├── processor.js
│ ├── result.d.ts
│ ├── result.js
│ ├── root.d.ts
│ ├── root.js
│ ├── rule.d.ts
│ ├── rule.js
│ ├── stringifier.d.ts
│ ├── stringifier.js
│ ├── stringify.d.ts
│ ├── stringify.js
│ ├── symbols.js
│ ├── terminal-highlight.js
│ ├── tokenize.js
│ ├── warn-once.js
│ ├── warning.d.ts
│ └── warning.js
├── package.json
├── patches/
│ └── yargs@17.7.2.patch
├── test/
│ ├── at-rule.test.ts
│ ├── comment.test.ts
│ ├── container.test.ts
│ ├── css-syntax-error.test.ts
│ ├── declaration.test.ts
│ ├── document.test.ts
│ ├── errors.ts
│ ├── fromJSON.test.ts
│ ├── input.test.ts
│ ├── integration.js
│ ├── lazy-result.test.ts
│ ├── list.test.ts
│ ├── location.test.ts
│ ├── map.test.ts
│ ├── no-work-result.test.ts
│ ├── node.test.ts
│ ├── old-node.js
│ ├── parse.test.ts
│ ├── postcss.test.ts
│ ├── previous-map.test.ts
│ ├── processor.test.ts
│ ├── result.test.ts
│ ├── root.test.ts
│ ├── rule.test.ts
│ ├── stringifier.test.js
│ ├── stringify.test.ts
│ ├── tokenize.test.js
│ ├── types.ts
│ ├── version.js
│ ├── visitor.test.ts
│ └── warning.test.ts
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contributing Guide to PostCSS
If you want to contribute to PostCSS, there are a few things that you should
be familiar with.
## Adding Your Plugin to the List
If you created or found a plugin and want to add it to the PostCSS plugins list
follow these simple steps:
PR should not change plugins defined in README — it only contains favorite plugins
moderated by the PostCSS author.
Plugins submitted by the community are located in [`docs/plugins`].
* **Keep plugins ordered**
Be sure that a plugin is not already present and find a suitable position
for it in alphabetical order.
However plugins with `postcss-` prefix should come first.
* **Check spelling**
Before submitting a PR make sure the spelling check is passing.
To run the check use `npm test`.
If it fails with an unknown word error, add it as a word
to `.yaspellerrc` dictionary.
* **Check PostCSS plugin guidelines**
The suggested plugin should match plugin [guidelines].
- **Provide link to suggested plugin**
Make sure your pull request description contains a link to the plugin
you want to add.
[`docs/plugins`]: https://github.com/postcss/postcss/blob/main/docs/plugins.md
[guidelines]: https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md
## TypeScript Declaration Improvements
If you found a bug or want to add certain improvements to types declaration file:
* **Check current TypeScript styling**
Be sure that your changes match TypeScript styling rules defined in typings file.
* We use classes for existing JS classes like `Stringifier`.
* Namespaces used for separating functions related to the same subject.
* Interfaces used for defining custom types.
Make sure you read through declaration file writing [best practices]
by the TypeScript team.
[best practices]: https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html
## Core Development
If you want to add new features or fix existing issues
- **Become familiar with PostCSS architecture**
For a gentle intro to PostCSS architecture look through our [guide].
[guide]: https://github.com/postcss/postcss/blob/main/docs/architecture.md
================================================
FILE: .github/FUNDING.yml
================================================
open_collective: postcss
tidelift: npm/postcss
github: ai
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
push:
tags:
- '*'
permissions:
contents: write
jobs:
release:
name: Release On Tag
if: startsWith(github.ref, 'refs/tags/')
runs-on: ubuntu-latest
steps:
- name: Checkout the repository
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
- name: Extract the changelog
id: changelog
run: |
TAG_NAME=${GITHUB_REF/refs\/tags\//}
READ_SECTION=false
CHANGELOG=""
while IFS= read -r line; do
if [[ "$line" =~ ^#+\ +(.*) ]]; then
if [[ "${BASH_REMATCH[1]}" == "$TAG_NAME" ]]; then
READ_SECTION=true
elif [[ "$READ_SECTION" == true ]]; then
break
fi
elif [[ "$READ_SECTION" == true ]]; then
CHANGELOG+="$line"$'\n'
fi
done < "CHANGELOG.md"
CHANGELOG=$(echo "$CHANGELOG" | awk '/./ {$1=$1;print}')
echo "changelog_content<<EOF" >> $GITHUB_OUTPUT
echo "$CHANGELOG" >> $GITHUB_OUTPUT
echo "EOF" >> $GITHUB_OUTPUT
- name: Create the release
if: steps.changelog.outputs.changelog_content != ''
uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
with:
name: ${{ github.ref_name }}
body: '${{ steps.changelog.outputs.changelog_content }}'
draft: false
prerelease: false
================================================
FILE: .github/workflows/test.yml
================================================
name: Test
on:
push:
branches:
- main
pull_request:
permissions:
contents: read
jobs:
full:
name: Node.js Latest Full
runs-on: ubuntu-latest
steps:
- name: Checkout the repository
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
- name: Install pnpm
uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
with:
version: 10
- name: Install Node.js
uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
with:
node-version: 25
cache: pnpm
- name: Install dependencies
run: pnpm install --ignore-scripts
- name: Run tests
run: pnpm test
short:
runs-on: ubuntu-latest
strategy:
matrix:
node-version:
- 24
- 22
- 20
- 18
name: Node.js ${{ matrix.node-version }} Quick
steps:
- name: Checkout the repository
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
- name: Install pnpm
uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
with:
version: 10
- name: Install Node.js ${{ matrix.node-version }}
uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
with:
node-version: ${{ matrix.node-version }}
cache: pnpm
- name: Install dependencies
run: pnpm install --ignore-scripts
- name: Run unit tests
run: pnpm run unit
old:
runs-on: ubuntu-latest
strategy:
matrix:
node-version:
- 16
- 14
- 12
- 10
name: Node.js ${{ matrix.node-version }} Quick
steps:
- name: Checkout the repository
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
- name: Install pnpm
uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
with:
version: 3
env:
ACTIONS_ALLOW_UNSECURE_COMMANDS: true
- name: Install Node.js ${{ matrix.node-version }}
uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
with:
node-version: ${{ matrix.node-version }}
- name: Install dependencies
run: pnpm install --ignore-scripts
- name: Downgrade TypeScript
run: pnpm install typescript@4
- name: Run unit tests
run: pnpm run old
windows:
runs-on: windows-latest
name: Windows Quick
steps:
- name: Checkout the repository
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
- name: Install pnpm
uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
with:
version: 10
- name: Install Node.js LTS
uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
with:
node-version: 24
cache: pnpm
- name: Install dependencies
run: pnpm install --ignore-scripts
- name: Run unit tests
run: pnpm run unit
================================================
FILE: .gitignore
================================================
node_modules/
coverage/
docs/api/index.html
docs/api/assets/
================================================
FILE: .npmignore
================================================
coverage/
test/
docs/
tsconfig.json
eslint.config.mjs
patches
================================================
FILE: CHANGELOG.md
================================================
# Change Log
This project adheres to [Semantic Versioning](https://semver.org/).
## 8.5.8
* Fixed `Processor#version`.
## 8.5.7
* Improved source map annotation cleaning performance (by CodeAnt AI).
## 8.5.6
* Fixed `ContainerWithChildren` type discriminating (by @Goodwine).
## 8.5.5
* Fixed `package.json`→`exports` compatibility with some tools (by @JounQin).
## 8.5.4
* Fixed Parcel compatibility issue (by @git-sumitchaudhary).
## 8.5.3
* Added more details to `Unknown word` error (by @hiepxanh).
* Fixed types (by @romainmenke).
* Fixed docs (by @catnipan).
## 8.5.2
* Fixed end position of rules with semicolon (by @romainmenke).
## 8.5.1
* Fixed backwards compatibility for complex cases (by @romainmenke).
## 8.5 “Duke Alloces”
* Added `Input#document` for sources like CSS-in-JS or HTML (by @romainmenke).
## 8.4.49
* Fixed custom syntax without `source.offset` (by @romainmenke).
## 8.4.48
* Fixed position calculation in error/warnings methods (by @romainmenke).
## 8.4.47
* Removed debug code.
## 8.4.46
* Fixed `Cannot read properties of undefined (reading 'before')`.
## 8.4.45
* Removed unnecessary fix which could lead to infinite loop.
## 8.4.44
* Another way to fix `markClean is not a function` error.
## 8.4.43
* Fixed `markClean is not a function` error.
## 8.4.42
* Fixed CSS syntax error on long minified files (by @varpstar).
## 8.4.41
* Fixed types (by @nex3 and @querkmachine).
* Cleaned up RegExps (by @bluwy).
## 8.4.40
* Moved to getter/setter in nodes types to help Sass team (by @nex3).
## 8.4.39
* Fixed `CssSyntaxError` types (by @romainmenke).
## 8.4.38
* Fixed `endIndex: 0` in errors and warnings (by @romainmenke).
## 8.4.37
* Fixed `original.column are not numbers` error in another case.
## 8.4.36
* Fixed `original.column are not numbers` error on broken previous source map.
## 8.4.35
* Avoid `!` in `node.parent.nodes` type.
* Allow to pass `undefined` to node adding method to simplify types.
## 8.4.34
* Fixed `AtRule#nodes` type (by Tim Weißenfels).
* Cleaned up code (by Dmitry Kirillov).
## 8.4.33
* Fixed `NoWorkResult` behavior difference with normal mode (by Romain Menke).
* Fixed `NoWorkResult` usage conditions (by @ahmdammarr).
## 8.4.32
* Fixed `postcss().process()` types (by Andrew Ferreira).
## 8.4.31
* Fixed `\r` parsing to fix CVE-2023-44270.
## 8.4.30
* Improved source map performance (by Romain Menke).
## 8.4.29
* Fixed `Node#source.offset` (by Ido Rosenthal).
* Fixed docs (by Christian Oliff).
## 8.4.28
* Fixed `Root.source.end` for better source map (by Romain Menke).
* Fixed `Result.root` types when `process()` has no parser.
## 8.4.27
* Fixed `Container` clone methods types.
## 8.4.26
* Fixed clone methods types.
## 8.4.25
* Improve stringify performance (by Romain Menke).
* Fixed docs (by @vikaskaliramna07).
## 8.4.24
* Fixed `Plugin` types.
## 8.4.23
* Fixed warnings in TypeDoc.
## 8.4.22
* Fixed TypeScript support with `node16` (by Remco Haszing).
## 8.4.21
* Fixed `Input#error` types (by Aleks Hudochenkov).
## 8.4.20
* Fixed source map generation for childless at-rules like `@layer`.
## 8.4.19
* Fixed whitespace preserving after AST transformations (by Romain Menke).
## 8.4.18
* Fixed an error on `absolute: true` with empty `sourceContent` (by Rene Haas).
## 8.4.17
* Fixed `Node.before()` unexpected behavior (by Romain Menke).
* Added TOC to docs (by Mikhail Dedov).
## 8.4.16
* Fixed `Root` AST migration.
## 8.4.15
* Fixed AST normalization after using custom parser with old PostCSS AST.
## 8.4.14
* Print “old plugin API” warning only if plugin was used (by @zardoy).
## 8.4.13
* Fixed `append()` error after using `.parent` (by Jordan Pittman).
## 8.4.12
* Fixed `package.funding` to have same value between all PostCSS packages.
## 8.4.11
* Fixed `Declaration#raws.value` type.
## 8.4.10
* Fixed `package.funding` URL format.
## 8.4.9
* Fixed `package.funding` (by Álvaro Mondéjar).
## 8.4.8
* Fixed end position in empty Custom Properties.
## 8.4.7
* Fixed `Node#warn()` type (by Masafumi Koba).
* Fixed comment removal in values after `,`.
## 8.4.6
* Prevented comment removing when it change meaning of CSS.
* Fixed parsing space in last semicolon-less CSS Custom Properties.
* Fixed comment cleaning in CSS Custom Properties with space.
* Fixed throwing an error on `.root` access for plugin-less case.
## 8.4.5
* Fixed `raws` types to make object extendable (by James Garbutt).
* Moved from Yarn 1 to pnpm.
## 8.4.4
* Fixed absolute path in source map on zero plugins mode.
## 8.4.3
* Fixed `this.css.replace is not a function` error.
## 8.4.2
* Fixed previous source map support in zero plugins mode.
## 8.4.1
* Fixed `Stringifier` types (by James Garbutt).
## 8.4 “President Camio”
* Added ranges for errors and warnings (by Adaline Valentina Simonian).
* Added `Stringifier` types (by James Garbutt).
* Added `Processor` types.
* Removed `PostCSS does nothing` warning by lazy parser (Bogdan Dolin).
* Fixed `Node#walkRules()` types (by Aleks Hudochenkov).
* Fixed types `Root` and `Document` in result values (by James Garbutt).
* Reduced npm install size by 0.5 MB.
* Moved tests from Jest to `uvu` (by Andrey Kim).
* Fixed docs (by Paul Shryock).
## 8.3.11
* Remove debugging code.
## 8.3.10
* Fixed `Maximum call stack` issue of some source maps (by Yeting Li).
## 8.3.9
* Replaced `nanocolors` to `picocolors`.
* Reduced package size.
## 8.3.8
* Update `nanocolors`.
## 8.3.7
* Replaced `colorette` to `nanocolors`.
* Added bug field to `package.json` (by Christian Oliff).
* Improved docs (by Andrew Bruce and Paul Shryock).
## 8.3.6
* Fixed column in `missed semicolon` error (by @Gusted).
## 8.3.5
* Fixed broken AST detection.
## 8.3.4
* Fixed broken AST detection.
## 8.3.3
* Fixed broken AST on `postcss` dependency duplication in custom parsers.
## 8.3.2
* Update changelog.
## 8.3.1
* Fixed false positives `PostCSS does nothing` warning on `syntax` option.
## 8.3 “Duke Murmur”
* Added `Node#assign()` shortcut (by Jonathan Neal).
* Added experimental `Document` node to AST (by Aleks Hudochenkov).
* Moved to faster fork of `source-map` (by Valentin Semirulnik).
## 8.2.15
* Fixed `list` type definitions (by @n19htz).
## 8.2.14
* Removed `source-map` from client-side bundle (by Barak Igal).
## 8.2.13
* Fixed ReDoS vulnerabilities in source map parsing (by Yeting Li).
## 8.2.12
* Fixed `package.json` exports.
## 8.2.11
* Fixed `DEP0148` warning in Node.js 16.
* Fixed docs (by @semiromid).
## 8.2.10
* Fixed ReDoS vulnerabilities in source map parsing.
* Fixed webpack 5 support (by Barak Igal).
* Fixed docs (by Roeland Moors).
## 8.2.9
* Exported `NodeErrorOptions` type (by Rouven Weßling).
## 8.2.8
* Fixed browser builds in webpack 4 (by Matt Jones).
## 8.2.7
* Fixed browser builds in webpack 5 (by Matt Jones).
## 8.2.6
* Fixed `Maximum call stack size exceeded` in `Node#toJSON`.
* Fixed docs (by inokawa).
## 8.2.5
* Fixed escaped characters handling in `list.split` (by Natalie Weizenbaum).
## 8.2.4
* Added plugin name to `postcss.plugin()` warning (by Tom Williams).
* Fixed docs (by Bill Columbia).
## 8.2.3
* Fixed `JSON.stringify(Node[])` support (by Niklas Mischkulnig).
## 8.2.2
* Fixed CSS-in-JS support (by James Garbutt).
* Fixed plugin types (by Ludovico Fischer).
* Fixed `Result#warn()` types.
## 8.2.1
* Fixed `Node#toJSON()` and `postcss.fromJSON()` (by Niklas Mischkulnig).
## 8.2 “Prince Orobas”
* Added `Node#toJSON()` and `postcss.fromJSON()` (by Niklas Mischkulnig).
## 8.1.14
* Fixed parser performance regression.
## 8.1.13
* Fixed broken AST after moving nodes in visitor API.
## 8.1.12
* Fixed Autoprefixer regression.
## 8.1.11
* Added PostCSS update suggestion on unknown event in plugin.
## 8.1.10
* Fixed `LazyResult` type export (by Evan You).
* Fixed `LazyResult` type compatibility with `Promise` (by Anton Kastritskiy).
## 8.1.9
* Reduced dependencies number (by Bogdan Chadkin).
## 8.1.8
* Fixed `LazyResult` type compatibility with `Promise` (by Ludovico Fischer).
* Fixed HTTPS links in documentation.
## 8.1.7
* Fixed `import` support in TypeScript (by Remco Haszing).
## 8.1.6
* Reverted `package.exports` Node.js 15 fix.
## 8.1.5
* Fixed Node.js 15 warning (by 沈鸿飞).
## 8.1.4
* Fixed TypeScript definition (by Arthur Petrie).
## 8.1.3
* Added `package.types`.
## 8.1.2
* Fixed API docs (by Arthur Petrie).
* Improved plugin guide (by Yunus Gaziev).
* Prepared code base for Deno support (by Oscar Otero).
## 8.1.1
* Updated funding link.
## 8.1 “Duke Gemory”
* Added `Once` and `OnceExit` events.
* Fixed `Root` and `RootExit` events re-visiting.
* Fixed node re-visiting on deep children changes.
* Added docs for visitor API events.
## 8.0.9
* Replace prototype in PostCSS 7 nodes instead of recreating them.
* Added missed `Transformer` to exported types (by Pierre-Marie Dartus).
## 8.0.8
* Fix `8.0.7` regression on PostCSS 7 nodes converting (by Adam Wathan).
## 8.0.7
* Fixed compatibility issue with mixin AST with PostCSS 7 and 8 nodes.
* Added migration guide translation to Chinese to the warning.
## 8.0.6
* Fixed child adding methods in `Container`.
## 8.0.5
* Update changelog.
## 8.0.4
* Fixed `Cannot read property 'line' of null` error.
* Fixed source map support for declarations.
## 8.0.3
* Fixed client-side bundling support.
## 8.0.2
* Fixed plugin packs support.
## 8.0.1
* Updated `Processor#version`.
## 8.0 “President Ose”
* Removed support for Node.js 6.x, 8.x, 11.x, and 13.x versions.
* Removed `postcss.vendor` helpers.
* Deprecated `postcss.plugin()` API.
* Treats `sourceMap.sources` as URL instead of file path.
* Plugins and runners must have `postcss` in `peerDependencies`.
* Prohibited to extend PostCSS AST classes.
* Moved from JSDoc to TypeDoc.
* Moved unknown source from counter to random IDs.
* Added visitor API for plugins (by Alexey Bondarenko).
* Added ES modules support.
* Added named exports for public classes `const { Rule } = require('postcss)`.
* Added `position.url` to `Node#origin()` result.
* Added `opts.maps.absolute = true` option.
* Added `opts.maps.annotation = (file, root) => url` option support.
* Added `Node#source.offset` (by Ayaz Zaynutdinov).
* Added `Declaration#variable`.
* Added JSON source map support.
* Added index source map support.
* Added `Declaration#value` auto-converting to string.
* Fixed parsing `{}` in at-rule parameters.
* Fixed parsing empty Custom Properties. `--foo: ;` will have ` ` value.
* Fixed building PostCSS with Rollup (by MapGrid).
* Fixed TypeScript types.
* Fixed source map relative paths.
* Fixed calling `replaceWith` with input replaced node (by Joseph Kaptur).
* Improved “Writing a PostCSS Plugin” docs (by Alexey Bondarenko).
* Removed Babel from the project’s release process.
* Removed docs from npm package.
* Replaced `chalk` to `colorette`.
## 7.0.38
* Update `Processor#version`.
## 7.0.37
* Backport `chalk` to `nanocolors` migration.
## 7.0.36
* Backport ReDoS vulnerabilities from PostCSS 8.
## 7.0.35
* Add migration guide link to PostCSS 8 error text.
## 7.0.34
* Fix compatibility with `postcss-scss` 2.
## 7.0.33
* Add error message for PostCSS 8 plugins.
## 7.0.32
* Fix error message (by @admosity).
## 7.0.31
* Use only the latest source map annotation (by Emmanouil Zoumpoulakis).
## 7.0.30
* Fix TypeScript definition (by Natalie Weizenbaum).
## 7.0.29
* Update `Processor#version`.
## 7.0.28
* Fix TypeScript definition (by Natalie Weizenbaum).
## 7.0.27
* Fix TypeScript definition (by Natalie Weizenbaum).
## 7.0.26
* Fix TypeScript definition (by Natalie Weizenbaum).
## 7.0.25
* Fix absolute path support for Windows (by Tom Raviv).
## 7.0.24
* Fix TypeScript definition (by Keith Cirkel).
## 7.0.23
* Update `Processor#version`.
## 7.0.22
* Add funding link for `npm fund`.
## 7.0.21
* Revert passing `nodes` property to node constructor.
## 7.0.20
* Allow to pass PostCSS’s nodes in `nodes` property to node constructor.
## 7.0.19
* Fix passing `nodes` property to node constructor.
## 7.0.18
* Fix TypeScript type definitions (by Jan Buschtöns).
## 7.0.17
* Fix TypeScript type definitions (by Bob Matcuk and Jan Buschtöns).
## 7.0.16
* Revert Custom Properties fix until PostCSS 8.0.
## 7.0.15
* Fix Custom Properties support (by Ivan Solovev).
## 7.0.14
* Fix tokenizer for `postcss-less` (by Matt Lyons).
## 7.0.13
* Fix parsing regression in 7.0.12 for comments between property and value.
## 7.0.12
* Fix parsing broken CSS with two words in declaration property.
## 7.0.11
* Fix source maps on declaration semicolon (by Niklas Mischkulnig).
## 7.0.10
* Fix source maps (by Niklas Mischkulnig).
## 7.0.9
* Increase stringifing performance for non-raws AST.
## 7.0.8
* Fix TypeScript definitions (by Ankur Oberoi).
* Use `support-colors` 6.0.
## 7.0.7
* Extend `Error` in `CssSyntaxError`.
## 7.0.6
* Fix parsing files with BOM (by Veniamin Krol).
## 7.0.5
* Reduce npm package size (by Gilad Peleg).
## 7.0.4
* Fix safe parser regression.
## 7.0.3
* Fix tokenizer extendability (by Andrew Powell).
* Reduce npm package size.
## 7.0.2
* Fix warning text (by Rui Pedro M Lima).
## 7.0.1
* Fix JSDoc (by Steven Lambert).
## 7.0 “President Amy”
* Remove Node.js 9 and Node.js 4 support.
* Remove IE and “dead” browsers support for client-side Babel transpiling.
* Add CSS position on error happened inside `walk()` (by Nikhil Gaba).
* Add `LazyResult#finally` (by Igor Kamyshev).
* Add warning on calling PostCSS without plugins and syntax options.
* Reduce client-side size.
## 6.0.23
* Fix parsing nested at-rules without semicolon, params, and spaces.
* Fix docs (by Kevin Schiffer and Pat Cavit).
## 6.0.22
* Fix `Node#prev` and `Node#next` on missed parent.
## 6.0.21
* Rename Chinese docs to fix `yarnpkg.com` issue.
## 6.0.20
* Better error message on `null` as input CSS.
## 6.0.19
* Fix TypeScript definitions for source maps (by Oleh Kuchuk).
* Fix `source` field in TypeScript definitions (by Sylvain Pollet-Villard).
## 6.0.18
* Use primitive object in TypeScript definitions (by Sylvain Pollet-Villard).
## 6.0.17
* Fix parsing comment in selector between word tokens (by Oleh Kuchuk).
## 6.0.16
* Fix warning text (by Michael Keller).
## 6.0.15
* Add warning about missed `from` option on `process().then()` call.
* Add IE 10 support.
## 6.0.14
* Fix TypeScript definitions (by Jed Mao).
## 6.0.13
* Fix TypeScript definitions for case of multiple PostCSS versions
in `node_modules` (by Chris Eppstein).
* Use `source-map` 0.6.
## 6.0.12
* Don’t copy `*` hack to declaration indent.
## 6.0.11
* Add upper case `!IMPORTANT` support.
## 6.0.10
* Reduce PostCSS size in webpack bundle.
## 6.0.9
* Improve error message for plugin with old PostCSS (by Igor Adamenko).
## 6.0.8
* Fix Node.js 4.2.2 support.
## 6.0.7
* Fix base64 decoding for old Node.js and browser.
## 6.0.6
* Fix `end` position in at-rule without semicolon (by Oleh Kuchuk).
## 6.0.5
* Move Babel config from `package.json` for `node_modules` compiling cases.
## 6.0.4
* Fix parsing `;;` after rules.
* Use Chalk 2.0.
## 6.0.3
* Fix escape sequences parsing (by Oleh Kuchuk).
* Added ability to force disable colors with an environment variable.
* Improved color detection of some terminal apps.
## 6.0.2
* Keep `raws.before` on moving `Root` children to new `Root`.
## 6.0.1
* Fix parser extensibility to use it in Safe Parser.
## 6.0 “Marquis Orias”
* Remove node.js 0.12 support.
* Remove deprecated method from PostCSS 4.
* Insert methods remove child from previous parent, instead of closing.
* Insert methods and cloning doesn’t clean `raws` anymore.
* Methods `moveTo`, `moveAfter`, `moveBefore` were deprecated.
* Options was changed in `Plugin#process(css, processOptions, pluginOptions)`.
* Add stream parser to reduce memory usage (by Oleh Kuchuk).
* Add `before()`/`after()` shortcuts for `node.parent.insertBefore(node, x)`.
* Add `Rule#raws.ownSemicolon` for semicolon after templates for `@apply`.
* Use `babel-preset-env` to compile npm package.
* Remove `js-base64` from dependencies (by Roman Dvornov).
* Fix error message on single `:` in CSS.
* Move tests to Jest.
* Clean up test (by Gabriel Kalani).
## 5.2.18
* Fix TypeScript definitions for case of multiple PostCSS versions
in `node_modules` (by Chris Eppstein).
## 5.2.17
* Add `postcss-sass` suggestion to syntax error on `.sass` input.
## 5.2.16
* Better error on wrong argument in node constructor.
## 5.2.15
* Fix TypeScript definitions (by bumbleblym).
## 5.2.14
* Fix browser bundle building in webpack (by janschoenherr).
## 5.2.13
* Do not add comment to important raws.
* Fix JSDoc (by Dmitry Semigradsky).
## 5.2.12
* Fix typo in deprecation message (by Garet McKinley).
## 5.2.11
* Fix TypeScript definitions (by Jed Mao).
## 5.2.10
* Fix TypeScript definitions (by Jed Mao).
## 5.2.9
* Update TypeScript definitions (by Jed Mao).
## 5.2.8
* Fix error message (by Ben Briggs).
## 5.2.7
* Better error message on syntax object in plugins list.
## 5.2.6
* Fix `postcss.vendor` for values with spaces (by 刘祺).
## 5.2.5
* Better error message on unclosed string (by Ben Briggs).
## 5.2.4
* Improve terminal CSS syntax highlight (by Simon Lydell).
## 5.2.3
* Better color highlight in syntax error code frame.
* Fix color highlight support in old systems.
## 5.2.2
* Update `Processor#version`.
## 5.2.1
* Fix source map path for CSS without `from` option (by Michele Locati).
## 5.2 “Duke Vapula”
* Add syntax highlight to code frame in syntax error (by Andrey Popp).
* Use Babel code frame style and size in syntax error.
* Add `[` and `]` tokens to parse `[attr=;] {}` correctly.
* Add `ignoreErrors` options to tokenizer (by Andrey Popp).
* Fix error position on tab indent (by Simon Lydell).
## 5.1.2
* Suggests SCSS/Less parsers on parse errors depends on file extension.
## 5.1.1
* Fix TypeScript definitions (by Efremov Alexey).
## 5.1 “King and President Zagan”
* Add URI in source map support (by Mark Finger).
* Add `map.from` option (by Mark Finger).
* Add `<no source>` mappings for nodes without source (by Bogdan Chadkin).
* Add function value support to `map.prev` option (by Chris Montoro).
* Add declaration value type check in shortcut creating (by 刘祺).
* `Result#warn` now returns new created warning.
* Don’t call plugin creator in `postcss.plugin` call.
* Add source maps to PostCSS ES5 build.
* Add JSDoc to PostCSS classes.
* Clean npm package from unnecessary docs.
## 5.0.21
* Fix support with input source mao with `utf8` encoding name.
## 5.0.20
* Fix between raw value parsing (by David Clark).
* Update TypeScript definitions (by Jed Mao).
* Clean fake node.source after `append(string)`.
## 5.0.19
* Fix indent-based syntaxes support.
## 5.0.18
* Parse new lines according W3C CSS syntax specification.
## 5.0.17
* Fix options argument in `Node#warn` (by Ben Briggs).
* Fix TypeScript definitions (by Jed Mao).
## 5.0.16
* Fix CSS syntax error position on unclosed quotes.
## 5.0.15
* Fix `Node#clone()` on `null` value somewhere in node.
## 5.0.14
* Allow to use PostCSS in webpack bundle without JSON loader.
## 5.0.13
* Fix `index` and `word` options in `Warning#toString` (by Bogdan Chadkin).
* Fix input source content loading in errors.
* Fix map options on using `LazyResult` as input CSS.
* 100% test coverage.
* Use Babel 6.
## 5.0.12
* Allow passing a previous map with no mappings (by Andreas Lind).
## 5.0.11
* Increase plugins performance by 1.5 times.
## 5.0.10
* Fix warning from nodes without source.
## 5.0.9
* Fix source map type detection (by @asan).
## 5.0.8
* Fixed a missed step in `5.0.7` that caused the module to be published as
ES6 code.
## 5.0.7
* PostCSS now requires that node 0.12 is installed via the engines property
in package.json (by Howard Zuo).
## 5.0.6
* Fix parsing nested at-rule without semicolon (by Matt Drake).
* Trim `Declaration#value` (by Bogdan Chadkin).
## 5.0.5
* Fix multi-tokens property parsing (by Matt Drake).
## 5.0.4
* Fix start position in `Root#source`.
* Fix source map annotation, when CSS uses `\r\n` (by Mohammad Younes).
## 5.0.3
* Fix `url()` parsing.
* Fix using `selectors` in `Rule` constructor.
* Add start source to `Root` node.
## 5.0.2
* Fix `remove(index)` to be compatible with 4.x plugin.
## 5.0.1
* Fix PostCSS 4.x plugins compatibility.
* Fix type definition loading (by Jed Mao).
## 5.0 “President Valac”
* Remove `safe` option. Move Safe Parser to separate project.
* `Node#toString` does not include `before` for root nodes.
* Remove plugin returning `Root` API.
* Remove Promise polyfill for node.js 0.10.
* Deprecate `eachInside`, `eachDecl`, `eachRule`, `eachAtRule` and `eachComment`
in favor of `walk`, `walkDecls`, `walkRules`, `walkAtRules` and `walkComments`
(by Jed Mao).
* Deprecate `Container#remove` and `Node#removeSelf`
in favor of `Container#removeChild` and `Node#remove` (by Ben Briggs).
* Deprecate `Node#replace` in favor of `replaceWith` (by Ben Briggs).
* Deprecate raw properties in favor of `Node#raws` object.
* Deprecate `Node#style` in favor of `raw`.
* Deprecate `CssSyntaxError#generated` in favor of `input`.
* Deprecate `Node#cleanStyles` in favor of `cleanRaws`.
* Deprecate `Root#prevMap` in favor of `Root.source.input.map`.
* Add `syntax`, `parser` and `stringifier` options for Custom Syntaxes.
* Add stringifier option to `Node#toString`.
* Add `Result#content` alias for non-CSS syntaxes.
* Add `plugin.process(css)` shortcut to every plugin function (by Ben Briggs).
* Add multiple nodes support to insert methods (by Jonathan Neal).
* Add `Node#warn` shortcut (by Ben Briggs).
* Add `word` and `index` options to errors and warnings (by David Clark).
* Add `line`, `column` properties to `Warning`.
* Use `supports-color` library to detect color support in error output.
* Add type definitions for TypeScript plugin developers (by Jed Mao).
* `Rule#selectors` setter detects separators.
* Add `postcss.stringify` method.
* Throw descriptive errors for incorrectly formatted plugins.
* Add docs to npm release.
* Fix `url()` parsing.
* Fix Windows support (by Jed Mao).
## 4.1.16
* Fix errors without stack trace.
## 4.1.15
* Allow asynchronous plugins to change processor plugins list (by Ben Briggs).
## 4.1.14
* Fix for plugins packs defined by `postcss.plugin`.
## 4.1.13
* Fix input inlined source maps with UTF-8 encoding.
## 4.1.12
* Update Promise polyfill.
## 4.1.11
* Fix error message on wrong plugin format.
## 4.1.10
* Fix Promise behavior on sync plugin errors.
* Automatically fill `plugin` field in `CssSyntaxError`.
* Fix warning message (by Ben Briggs).
## 4.1.9
* Speed up `node.clone()`.
## 4.1.8
* Accepts `Processor` instance in `postcss()` constructor too.
## 4.1.7
* Speed up `postcss.list` (by Bogdan Chadkin).
## 4.1.6
* Fix Promise behavior on parsing error.
## 4.1.5
* Parse at-words in declaration values.
## 4.1.4
* Fix Promise polyfill dependency (by Anton Yakushev and Matija Marohnić).
## 4.1.3
* Add Promise polyfill for node.js 0.10 and IE.
## 4.1.2
* List helpers can be accessed independently `var space = postcss.list.space`.
## 4.1.1
* Show deprecated message only once.
## 4.1 “Marquis Andras”
* Asynchronous plugin support.
* Add warnings from plugins and `Result#messages`.
* Add `postcss.plugin()` to create plugins with a standard API.
* Insert nodes by CSS string.
* Show version warning message on error from an outdated plugin.
* Send `Result` instance to plugins as the second argument.
* Add `CssSyntaxError#plugin`.
* Add `CssSyntaxError#showSourceCode()`.
* Add `postcss.list` and `postcss.vendor` aliases.
* Add `Processor#version`.
* Parse wrong closing bracket.
* Parse `!important` statement with spaces and comments inside (by Ben Briggs).
* Throw an error on declaration without `prop` or `value` (by Philip Peterson).
* Fix source map mappings position.
* Add indexed source map support.
* Always set `error.generated`.
* Clean all source map annotation comments.
## 4.0.6
* Remove `babel` from released package dependencies (by Andres Suarez).
## 4.0.5
* Fix error message on double colon in declaration.
## 4.0.4
* Fix indent detection in some rare cases.
## 4.0.3
* Faster API with 6to5 Loose mode.
* Fix indexed source maps support.
## 4.0.2
* Do not copy IE hacks to code style.
## 4.0.1
* Add `source.input` to `Root` too.
## 4.0 “Duke Flauros”
* Rename `Container#childs` to `nodes`.
* Rename `PostCSS#processors` to `plugins`.
* Add `Node#replaceValues()` method.
* Add `Node#moveTo()`, `moveBefore()` and `moveAfter()` methods.
* Add `Node#cloneBefore()` and `cloneAfter()` shortcuts.
* Add `Node#next()`, `prev()` and `root()` shortcuts.
* Add `Node#replaceWith()` method.
* Add `Node#error()` method.
* Add `Container#removeAll()` method.
* Add filter argument to `eachDecl()` and `eachAtRule()`.
* Add `Node#source.input` and move `source.file` or `source.id` to `input`.
* Change code indent, when node was moved.
* Better fix code style on `Rule`, `AtRule` and `Comment` nodes changes.
* Allow to create rules and at-rules by hash shortcut in append methods.
* Add class name to CSS syntax error output.
## 3.0.7
* Fix IE filter parsing with multiple commands.
* Safer way to consume PostCSS object as plugin (by Maxime Thirouin).
## 3.0.6
* Fix missing semicolon when comment comes after last declaration.
* Fix Safe Mode declaration parsing on unclosed blocks.
## 3.0.5
* Fix parser to support difficult cases with backslash escape and brackets.
* Add `CssSyntaxError#stack` (by Maxime Thirouin).
## 3.0.4
* Fix Safe Mode on unknown word before declaration.
## 3.0.3
* Increase tokenizer speed (by Roman Dvornov).
## 3.0.2
* Fix empty comment parsing.
* Fix `Root#normalize` in some inserts.
## 3.0.1
* Fix Rhino JS runtime support.
* Typo in deprecated warning (by Maxime Thirouin).
## 3.0 “Marquis Andrealphus”
* New parser, which become the fastest ever CSS parser written in JavaScript.
* Parser can now parse declarations and rules in one parent (like in `@page`)
and nested declarations for plugins like `postcss-nested`.
* Child nodes array is now in `childs` property, instead of `decls` and `rules`.
* `map.inline` and `map.sourcesContent` options are now `true` by default.
* Fix iterators (`each`, `insertAfter`) on children array changes.
* Use previous source map to show origin source of CSS syntax error.
* Use 6to5 ES6 compiler, instead of ES6 Transpiler.
* Use code style for manually added rules from existing rules.
* Use `from` option from previous source map `file` field.
* Set `to` value to `from` if `to` option is missing.
* Use better node source name when missing `from` option.
* Show a syntax error when `;` is missed between declarations.
* Allow to pass `PostCSS` instance or list of plugins to `use()` method.
* Allow to pass `Result` instance to `process()` method.
* Trim Unicode BOM on source maps parsing.
* Parse at-rules without spaces like `@import"file"`.
* Better previous `sourceMappingURL` annotation comment cleaning.
* Do not remove previous `sourceMappingURL` comment on `map.annotation: false`.
* Parse nameless at-rules in Safe Mode.
* Fix source map generation for nodes without source.
* Fix next child `before` if `Root` first child got removed.
## 2.2.6
* Fix map generation for nodes without source (by Josiah Savary).
## 2.2.5
* Fix source map with BOM marker support (by Mohammad Younes).
* Fix source map paths (by Mohammad Younes).
## 2.2.4
* Fix `prepend()` on empty `Root`.
## 2.2.3
* Allow to use object shortcut in `use()` with functions like `autoprefixer`.
## 2.2.2
* Add shortcut to set processors in `use()` via object with `.postcss` property.
## 2.2.1
* Send `opts` from `Processor#process(css, opts)` to processors.
## 2.2 “Marquis Cimeies”
* Use GNU style syntax error messages.
* Add `Node#replace` method.
* Add `CssSyntaxError#reason` property.
## 2.1.2
* Fix UTF-8 support in inline source map.
* Fix source map `sourcesContent` if there is no `from` and `to` options.
## 2.1.1
* Allow to miss `to` and `from` options for inline source maps.
* Add `Node#source.id` if file name is unknown.
* Better detect splitter between rules in CSS concatenation tools.
* Automatically clone node in insert methods.
## 2.1 “King Amdusias”
* Change Traceur ES6 compiler to ES6 Transpiler.
* Show broken CSS line in syntax error.
## 2.0 “King Belial”
* Project was rewritten from CoffeeScript to ES6.
* Add Safe Mode to works with live input or with hacks from legacy code.
* More safer parser to pass all hacks from Browserhacks.com.
* Use real properties instead of magic getter/setter for raw properties.
## 1.0 “Marquis Decarabia”
* Save previous source map for each node to support CSS concatenation
with multiple previous maps.
* Add `map.sourcesContent` option to add origin content to `sourcesContent`
inside map.
* Allow to set different place of output map in annotation comment.
* Allow to use arrays and `Root` in `Container#append` and same methods.
* Add `Root#prevMap` with information about previous map.
* Allow to use latest PostCSS from GitHub by npm.
* `Result` now is lazy and it will generate output CSS only if you use `css`
or `map` property.
* Use separated `map.prev` option to set previous map.
* Rename `inlineMap` option to `map.inline`.
* Rename `mapAnnotation` option to `map.annotation`.
* `Result#map` now return `SourceMapGenerator` object, instead of string.
* Run previous map autodetect only if input CSS contains annotation comment.
* Add `map: 'inline'` shortcut for `map: { inline: true }` option.
* `Node#source.file` now will contains absolute path.
* Clean `Declaration#between` style on node clone.
## 0.3.5
* Allow to use `Root` or `Result` as first argument in `process()`.
* Save parsed AST to `Result#root`.
## 0.3.4
* Better space symbol detect to read UTF-8 BOM correctly.
## 0.3.3
* Remove source map hacks by using new Mozilla’s `source-map` (by Simon Lydell).
## 0.3.2
* Add URI encoding support for inline source maps.
## 0.3.1
* Fix relative paths from previous source map.
* Safer space split in `Rule#selectors` (by Simon Lydell).
## 0.3 “Prince Seere”
* Add `Comment` node for comments between declarations or rules.
* Add source map annotation comment to output CSS.
* Allow to inline source map to annotation comment by data:uri.
* Fix source maps on Windows.
* Fix source maps for subdirectory (by Dmitry Nikitenko and Simon Lydell).
* Autodetect previous source map.
* Add `first` and `last` shortcuts to container nodes.
* Parse `!important` to separated property in `Declaration`.
* Allow to break iteration by returning `false`.
* Copy code style to new nodes.
* Add `eachInside` method to recursively iterate all nodes.
* Add `selectors` shortcut to get selectors array.
* Add `toResult` method to `Rule` to simplify work with several input files.
* Clean declaration’s `value`, rule’s `selector` and at-rule’s `params`
by storing spaces in `between` property.
## 0.2 “Duke Dantalion”
* Add source map support.
* Add shortcuts to create nodes.
* Method `process()` now returns object with `css` and `map` keys.
* Origin CSS file option was renamed from `file` to `from`.
* Rename `Node#remove()` method to `removeSelf()` to fix name conflict.
* Node source was moved to `source` property with origin file
and node end position.
* You can set own CSS generate function.
## 0.1 “Count Andromalius”
* Initial release.
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright 2013 Andrey Sitnik <andrey@sitnik.ru>
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
# PostCSS
<img align="right" width="95" height="95"
alt="Philosopher’s stone, logo of PostCSS"
src="https://postcss.org/logo.svg">
PostCSS is a tool for transforming styles with JS plugins.
These plugins can lint your CSS, support variables and mixins,
transpile future CSS syntax, inline images, and more.
PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba,
and JetBrains. The [Autoprefixer] and [Stylelint] PostCSS plugins are some of the most popular CSS tools.
---
<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" /> Built by
<b><a href="https://evilmartians.com/devtools?utm_source=postcss&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, go-to agency for <b>developer tools</b>.
---
[Abstract Syntax Tree]: https://en.wikipedia.org/wiki/Abstract_syntax_tree
[Evil Martians]: https://evilmartians.com/?utm_source=postcss
[Autoprefixer]: https://github.com/postcss/autoprefixer
[Stylelint]: https://stylelint.io/
[plugins]: https://github.com/postcss/postcss#plugins
## Sponsorship
PostCSS needs your support. We are accepting donations
[at Open Collective](https://opencollective.com/postcss/).
<a href="https://tailwindcss.com/">
<img src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo.svg"
alt="Sponsored by Tailwind CSS" width="213" height="50"></a>
<a href="https://themeisle.com/">
<img src="https://mllj2j8xvfl0.i.optimole.com/d0cOXWA.3970~373ad/w:auto/h:auto/q:90/https://s30246.pcdn.co/wp-content/uploads/2019/03/logo.png"
alt="Sponsored by ThemeIsle" width="171" height="56"></a>
## Plugins
PostCSS takes a CSS file and provides an API to analyze and modify its rules
(by transforming them into an [Abstract Syntax Tree]).
This API can then be used by [plugins] to do a lot of useful things,
e.g., to find errors automatically, or to insert vendor prefixes.
Currently, PostCSS has more than 200 plugins. You can find all of the plugins
in the [plugins list]. Below is a list of our favorite plugins —
the best demonstrations of what can be built on top of PostCSS.
If you have any new ideas, [PostCSS plugin development] is really easy.
[plugins list]: https://github.com/postcss/postcss/blob/main/docs/plugins.md
### Solve Global CSS Problem
* [`postcss-use`] allows you to explicitly set PostCSS plugins within CSS
and execute them only for the current file.
* [`postcss-modules`] and [`react-css-modules`] automatically isolate
selectors within components.
* [`postcss-autoreset`] is an alternative to using a global reset
that is better for isolatable components.
* [`postcss-initial`] adds `all: initial` support, which resets
all inherited styles.
* [`cq-prolyfill`] adds container query support, allowing styles that respond
to the width of the parent.
### Use Future CSS, Today
* [`autoprefixer`] adds vendor prefixes, using data from Can I Use.
* [`postcss-preset-env`] allows you to use future CSS features today.
### Better CSS Readability
* [`postcss-nested`] unwraps nested rules the way Sass does.
* [`postcss-sorting`] sorts the content of rules and at-rules.
* [`postcss-utilities`] includes the most commonly used shortcuts and helpers.
* [`short`] adds and extends numerous shorthand properties.
### Images and Fonts
* [`postcss-url`] postcss plugin to rebase url(), inline or copy asset.
* [`postcss-sprites`] generates image sprites.
* [`font-magician`] generates all the `@font-face` rules needed in CSS.
* [`postcss-inline-svg`] allows you to inline SVG and customize its styles.
* [`postcss-write-svg`] allows you to write simple SVG directly in your CSS.
* [`webp-in-css`] to use WebP image format in CSS background.
* [`avif-in-css`] to use AVIF image format in CSS background.
### Linters
* [`stylelint`] is a modular stylesheet linter.
* [`stylefmt`] is a tool that automatically formats CSS
according `stylelint` rules.
* [`doiuse`] lints CSS for browser support, using data from Can I Use.
* [`colorguard`] helps you maintain a consistent color palette.
### Other
* [`cssnano`] is a modular CSS minifier.
* [`lost`] is a feature-rich `calc()` grid system.
* [`rtlcss`] mirrors styles for right-to-left locales.
[PostCSS plugin development]: https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
[`postcss-inline-svg`]: https://github.com/TrySound/postcss-inline-svg
[`postcss-preset-env`]: https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
[`react-css-modules`]: https://github.com/gajus/react-css-modules
[`postcss-autoreset`]: https://github.com/maximkoretskiy/postcss-autoreset
[`postcss-write-svg`]: https://github.com/csstools/postcss-write-svg
[`postcss-utilities`]: https://github.com/ismamz/postcss-utilities
[`postcss-initial`]: https://github.com/maximkoretskiy/postcss-initial
[`postcss-sprites`]: https://github.com/2createStudio/postcss-sprites
[`postcss-modules`]: https://github.com/outpunk/postcss-modules
[`postcss-sorting`]: https://github.com/hudochenkov/postcss-sorting
[`font-magician`]: https://github.com/csstools/postcss-font-magician
[`autoprefixer`]: https://github.com/postcss/autoprefixer
[`cq-prolyfill`]: https://github.com/ausi/cq-prolyfill
[`postcss-url`]: https://github.com/postcss/postcss-url
[`postcss-use`]: https://github.com/postcss/postcss-use
[`css-modules`]: https://github.com/css-modules/css-modules
[`webp-in-css`]: https://github.com/ai/webp-in-css
[`avif-in-css`]: https://github.com/nucliweb/avif-in-css
[`colorguard`]: https://github.com/SlexAxton/css-colorguard
[`stylelint`]: https://github.com/stylelint/stylelint
[`stylefmt`]: https://github.com/morishitter/stylefmt
[`cssnano`]: https://cssnano.github.io/cssnano/
[`postcss-nested`]: https://github.com/postcss/postcss-nested
[`doiuse`]: https://github.com/anandthakker/doiuse
[`rtlcss`]: https://github.com/MohammadYounes/rtlcss
[`short`]: https://github.com/csstools/postcss-short
[`lost`]: https://github.com/peterramsing/lost
## Syntaxes
PostCSS can transform styles in any syntax, not just CSS.
If there is not yet support for your favorite syntax,
you can write a parser and/or stringifier to extend PostCSS.
* [`sugarss`] is a indent-based syntax like Sass or Stylus.
* [`postcss-syntax`] switch syntax automatically by file extensions.
* [`postcss-html`] parsing styles in `<style>` tags of HTML-like files.
* [`postcss-markdown`] parsing styles in code blocks of Markdown files.
* [`postcss-styled-syntax`] parses styles in template literals CSS-in-JS
like styled-components.
* [`postcss-jsx`] parsing CSS in template / object literals of source files.
* [`postcss-styled`] parsing CSS in template literals of source files.
* [`postcss-scss`] allows you to work with SCSS
*(but does not compile SCSS to CSS)*.
* [`postcss-sass`] allows you to work with Sass
*(but does not compile Sass to CSS)*.
* [`postcss-less`] allows you to work with Less
*(but does not compile LESS to CSS)*.
* [`postcss-less-engine`] allows you to work with Less
*(and DOES compile LESS to CSS using true Less.js evaluation)*.
* [`postcss-js`] allows you to write styles in JS or transform
React Inline Styles, Radium or JSS.
* [`postcss-safe-parser`] finds and fixes CSS syntax errors.
* [`midas`] converts a CSS string to highlighted HTML.
[`postcss-styled-syntax`]: https://github.com/hudochenkov/postcss-styled-syntax
[`postcss-less-engine`]: https://github.com/Crunch/postcss-less
[`postcss-safe-parser`]: https://github.com/postcss/postcss-safe-parser
[`postcss-syntax`]: https://github.com/gucong3000/postcss-syntax
[`postcss-html`]: https://github.com/ota-meshi/postcss-html
[`postcss-markdown`]: https://github.com/ota-meshi/postcss-markdown
[`postcss-jsx`]: https://github.com/gucong3000/postcss-jsx
[`postcss-styled`]: https://github.com/gucong3000/postcss-styled
[`postcss-scss`]: https://github.com/postcss/postcss-scss
[`postcss-sass`]: https://github.com/AleshaOleg/postcss-sass
[`postcss-less`]: https://github.com/webschik/postcss-less
[`postcss-js`]: https://github.com/postcss/postcss-js
[`sugarss`]: https://github.com/postcss/sugarss
[`midas`]: https://github.com/ben-eb/midas
## Articles
* [Some things you may think about PostCSS… and you might be wrong](https://www.julian.io/articles/postcss.html)
* [What PostCSS Really Is; What It Really Does](https://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/)
* [PostCSS Guides](https://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889)
More articles and videos you can find on [awesome-postcss](https://github.com/jjaderg/awesome-postcss) list.
## Books
* [Mastering PostCSS for Web Design](https://www.packtpub.com/web-development/mastering-postcss-web-design) by Alex Libby, Packt. (June 2016)
## Usage
You can start using PostCSS in just two steps:
1. Find and add PostCSS extensions for your build tool.
2. [Select plugins] and add them to your PostCSS process.
[Select plugins]: https://postcss.org/docs/postcss-plugins
### CSS-in-JS
The best way to use PostCSS with CSS-in-JS is [`astroturf`].
Add its loader to your `webpack.config.js`:
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'postcss-loader'],
},
{
test: /\.jsx?$/,
use: ['babel-loader', 'astroturf/loader'],
}
]
}
}
```
Then create `postcss.config.js`:
```js
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
}
module.exports = config
```
[`astroturf`]: https://github.com/4Catalyzer/astroturf
### Parcel
[Parcel] has built-in PostCSS support. It already uses Autoprefixer
and cssnano. If you want to change plugins, create `postcss.config.js`
in project’s root:
```js
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
}
module.exports = config
```
Parcel will even automatically install these plugins for you.
> Please, be aware of [the several issues in Version 1](https://github.com/parcel-bundler/parcel/labels/CSS%20Preprocessing). Notice, [Version 2](https://github.com/parcel-bundler/parcel/projects/5) may resolve the issues via [issue #2157](https://github.com/parcel-bundler/parcel/issues/2157).
[Parcel]: https://parceljs.org
### Webpack
Use [`postcss-loader`] in `webpack.config.js`:
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader'
}
]
}
]
}
}
```
Then create `postcss.config.js`:
```js
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
}
module.exports = config
```
[`postcss-loader`]: https://github.com/postcss/postcss-loader
### Gulp
Use [`gulp-postcss`] and [`gulp-sourcemaps`].
```js
gulp.task('css', () => {
const postcss = require('gulp-postcss')
const sourcemaps = require('gulp-sourcemaps')
return gulp.src('src/**/*.css')
.pipe( sourcemaps.init() )
.pipe( postcss([ require('autoprefixer'), require('postcss-nested') ]) )
.pipe( sourcemaps.write('.') )
.pipe( gulp.dest('build/') )
})
```
[`gulp-sourcemaps`]: https://github.com/floridoo/gulp-sourcemaps
[`gulp-postcss`]: https://github.com/postcss/gulp-postcss
### npm Scripts
To use PostCSS from your command-line interface or with npm scripts
there is [`postcss-cli`].
```sh
postcss --use autoprefixer -o main.css css/*.css
```
[`postcss-cli`]: https://github.com/postcss/postcss-cli
### Browser
If you want to compile CSS string in browser (for instance, in live edit
tools like CodePen), just use [Browserify] or [webpack]. They will pack
PostCSS and plugins files into a single file.
To apply PostCSS plugins to React Inline Styles, JSS, Radium
and other [CSS-in-JS], you can use [`postcss-js`] and transforms style objects.
```js
const postcss = require('postcss-js')
const prefixer = postcss.sync([ require('autoprefixer') ])
prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
```
[`postcss-js`]: https://github.com/postcss/postcss-js
[Browserify]: https://browserify.org/
[CSS-in-JS]: https://github.com/MicheleBertoli/css-in-js
[webpack]: https://webpack.github.io/
### Runners
* **Grunt**: [`@lodder/grunt-postcss`](https://github.com/C-Lodder/grunt-postcss)
* **HTML**: [`posthtml-postcss`](https://github.com/posthtml/posthtml-postcss)
* **Stylus**: [`poststylus`](https://github.com/seaneking/poststylus)
* **Rollup**: [`rollup-plugin-postcss`](https://github.com/egoist/rollup-plugin-postcss)
* **Brunch**: [`postcss-brunch`](https://github.com/brunch/postcss-brunch)
* **Broccoli**: [`broccoli-postcss`](https://github.com/jeffjewiss/broccoli-postcss)
* **Meteor**: [`postcss`](https://atmospherejs.com/juliancwirko/postcss)
* **ENB**: [`enb-postcss`](https://github.com/awinogradov/enb-postcss)
* **Taskr**: [`taskr-postcss`](https://github.com/lukeed/taskr/tree/master/packages/postcss)
* **Start**: [`start-postcss`](https://github.com/start-runner/postcss)
* **Connect/Express**: [`postcss-middleware`](https://github.com/jedmao/postcss-middleware)
* **Svelte Preprocessor**: [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md#postcss-sugarss)
### JS API
For other environments, you can use the JS API:
```js
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
const postcssNested = require('postcss-nested')
const fs = require('fs')
fs.readFile('src/app.css', (err, css) => {
postcss([autoprefixer, postcssNested])
.process(css, { from: 'src/app.css', to: 'dest/app.css' })
.then(result => {
fs.writeFile('dest/app.css', result.css, () => true)
if ( result.map ) {
fs.writeFile('dest/app.css.map', result.map.toString(), () => true)
}
})
})
```
Read the [PostCSS API documentation] for more details about the JS API.
All PostCSS runners should pass [PostCSS Runner Guidelines].
[PostCSS Runner Guidelines]: https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md
[PostCSS API documentation]: https://postcss.org/api/
### Options
Most PostCSS runners accept two parameters:
* An array of plugins.
* An object of options.
Common options:
* `syntax`: an object providing a syntax parser and a stringifier.
* `parser`: a special syntax parser (for example, [SCSS]).
* `stringifier`: a special syntax output generator (for example, [Midas]).
* `map`: [source map options].
* `from`: the input file name (most runners set it automatically).
* `to`: the output file name (most runners set it automatically).
[source map options]: https://postcss.org/api/#sourcemapoptions
[Midas]: https://github.com/ben-eb/midas
[SCSS]: https://github.com/postcss/postcss-scss
### Treat Warnings as Errors
In some situations it might be helpful to fail the build on any warning
from PostCSS or one of its plugins. This guarantees that no warnings
go unnoticed, and helps to avoid bugs. While there is no option to enable
treating warnings as errors, it can easily be done
by adding `postcss-fail-on-warn` plugin in the end of PostCSS plugins:
```js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-fail-on-warn')
]
}
```
## Editors & IDE Integration
### VS Code
* [`csstools.postcss`] adds PostCSS support.
* [`smallcase.postcssense`] adds Intellisense for global classes
[`csstools.postcss`]: https://marketplace.visualstudio.com/items?itemName=csstools.postcss
[`smallcase.postcssense`]: https://marketplace.visualstudio.com/items?itemName=smallcase.postcssense
### Sublime Text
* [`Syntax-highlighting-for-PostCSS`] adds PostCSS highlight.
[`Syntax-highlighting-for-PostCSS`]: https://github.com/hudochenkov/Syntax-highlighting-for-PostCSS
### Vim
* [`postcss.vim`] adds PostCSS highlight.
[`postcss.vim`]: https://github.com/stephenway/postcss.vim
### WebStorm
To get support for PostCSS in WebStorm and other JetBrains IDEs you need to install [this plugin][jb-plugin].
[jb-plugin]: https://plugins.jetbrains.com/plugin/8578-postcss
## Security Contact
To report a security vulnerability, please use the [Tidelift security contact].
Tidelift will coordinate the fix and disclosure.
[Tidelift security contact]: https://tidelift.com/security
## For Enterprise
Available as part of the Tidelift Subscription.
The maintainers of `postcss` and thousands of other packages are working
with Tidelift to deliver commercial support and maintenance for the open source
dependencies you use to build your applications. Save time, reduce risk,
and improve code health, while paying the maintainers of the exact dependencies
you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-postcss?utm_source=npm-postcss&utm_medium=referral&utm_campaign=enterprise&utm_term=repo)
================================================
FILE: docs/README-cn.md
================================================
# PostCSS
<img align="right" width="95" height="95"
alt="哲学家的石头 - PostCSS 的 logo"
src="https://postcss.org/logo.svg">
PostCSS 是一个允许使用 JS 插件转换样式的工具。
这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，
编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。
PostCSS 在工业界被广泛地应用，其中不乏很多有名的行业领导者，如：维基百科，Twitter，阿里巴巴，
JetBrains。PostCSS 的 [Autoprefixer] 插件是最流行的 CSS 处理工具之一。
PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个[抽象语法树]的方式）。在这之后，这个 API 便可被许多[插件]利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。
**Twitter 账号:** [@postcss](https://twitter.com/postcss)
如果需要 PostCSS 商业支持（如咨询，提升公司的前端文化，
PostCSS 插件），请联系 [Evil Martians](https://evilmartians.com/?utm_source=postcss)
邮箱 <surrender@evilmartians.com>。
[抽象语法树]: https://zh.wikipedia.org/wiki/%E6%8A%BD%E8%B1%A1%E8%AA%9E%E6%B3%95%E6%A8%B9
[Autoprefixer]: https://github.com/postcss/autoprefixer
[插件]: https://github.com/postcss/postcss/blob/main/README-cn.md#%E6%8F%92%E4%BB%B6
<a href="https://evilmartians.com/?utm_source=postcss">
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
alt="由 Evil Martians 赞助" width="236" height="54">
</a>
## 插件
截止到目前，PostCSS 有 200 多个插件。你可以在 [插件列表] 找到它们。
下方的列表是我们最喜欢的插件 - 它们很好地演示了我们可以用 PostCSS 做些什么。
如果你有任何新的想法，[开发 PostCSS 插件] 非常简单易上手。
[插件列表]: https://github.com/postcss/postcss/blob/main/docs/plugins.md
### 解决全局 CSS 的问题
* [`postcss-use`] 允许你在 CSS 里明确地设置 PostCSS 插件，并且只在当前文件执行它们。
* [`postcss-modules`] 和 [`react-css-modules`] 可以自动以组件为单位隔绝 CSS 选择器。
* [`postcss-autoreset`] 是全局样式重置的又一个选择，它更适用于分离的组件。
* [`postcss-initial`] 添加了 `all: initial` 的支持，重置了所有继承的样式。
* [`cq-prolyfill`] 添加了容器查询的支持，允许添加响应于父元素宽度的样式.
### 提前使用先进的 CSS 特性
* [`autoprefixer`] 添加了 vendor 浏览器前缀，它使用 Can I Use 上面的数据。
* [`postcss-preset-env`] 允许你使用未来的 CSS 特性。
### 更佳的 CSS 可读性
* [`postcss-sorting`] 给规则的内容以及@规则排序。
* [`postcss-utilities`] 囊括了最常用的简写方式和书写帮助。
* [`short`] 添加并拓展了大量的缩写属性。
### 图片和字体
* [`postcss-assets`] 可以插入图片尺寸和内联文件。
* [`postcss-sprites`] 能生成雪碧图。
* [`font-magician`] 生成所有在 CSS 里需要的 `@font-face` 规则。
* [`postcss-inline-svg`] 允许你内联 SVG 并定制它的样式。
* [`postcss-write-svg`] 允许你在 CSS 里写简单的 SVG。
### 提示器（Linters）
* [`stylelint`] 是一个模块化的样式提示器。
* [`stylefmt`] 是一个能根据 `stylelint` 规则自动优化 CSS 格式的工具。
* [`doiuse`] 提示 CSS 的浏览器支持性，使用的数据来自于 Can I Use。
* [`colorguard`] 帮助你保持一个始终如一的调色板。
### 其它
* [`postcss-rtl`] 在单个 CSS 文件里组合了两个方向（左到右，右到左）的样式。
* [`cssnano`] 是一个模块化的 CSS 压缩器。
* [`lost`] 是一个功能强大的 `calc()` 栅格系统。
* [`rtlcss`] 镜像翻转 CSS 样式，适用于 right-to-left 的应用场景。
[`postcss-inline-svg`]: https://github.com/TrySound/postcss-inline-svg
[`postcss-preset-env`]: https://github.com/jonathantneal/postcss-preset-env
[`react-css-modules`]: https://github.com/gajus/react-css-modules
[`postcss-autoreset`]: https://github.com/maximkoretskiy/postcss-autoreset
[`postcss-write-svg`]: https://github.com/jonathantneal/postcss-write-svg
[`postcss-utilities`]: https://github.com/ismamz/postcss-utilities
[`postcss-initial`]: https://github.com/maximkoretskiy/postcss-initial
[`postcss-sprites`]: https://github.com/2createStudio/postcss-sprites
[`postcss-modules`]: https://github.com/outpunk/postcss-modules
[`postcss-sorting`]: https://github.com/hudochenkov/postcss-sorting
[`postcss-assets`]: https://github.com/assetsjs/postcss-assets
[开发 PostCSS 插件]: https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
[`font-magician`]: https://github.com/jonathantneal/postcss-font-magician
[`autoprefixer`]: https://github.com/postcss/autoprefixer
[`cq-prolyfill`]: https://github.com/ausi/cq-prolyfill
[`postcss-rtl`]: https://github.com/vkalinichev/postcss-rtl
[`postcss-use`]: https://github.com/postcss/postcss-use
[`css-modules`]: https://github.com/css-modules/css-modules
[`colorguard`]: https://github.com/SlexAxton/css-colorguard
[`stylelint`]: https://github.com/stylelint/stylelint
[`stylefmt`]: https://github.com/morishitter/stylefmt
[`cssnano`]: https://cssnano.github.io/cssnano/
[`doiuse`]: https://github.com/anandthakker/doiuse
[`rtlcss`]: https://github.com/MohammadYounes/rtlcss
[`short`]: https://github.com/jonathantneal/postcss-short
[`lost`]: https://github.com/peterramsing/lost
## 语法
PostCSS 可以转化样式到任意语法，不仅仅是 CSS。
如果还没有支持你最喜欢的语法，你可以编写一个解释器以及（或者）一个 stringifier 来拓展 PostCSS。
* [`sugarss`] 是一个以缩进为基础的语法，类似于 Sass 和 Stylus。
* [`postcss-syntax`] 通过文件扩展名自动切换语法。
* [`postcss-html`] 解析类 HTML 文件里`<style>`标签中的样式。
* [`postcss-markdown`] 解析 Markdown 文件里代码块中的样式。
* [`postcss-jsx`] 解析源文件里模板或对象字面量中的CSS。
* [`postcss-styled`] 解析源文件里模板字面量中的CSS。
* [`postcss-scss`] 允许你使用 SCSS *(但并没有将 SCSS 编译到 CSS)*。
* [`postcss-sass`] 允许你使用 Sass *(但并没有将 Sass 编译到 CSS)*。
* [`postcss-less`] 允许你使用 Less *(但并没有将 LESS 编译到 CSS)*。
* [`postcss-less-engine`] 允许你使用 Less *(并且使用真正的 Less.js 把 LESS 编译到 CSS)*。
* [`postcss-js`] 允许你在 JS 里编写样式，或者转换成 React 的内联样式／Radium／JSS。
* [`postcss-safe-parser`] 查找并修复 CSS 语法错误。
* [`midas`] 将 CSS 字符串转化成高亮的 HTML。
[`postcss-less-engine`]: https://github.com/Crunch/postcss-less
[`postcss-safe-parser`]: https://github.com/postcss/postcss-safe-parser
[`postcss-syntax`]: https://github.com/gucong3000/postcss-syntax
[`postcss-html`]: https://github.com/gucong3000/postcss-html
[`postcss-markdown`]: https://github.com/gucong3000/postcss-markdown
[`postcss-jsx`]: https://github.com/gucong3000/postcss-jsx
[`postcss-styled`]: https://github.com/gucong3000/postcss-styled
[`postcss-scss`]: https://github.com/postcss/postcss-scss
[`postcss-sass`]: https://github.com/AleshaOleg/postcss-sass
[`postcss-less`]: https://github.com/webschik/postcss-less
[`postcss-js`]: https://github.com/postcss/postcss-js
[`sugarss`]: https://github.com/postcss/sugarss
[`midas`]: https://github.com/ben-eb/midas
## 文章
* [一些你对 PostCSS 可能产生的误解](http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong)
* [PostCSS 究竟是什么，是做什么的](http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss)
* [PostCSS 指南](http://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889)
你可以在 [awesome-postcss](https://github.com/jjaderg/awesome-postcss) 列表里找到更多优秀的文章和视频。
## 书籍
* Alex Libby, Packt 的 [网页设计之精通 PostCSS](https://www.packtpub.com/web-development/mastering-postcss-web-design) (2016年6月)
## 使用方法
你可以通过简单的两步便开始使用 PostCSS：
1. 在你的构建工具中查找并添加 PostCSS 拓展。
2. [选择插件]并将它们添加到你的 PostCSS 处理队列中。
[选择插件]: https://postcss.org/docs/postcss-plugins
### CSS-in-JS
同时使用 PostCSS 与 CSS-in-JS 的最好方式是 [`astroturf`](https://github.com/4Catalyzer/astroturf)，将它的 loader 添加到 `webpack.config.js` 中：
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'postcss-loader'],
},
{
test: /\.jsx?$/,
use: ['babel-loader', 'astroturf/loader'],
}
]
}
}
```
然后创建 `postcss.config.js`：
```js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
}
```
### Parcel
[Parcel](https://parceljs.org/) 有内建的 PostCSS 支持，并已经使用 Autoprefixer 和 cssnano。如果你想更换插件，请在项目根目录中创建 `postcss.config.js`：
```js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
}
```
Parcel 甚至会自动地帮你安装这些插件。
> 请注意[第 1 版中存在的几个问题](https://github.com/parcel-bundler/parcel/labels/CSS%20Preprocessing)，第 2 版通过 [issue #2157](https://github.com/parcel-bundler/parcel/projects/5) 解决了这些问题。
### Webpack
在 `webpack.config.js` 里使用 [`postcss-loader`] :
```js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader'
}
]
}
]
}
}
```
然后创建 `postcss.config.js`:
```js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
}
```
[`postcss-loader`]: https://github.com/postcss/postcss-loader
### Gulp
使用 [`gulp-postcss`] 和 [`gulp-sourcemaps`].
```js
gulp.task('css', () => {
const postcss = require('gulp-postcss')
const sourcemaps = require('gulp-sourcemaps')
return gulp.src('src/**/*.css')
.pipe( sourcemaps.init() )
.pipe( postcss([ require('postcss-nested'), require('autoprefixer') ]) )
.pipe( sourcemaps.write('.') )
.pipe( gulp.dest('build/') )
})
```
[`gulp-sourcemaps`]: https://github.com/floridoo/gulp-sourcemaps
[`gulp-postcss`]: https://github.com/postcss/gulp-postcss
### npm run / CLI
如果需要在你的命令行界面或 npm 脚本里使用 PostCSS，你可以使用 [`postcss-cli`]。
```sh
postcss --use autoprefixer -c options.json -o main.css css/*.css
```
[`postcss-cli`]: https://github.com/postcss/postcss-cli
### 浏览器
如果你想编译浏览器里的 CSS 字符串（例如像 CodePen 一样的在线编辑器），
只需使用 [Browserify] 或 [webpack]。它们会把 PostCSS 和插件文件打包进一个独立文件。
如果想要在 React 内联样式／JSS／Radium／其它 [CSS-in-JS] 里使用 PostCSS，
你可以用 [`postcss-js`] 然后转换样式对象。
```js
var postcss = require('postcss-js')
var prefixer = postcss.sync([ require('autoprefixer') ])
prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
```
[`postcss-js`]: https://github.com/postcss/postcss-js
[Browserify]: http://browserify.org/
[CSS-in-JS]: https://github.com/MicheleBertoli/css-in-js
[webpack]: https://webpack.github.io/
### 运行器
* **Grunt**: [`grunt-postcss`](https://github.com/nDmitry/grunt-postcss)
* **HTML**: [`posthtml-postcss`](https://github.com/posthtml/posthtml-postcss)
* **Stylus**: [`poststylus`](https://github.com/seaneking/poststylus)
* **Rollup**: [`rollup-plugin-postcss`](https://github.com/egoist/rollup-plugin-postcss)
* **Brunch**: [`postcss-brunch`](https://github.com/brunch/postcss-brunch)
* **Broccoli**: [`broccoli-postcss`](https://github.com/jeffjewiss/broccoli-postcss)
* **Meteor**: [`postcss`](https://atmospherejs.com/juliancwirko/postcss)
* **ENB**: [`enb-postcss`](https://github.com/awinogradov/enb-postcss)
* **Taskr**: [`taskr-postcss`](https://github.com/lukeed/taskr/tree/master/packages/postcss)
* **Start**: [`start-postcss`](https://github.com/start-runner/postcss)
* **Connect/Express**: [`postcss-middleware`](https://github.com/jedmao/postcss-middleware)
### JS API
对于其它的应用环境，你可以使用 JS API：
```js
const postcssNested = require('postcss-nested')
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
const fs = require('fs')
fs.readFile('src/app.css', (err, css) => {
postcss([postcssNested, autoprefixer])
.process(css, { from: 'src/app.css', to: 'dest/app.css' })
.then(result => {
fs.writeFile('dest/app.css', result.css)
if ( result.map ) fs.writeFile('dest/app.css.map', result.map)
})
})
```
阅读 [PostCSS API 文档] 获取更多有关 JS API 的信息.
所有的 PostCSS 运行器应当通过 [PostCSS 运行器指南]。
[PostCSS 运行器指南]: https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md
[PostCSS API 文档]: https://postcss.org/api/
### 配置选项
绝大多数 PostCSS 运行器接受两个参数：
* 一个包含所需插件的数组
* 一个配置选项的对象
常见的选项：
* `syntax`: 一个提供了语法解释器和 stringifier 的对象。
* `parser`: 一个特殊的语法解释器（例如 [SCSS]）。
* `stringifier`: 一个特殊的语法 output 生成器（例如 [Midas]）。
* `map`: [source map 选项].
* `from`: input 文件名称（大多数运行器自动设置了这个）。
* `to`: output 文件名称（大多数运行器自动设置了这个）。
[source map 选项]: https://postcss.org/api/#sourcemapoptions
[Midas]: https://github.com/ben-eb/midas
[SCSS]: https://github.com/postcss/postcss-scss
### Atom
* [`language-postcss`] 添加了 PostCSS 和 [SugarSS] 代码高亮。
* [`source-preview-postcss`] 在一个独立窗口里实时预览生成的 CSS。
[SugarSS]: https://github.com/postcss/sugarss
### Sublime Text
* [`Syntax-highlighting-for-PostCSS`] 添加了 PostCSS 代码高亮。
[`Syntax-highlighting-for-PostCSS`]: https://github.com/hudochenkov/Syntax-highlighting-for-PostCSS
[`source-preview-postcss`]: https://atom.io/packages/source-preview-postcss
[`language-postcss`]: https://atom.io/packages/language-postcss
### Vim
* [`postcss.vim`] 添加了 PostCSS 代码高亮。
[`postcss.vim`]: https://github.com/stephenway/postcss.vim
### WebStorm
自 WebStorm 2016.3 开始，[提供了] 内建的 PostCSS 支持。
[提供了]: https://blog.jetbrains.com/webstorm/2016/08/webstorm-2016-3-early-access-preview/
================================================
FILE: docs/README.md
================================================
# Documentation
* [PostCSS Architecture](https://github.com/postcss/postcss/blob/main/docs/architecture.md#postcss-architecture)
* [Overview](https://github.com/postcss/postcss/blob/main/docs/architecture.md#overview)
* [Workflow](https://github.com/postcss/postcss/blob/main/docs/architecture.md#workflow)
* [Core Structures](https://github.com/postcss/postcss/blob/main/docs/architecture.md#core-structures)
* [API Reference](https://github.com/postcss/postcss/blob/main/docs/architecture.md#api-reference)
* [PostCSS Plugins](https://github.com/postcss/postcss/blob/main/docs/plugins.md#postcss-plugins)
* [Control](https://github.com/postcss/postcss/blob/main/docs/plugins.md#control)
* [Packs](https://github.com/postcss/postcss/blob/main/docs/plugins.md#packs)
* [Future CSS Syntax](https://github.com/postcss/postcss/blob/main/docs/plugins.md#future-css-syntax)
* [Fallbacks](https://github.com/postcss/postcss/blob/main/docs/plugins.md#fallbacks)
* [Language Extensions](https://github.com/postcss/postcss/blob/main/docs/plugins.md#language-extensions)
* [Colors](https://github.com/postcss/postcss/blob/main/docs/plugins.md#colors)
* [Images and Fonts](https://github.com/postcss/postcss/blob/main/docs/plugins.md#images-and-fonts)
* [Grids](https://github.com/postcss/postcss/blob/main/docs/plugins.md#grids)
* [Optimizations](https://github.com/postcss/postcss/blob/main/docs/plugins.md#optimizations)
* [Shortcuts](https://github.com/postcss/postcss/blob/main/docs/plugins.md#shortcuts)
* [Others](https://github.com/postcss/postcss/blob/main/docs/plugins.md#others)
* [Analysis](https://github.com/postcss/postcss/blob/main/docs/plugins.md#analysis)
* [Reporters](https://github.com/postcss/postcss/blob/main/docs/plugins.md#reporters)
* [Fun](https://github.com/postcss/postcss/blob/main/docs/plugins.md#fun)
* [PostCSS and Source Maps](https://github.com/postcss/postcss/blob/main/docs/source-maps.md#postcss-and-source-maps)
* [How to Write Custom Syntax](https://github.com/postcss/postcss/blob/main/docs/syntax.md#how-to-write-custom-syntax)
* [Syntax](https://github.com/postcss/postcss/blob/main/docs/syntax.md#syntax)
* [Parser](https://github.com/postcss/postcss/blob/main/docs/syntax.md#parser)
* [Main Theory](https://github.com/postcss/postcss/blob/main/docs/syntax.md#main-theory)
* [Performance](https://github.com/postcss/postcss/blob/main/docs/syntax.md#performance)
* [Node Source](https://github.com/postcss/postcss/blob/main/docs/syntax.md#node-source)
* [Raw Values](https://github.com/postcss/postcss/blob/main/docs/syntax.md#raw-values)
* [Tests](https://github.com/postcss/postcss/blob/main/docs/syntax.md#tests)
* [Stringifier](https://github.com/postcss/postcss/blob/main/docs/syntax.md#stringifier)
* [Main Theory](https://github.com/postcss/postcss/blob/main/docs/syntax.md#main-theory-1)
* [Builder Function](https://github.com/postcss/postcss/blob/main/docs/syntax.md#builder-function)
* [Raw Values](https://github.com/postcss/postcss/blob/main/docs/syntax.md#raw-values-1)
* [Tests](https://github.com/postcss/postcss/blob/main/docs/syntax.md#tests-1)
* [Writing a PostCSS Plugin](https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md#writing-a-postcss-plugin)
* [Links](https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md#links)
* [Step 1: Create an idea](https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md#step-1-create-an-idea)
* [Step 2: Create a project](https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md#step-2-create-a-project)
* [Step 3: Find nodes](https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md#step-3-find-nodes)
* [Step 4: Change nodes](https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md#step-4-change-nodes)
* [Step 5: Fight with frustration](https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md#step-5-fight-with-frustration)
* [Step 6: Make it public](https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md#step-6-make-it-public)
**Guidlines**
* [PostCSS Plugin Guidelines](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#postcss-plugin-guidelines)
* [API](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#1-api)
* [1.1 Clear name with `postcss-` prefix](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#11-clear-name-with-postcss--prefix)
* [1.2. Do one thing, and do it well](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#12-do-one-thing-and-do-it-well)
* [1.3. Do not use mixins](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#13-do-not-use-mixins)
* [1.4. Keep `postcss` to `peerDependencies`](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#14-keep-postcss-to-peerdependencies)
* [1.5. Set `plugin.postcssPlugin` with plugin name](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#15-set-pluginpostcssplugin-with-plugin-name)
* [Processing](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#2-processing)
* [2.1. Plugin must be tested](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#21-plugin-must-be-tested)
* [2.2. Use asynchronous methods whenever possible](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#22-use-asynchronous-methods-whenever-possible)
* [2.3. Use fast node’s scanning](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#23-use-fast-nodes-scanning)
* [2.4. Set `node.source` for new nodes](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#24-set-nodesource-for-new-nodes)
* [2.5. Use only the public PostCSS API](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#25-use-only-the-public-postcss-api)
* [Dependencies](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#3-dependencies)
* [3.1. Use messages to specify dependencies](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#31-use-messages-to-specify-dependencies)
* [Errors](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#4-errors)
* [4.1. Use `node.error` on CSS relevant errors](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#41-use-nodeerror-on-css-relevant-errors)
* [4.2. Use `result.warn` for warnings](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#42-use-resultwarn-for-warnings)
* [Documentation](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#5-documentation)
* [5.1. Document your plugin in English](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#51-document-your-plugin-in-english)
* [5.2. Include input and output examples](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#52-include-input-and-output-examples)
* [5.3. Maintain a changelog](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#53-maintain-a-changelog)
* [5.4. Include `postcss-plugin` keyword in `package.json`](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#54-include-postcss-plugin-keyword-in-packagejson)
* [PostCSS Runner Guidelines](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#postcss-runner-guidelines)
* [API](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#1-api)
* [1.1. Accept functions in plugin parameters](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#11-accept-functions-in-plugin-parameters)
* [Processing](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#21-set-from-and-to-processing-options)
* [2.1. Set `from` and `to` processing options](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#21-set-from-and-to-processing-options)
* [2.2. Use only the asynchronous API](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#22-use-only-the-asynchronous-api)
* [2.3. Use only the public PostCSS API](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#23-use-only-the-public-postcss-api)
* [3.1. Rebuild when dependencies change](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#31-rebuild-when-dependencies-change)
* [Output](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#4-output)
* [4.1. Don’t show JS stack for `CssSyntaxError`](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#41-dont-show-js-stack-for-csssyntaxerror)
* [4.2. Display `result.warnings()`](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#42-display-resultwarnings)
* [4.3. Allow the user to write source maps to different files](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#43-allow-the-user-to-write-source-maps-to-different-files)
* [Documentation](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#5-documentation)
* [5.1. Document your runner in English](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#51-document-your-runner-in-english)
* [5.2. Maintain a changelog](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#52-maintain-a-changelog)
* [5.3. `postcss-runner` keyword in `package.json`](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#53-postcss-runner-keyword-in-packagejson)
* [5.4. Keep postcss to peerDependencies](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#54-keep-postcss-to-peerdependencies)
================================================
FILE: docs/architecture.md
================================================
# PostCSS Architecture
General overview of the PostCSS architecture.
It can be useful for everyone who wishes to contribute to the core or develop a better understanding of the tool.
**Table of Contents**
* [Overview](#overview)
* [Workflow](#workflow)
* [Core Structures](#core-structures)
* [API Reference](#api-reference)
### Overview
> This section describes ideas lying behind PostCSS
Before diving deeper into the development of PostCSS let's briefly describe what is PostCSS and what is not.
**PostCSS**
- *is **NOT** a style preprocessor like `Sass` or `Less`.*
It does not define a custom syntax and semantics, it's not actually a language.
PostCSS works with CSS and can be easily integrated with the tools described above. That being said any valid CSS can be processed by PostCSS.
- *is a tool for CSS syntax transformations*
It allows you to define custom CSS like syntax that could be understandable and transformed by plugins. That being said PostCSS is not strictly about CSS spec but about syntax definition manner of CSS. In such a way you can define custom syntax constructs like at-rule, that could be very helpful for tools build around PostCSS. PostCSS plays the role of a framework for building outstanding tools for CSS manipulations.
- *is a big player in CSS ecosystem*
A Large amount of lovely tools like `Autoprefixer`, `Stylelint`, `CSSnano` were built on PostCSS ecosystem. There is a big chance that you already use it implicitly, just check your `node_modules` :smiley:
### Workflow
This is a high-level overview of the whole PostCSS workflow
<img width="300" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/PostCSS_scheme.svg/512px-PostCSS_scheme.svg.png" alt="workflow">
As you can see from the diagram above, PostCSS architecture is pretty straightforward but some parts of it could be misunderstood.
You can see a part called *Parser*, this construct will be described in details later on, just for now think about it as a structure that can understand your CSS like syntax and create an object representation of it.
That being said, there are few ways to write a parser.
- *Write a single file with string to AST transformation*
This method is quite popular, for example, the [Rework analyzer](https://github.com/reworkcss/css/blob/master/lib/parse/index.js) was written in this style. But with a large code base, the code becomes hard to read and pretty slow.
- *Split it into lexical analysis/parsing steps (source string → tokens → AST)*
This is the way of how we do it in PostCSS and also the most popular one.
A lot of parsers like [`@babel/parser` (parser behind Babel)](https://github.com/babel/babel/tree/master/packages/babel-parser), [`CSSTree`](https://github.com/csstree/csstree) were written in such way.
The main reasons to separate tokenization from parsing steps are performance and abstracting complexity.
Let's think about why the second way is better for our needs.
First of all, because string to tokens step takes more time than parsing step. We operate on large source string and process it char by char, this is why it is very inefficient operation in terms of performance and we should perform it only once.
But from other side tokens to AST transformation is logically more complex so with such separation we could write very fast tokenizer (but from this comes sometimes hard to read code) and easy to read (but slow) parser.
Summing it up splitting into two steps improve performance and code readability.
So now let's look more closely on structures that play the main role in PostCSS workflow.
### Core Structures
- #### Tokenizer [`lib/tokenize.js`](https://github.com/postcss/postcss/blob/main/lib/tokenize.js)
Tokenizer (aka Lexer) plays important role in syntax analysis.
It accepts CSS string and returns a list of tokens.
Token is a simple structure that describes some part of syntax like `at-rule`, `comment` or `word`. It can also contain positional information for more descriptive errors.
For example, if we consider following CSS
```css
.className { color: #FFF; }
```
corresponding tokens from PostCSS will be
```js
[
["word", ".className", 1, 1, 1, 10]
["space", " "]
["{", "{", 1, 12]
["space", " "]
["word", "color", 1, 14, 1, 18]
[":", ":", 1, 19]
["space", " "]
["word", "#FFF" , 1, 21, 1, 23]
[";", ";", 1, 24]
["space", " "]
["}", "}", 1, 26]
]
```
As you can see from the example above a single token represented as a list and also `space` token doesn't have positional information.
Let's look more closely on single token like `word`. As it was said each token represented as a list and follow such pattern.
```js
const token = [
// represents token type
'word',
// represents matched word
'.className',
// This two numbers represent start position of token.
// It is optional value as we saw in the example above,
// tokens like `space` don't have such information.
// Here the first number is line number and the second one is corresponding column.
1, 1,
// Next two numbers also optional and represent end position for multichar tokens like this one. Numbers follow same rule as was described above
1, 10
]
```
There are many patterns how tokenization could be done, PostCSS motto is performance and simplicity. Tokenization is a complex computing operation and takes a large amount of syntax analysis time ( ~90% ), that why PostCSS' Tokenizer looks dirty but it was optimized for speed. Any high-level constructs like classes could dramatically slow down tokenizer.
PostCSS' Tokenizer uses some sort of streaming/chaining API where you expose [`nextToken()`](https://github.com/postcss/postcss/blob/main/lib/tokenize.js#L48-L308) method to Parser. In this manner, we provide a clean interface for Parser and reduce memory usage by storing only a few tokens and not the whole list of tokens.
- #### Parser [`lib/parse.js`](https://github.com/postcss/postcss/blob/main/lib/parse.js), [`lib/parser.js`](https://github.com/postcss/postcss/blob/main/lib/parser.js)
Parser is the main structure responsible for [syntax analysis](https://en.wikipedia.org/wiki/Parsing) of incoming CSS. Parser produces a structure called [Abstract Syntax Tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree) that could then be transformed by plugins later on.
Parser works in common with Tokenizer and operates over tokens, not source string, as it would be a very inefficient operation.
It uses mostly `nextToken` and `back` methods provided by Tokenizer for obtaining single or multiple tokens and then construct part of AST called `Node`.
There are multiple Node types that PostCSS could produce but all of them inherit from base Node [class](https://github.com/postcss/postcss/blob/main/lib/node.js#L34).
- #### Processor [`lib/processor.js`](https://github.com/postcss/postcss/blob/main/lib/processor.js)
Processor is a very plain structure that initializes plugins and runs syntax transformations
It exposes only a few public API methods. Description of them could be found on [API](https://postcss.org/api/#processor)
- #### Stringifier [`lib/stringify.js`](https://github.com/postcss/postcss/blob/main/lib/stringify.js), [`lib/stringifier.js`](https://github.com/postcss/postcss/blob/main/lib/stringifier.js)
Stringifier is a base class that translates modified AST to pure CSS string. Stringifier traverses AST starting from provided Node and generates a raw string representation of it calling corresponding methods.
The most essential method is [`Stringifier.stringify`](https://github.com/postcss/postcss/blob/main/lib/stringifier.js#L25-L27)
that accepts initial Node and semicolon indicator.
You can learn more by checking [stringifier.js](https://github.com/postcss/postcss/blob/main/lib/stringifier.js)
### API Reference
More descriptive API documentation could be found [here](https://postcss.org/api/)
================================================
FILE: docs/guidelines/plugin.md
================================================
# PostCSS Plugin Guidelines
A PostCSS plugin is a function that receives and, usually,
transforms a CSS AST from the PostCSS parser.
The rules below are *mandatory* for all PostCSS plugins.
See also [ClojureWerkz’s recommendations] for open source projects.
[ClojureWerkz’s recommendations]: http://blog.clojurewerkz.org/blog/2013/04/20/how-to-make-your-open-source-project-really-awesome/
**Table of Contents**
* [API](#1-api)
* [1.1 Clear name with `postcss-` prefix](#11-clear-name-with-postcss--prefix)
* [1.2. Do one thing, and do it well](#12-do-one-thing-and-do-it-well)
* [1.3. Do not use mixins](#13-do-not-use-mixins)
* [1.4. Keep `postcss` to `peerDependencies`](#14-keep-postcss-to-peerdependencies)
* [1.5. Set `plugin.postcssPlugin` with plugin name](#15-set-pluginpostcssplugin-with-plugin-name)
* [Processing](#2-processing)
* [2.1. Plugin must be tested](#21-plugin-must-be-tested)
* [2.2. Use asynchronous methods whenever possible](#22-use-asynchronous-methods-whenever-possible)
* [2.3. Use fast node’s scanning](#23-use-fast-nodes-scanning)
* [2.4. Set `node.source` for new nodes](#24-set-nodesource-for-new-nodes)
* [2.5. Use only the public PostCSS API](#25-use-only-the-public-postcss-api)
* [Dependencies](#3-dependencies)
* [3.1. Use messages to specify dependencies](#31-use-messages-to-specify-dependencies)
* [Errors](#4-errors)
* [4.1. Use `node.error` on CSS relevant errors](#41-use-nodeerror-on-css-relevant-errors)
* [4.2. Use `result.warn` for warnings](#42-use-resultwarn-for-warnings)
* [Documentation](#5-documentation)
* [5.1. Document your plugin in English](#51-document-your-plugin-in-english)
* [5.2. Include input and output examples](#52-include-input-and-output-examples)
* [5.3. Maintain a changelog](#53-maintain-a-changelog)
* [5.4. Include `postcss-plugin` keyword in `package.json`](#54-include-postcss-plugin-keyword-in-packagejson)
## 1. API
### 1.1 Clear name with `postcss-` prefix
The plugin’s purpose should be clear just by reading its name.
If you wrote a transpiler for CSS 4 Custom Media, `postcss-custom-media`
would be a good name. If you wrote a plugin to support mixins,
`postcss-mixins` would be a good name.
The prefix `postcss-` shows that the plugin is part of the PostCSS ecosystem.
This rule is not mandatory for plugins that can run as independent tools,
without the user necessarily knowing that it is powered by
PostCSS — for example, [RTLCSS] and [Autoprefixer].
[Autoprefixer]: https://github.com/postcss/autoprefixer
[RTLCSS]: https://rtlcss.com/
### 1.2. Do one thing, and do it well
Do not create multitool plugins. Several small, one-purpose plugins bundled into
a plugin pack is usually a better solution.
For example, [`postcss-preset-env`] contains many small plugins,
one for each W3C specification. And [`cssnano`] contains a separate plugin
for each of its optimization.
[`postcss-preset-env`]: https://preset-env.cssdb.org/
[`cssnano`]: https://github.com/cssnano/cssnano
### 1.3. Do not use mixins
Preprocessors libraries like Compass provide an API with mixins.
PostCSS plugins are different.
A plugin cannot be just a set of mixins for [`postcss-mixins`].
To achieve your goal, consider transforming valid CSS
or using custom at-rules and custom properties.
[`postcss-mixins`]: https://github.com/postcss/postcss-mixins
### 1.4. Keep `postcss` to `peerDependencies`
AST can be broken because of different `postcss` version in different plugins.
Different plugins could use a different node creators (like `postcss.decl()`).
```json
{
"peerDependencies": {
"postcss": "^8.0.0"
}
}
```
It is better even not to import `postcss`.
```diff
- const { list, decl } = require('postcss')
module.exports = opts => {
postcssPlugin: 'postcss-name',
- Once (root) {
+ Once (root, { list, decl }) {
// Plugin code
}
}
module.exports.postcss = true
```
### 1.5. Set `plugin.postcssPlugin` with plugin name
Plugin name will be used in error messages and warnings.
```js
module.exports = opts => {
return {
postcssPlugin: 'postcss-name',
Once (root) {
// Plugin code
}
}
}
module.exports.postcss = true
```
## 2. Processing
### 2.1. Plugin must be tested
A CI service like [Travis] is also recommended for testing code in
different environments. You should test in (at least) Node.js [active LTS](https://github.com/nodejs/LTS) and current stable version.
[Travis]: https://travis-ci.org/
### 2.2. Use asynchronous methods whenever possible
For example, use `fs.writeFile` instead of `fs.writeFileSync`:
```js
let { readFile } = require('fs').promises
module.exports = opts => {
return {
postcssPlugin: 'plugin-inline',
async Decl (decl) {
const imagePath = findImage(decl)
if (imagePath) {
let imageFile = await readFile(imagePath)
decl.value = replaceUrl(decl.value, imageFile)
}
}
}
}
module.exports.postcss = true
```
### 2.3. Use fast node’s scanning
Subscribing for specific node type is much faster, than calling `walk*` method:
```diff
module.exports = {
postcssPlugin: 'postcss-example',
- Once (root) {
- root.walkDecls(decl => {
- // Slow
- })
- }
+ Declaration (decl) {
+ // Faster
+ }
}
module.exports.postcss = true
```
But you can make scanning even faster, if you know, what declaration’s property
or at-rule’s name do you need:
```diff
module.exports = {
postcssPlugin: 'postcss-example',
- Declaration (decl) {
- if (decl.prop === 'color') {
- // Faster
- }
- }
+ Declaration: {
+ color: decl => {
+ // The fastest
+ }
+ }
}
module.exports.postcss = true
```
### 2.4. Set `node.source` for new nodes
Every node must have a relevant `source` so PostCSS can generate
an accurate source map.
So if you add a new declaration based on some existing declaration, you should
clone the existing declaration in order to save that original `source`.
```js
if (needPrefix(decl.prop)) {
decl.cloneBefore({ prop: '-webkit-' + decl.prop })
}
```
You can also set `source` directly, copying from some existing node:
```js
if (decl.prop === 'animation') {
const keyframe = createAnimationByName(decl.value)
keyframes.source = decl.source
decl.root().append(keyframes)
}
```
### 2.5. Use only the public PostCSS API
PostCSS plugins must not rely on undocumented properties or methods,
which may be subject to change in any minor release. The public API
is described in [API docs].
[API docs]: https://postcss.org/api/
## 3. Dependencies
### 3.1. Use messages to specify dependencies
If a plugin depends on another file, it should be specified by attaching
a `dependency` message to the `result`:
```js
result.messages.push({
type: 'dependency',
plugin: 'postcss-import',
file: '/imported/file.css',
parent: result.opts.from
})
```
Directory dependencies should be specified using the `dir-dependency` message
type. By default all files within the directory (recursively) are considered
dependencies. An optional `glob` property can be used to indicate that only
files matching a specific glob pattern should be considered.
```js
result.messages.push({
type: 'dir-dependency',
plugin: 'postcss-import',
dir: '/imported',
glob: '**/*.css', // optional
parent: result.opts.from
})
```
## 4. Errors
### 4.1. Use `node.error` on CSS relevant errors
If you have an error because of input CSS (like an unknown name
in a mixin plugin) you should use `node.error` to create an error
that includes source position:
```js
if (typeof mixins[name] === 'undefined') {
throw node.error('Unknown mixin ' + name)
}
```
### 4.2. Use `result.warn` for warnings
Do not print warnings with `console.log` or `console.warn`,
because some PostCSS runner may not allow console output.
```js
Declaration (decl, { result }) {
if (outdated(decl.prop)) {
result.warn(decl.prop + ' is outdated', { node: decl })
}
}
```
If CSS input is a source of the warning, the plugin must set the `node` option.
## 5. Documentation
### 5.1. Document your plugin in English
PostCSS plugins must have their `README.md` wrote in English. Do not be afraid
of your English skills, as the open source community will fix your errors.
Of course, you are welcome to write documentation in other languages;
just name them appropriately (e.g. `README.ja.md`).
### 5.2. Include input and output examples
The plugin's `README.md` must contain example input and output CSS.
A clear example is the best way to describe how your plugin works.
The first section of the `README.md` is a good place to put examples.
See [postcss-opacity](https://github.com/iamvdo/postcss-opacity) for an example.
Of course, this guideline does not apply if your plugin does not
transform the CSS.
### 5.3. Maintain a changelog
PostCSS plugins must describe the changes of all their releases
in a separate file, such as `CHANGELOG.md`, `History.md`, or [GitHub Releases].
Visit [Keep A Changelog] for more information about how to write one of these.
Of course, you should be using [SemVer].
[Keep A Changelog]: https://keepachangelog.com/
[GitHub Releases]: https://help.github.com/articles/creating-releases/
[SemVer]: https://semver.org/
### 5.4. Include `postcss-plugin` keyword in `package.json`
PostCSS plugins written for npm must have the `postcss-plugin` keyword
in their `package.json`. This special keyword will be useful for feedback about
the PostCSS ecosystem.
For packages not published to npm, this is not mandatory, but is recommended
if the package format can contain keywords.
================================================
FILE: docs/guidelines/runner.md
================================================
# PostCSS Runner Guidelines
A PostCSS runner is a tool that processes CSS through a user-defined list
of plugins; for example, [`postcss-cli`] or [`gulp‑postcss`].
These rules are mandatory for any such runners.
For single-plugin tools, like [`gulp-autoprefixer`],
these rules are not mandatory but are highly recommended.
See also [ClojureWerkz’s recommendations] for open source projects.
[ClojureWerkz’s recommendations]: http://blog.clojurewerkz.org/blog/2013/04/20/how-to-make-your-open-source-project-really-awesome/
[`gulp-autoprefixer`]: https://github.com/sindresorhus/gulp-autoprefixer
[`gulp‑postcss`]: https://github.com/w0rm/gulp-postcss
[`postcss-cli`]: https://github.com/postcss/postcss-cli
**Table of Contents**
* [API](#1-api)
* [1.1. Accept functions in plugin parameters](#11-accept-functions-in-plugin-parameters)
* [Processing](#21-set-from-and-to-processing-options)
* [2.1. Set `from` and `to` processing options](#21-set-from-and-to-processing-options)
* [2.2. Use only the asynchronous API](#22-use-only-the-asynchronous-api)
* [2.3. Use only the public PostCSS API](#23-use-only-the-public-postcss-api)
* [3.1. Rebuild when dependencies change](#31-rebuild-when-dependencies-change)
* [Output](#4-output)
* [4.1. Don’t show JS stack for `CssSyntaxError`](#41-dont-show-js-stack-for-csssyntaxerror)
* [4.2. Display `result.warnings()`](#42-display-resultwarnings)
* [4.3. Allow the user to write source maps to different files](#43-allow-the-user-to-write-source-maps-to-different-files)
* [Documentation](#5-output)
* [5.1. Document your runner in English](#51-document-your-runner-in-english)
* [5.2. Maintain a changelog](#52-maintain-a-changelog)
* [5.3. `postcss-runner` keyword in `package.json`](#53-postcss-runner-keyword-in-packagejson)
* [5.4. Keep postcss to peerDependencies](#54-keep-postcss-to-peerdependencies)
## 1. API
### 1.1. Accept functions in plugin parameters
If your runner uses a config file, it must be written in JavaScript, so that
it can support plugins which accept a function, such as [`postcss-assets`]:
```js
module.exports = [
require('postcss-assets')({
cachebuster: function (file) {
return fs.statSync(file).mtime.getTime().toString(16)
}
})
]
```
[`postcss-assets`]: https://github.com/borodean/postcss-assets
## 2. Processing
### 2.1. Set `from` and `to` processing options
To ensure that PostCSS generates source maps and displays better syntax errors,
runners must specify the `from` and `to` options. If your runner does not handle
writing to disk (for example, a gulp transform), you should set both options
to point to the same file:
```js
processor.process({ from: file.path, to: file.path })
```
### 2.2. Use only the asynchronous API
PostCSS runners must use only the asynchronous API.
The synchronous API is provided only for debugging, is slower,
and can’t work with asynchronous plugins.
```js
processor.process(opts).then(result => {
// processing is finished
});
```
### 2.3. Use only the public PostCSS API
PostCSS runners must not rely on undocumented properties or methods,
which may be subject to change in any minor release. The public API
is described in [API docs].
[API docs]: https://postcss.org/api/
## 3. Dependencies
### 3.1. Rebuild when dependencies change
PostCSS plugins may declare file or directory dependencies by attaching
messages to the `result`. Runners should watch these and ensure that the
CSS is rebuilt when they change.
```js
for (let message of result.messages) {
if (message.type === 'dependency') {
watcher.addFile(message.file)
} else if (message.type === 'dir-dependency' && message.glob) {
watcher.addPattern(file.join(message.dir, message.glob))
} else if (message.type === 'dir-dependency') {
watcher.addPattern(file.join(message.dir, '**', '*'))
}
}
```
Directories should be watched recursively by default, but `dir-dependency`
messages may contain an optional `glob` property indicating which files
within the directory are depended on (e.g. `**/*.css`). If `glob` is
specified then runners should only watch files matching the glob pattern,
where possible.
## 4. Output
### 4.1. Don’t show JS stack for `CssSyntaxError`
PostCSS runners must not show a stack trace for CSS syntax errors,
as the runner can be used by developers who are not familiar with JavaScript.
Instead, handle such errors gracefully:
```js
processor.process(opts).catch(error => {
if (error.name === 'CssSyntaxError') {
process.stderr.write(error.message + error.showSourceCode())
} else {
throw error
}
})
```
### 4.2. Display `result.warnings()`
PostCSS runners must output warnings from `result.warnings()`:
```js
result.warnings().forEach(warn => {
process.stderr.write(warn.toString())
})
```
See also [postcss-log-warnings] and [postcss-messages] plugins.
[postcss-log-warnings]: https://github.com/davidtheclark/postcss-log-warnings
[postcss-messages]: https://github.com/postcss/postcss-messages
### 4.3. Allow the user to write source maps to different files
PostCSS by default will inline source maps in the generated file; however,
PostCSS runners must provide an option to save the source map in a different
file:
```js
if (result.map) {
fs.writeFile(opts.to + '.map', result.map.toString())
}
```
## 5. Documentation
### 5.1. Document your runner in English
PostCSS runners must have their `README.md` written in English. Do not be afraid
of your English skills, as the open source community will fix your errors.
Of course, you are welcome to write documentation in other languages;
just name them appropriately (e.g. `README.ja.md`).
### 5.2. Maintain a changelog
PostCSS runners must describe changes of all releases in a separate file,
such as `ChangeLog.md`, `History.md`, or with [GitHub Releases].
Visit [Keep A Changelog] for more information on how to write one of these.
Of course, you should use [SemVer].
[Keep A Changelog]: https://keepachangelog.com/
[GitHub Releases]: https://help.github.com/articles/creating-releases/
[SemVer]: https://semver.org/
### 5.3. `postcss-runner` keyword in `package.json`
PostCSS runners written for npm must have the `postcss-runner` keyword
in their `package.json`. This special keyword will be useful for feedback about
the PostCSS ecosystem.
For packages not published to npm, this is not mandatory, but recommended
if the package format is allowed to contain keywords.
### 5.4. Keep `postcss` to `peerDependencies`
AST can be broken because of different `postcss` version in different plugins.
Different plugins could use a different node creators (like `postcss.decl()`).
```json
{
"peerDependencies": {
"postcss": "^8.0.0"
}
}
```
================================================
FILE: docs/plugins.md
================================================
# PostCSS Plugins
**Table of Contents**
* [Control](#control)
* [Packs](#packs)
* [Future CSS Syntax](#future-css-syntax)
* [Fallbacks](#fallbacks)
* [Language Extensions](#language-extensions)
* [Images and Fonts](#images-and-fonts)
* [Grids](#grids)
* [Optimizations](#optimizations)
* [Shortcuts](#shortcuts)
* [Others](#others)
* [Analysis](#analysis)
* [Reporters](#reporters)
* [Fun](#fun)
## Control
There are two ways to make PostCSS magic more explicit.
Limit a plugin's local stylesheet context using [`postcss-plugin-context`]:
```pcss
.css-example.is-test-for-css4-browsers {
color: gray(255, 50%);
}
@context postcss-preset-env {
.css-example.is-fallback-for-all-browsers {
color: gray(255, 50%);
}
}
```
Or enable plugins directly in CSS using [`postcss-use`]:
```pcss
@use autoprefixer(browsers: ['last 2 versions']);
:fullscreen a {
display: flex;
}
```
[`postcss-plugin-context`]: https://github.com/postcss/postcss-plugin-context
[`postcss-use`]: https://github.com/postcss/postcss-use
## Packs
* [`postcss-utilities`] includes the most commonly used mixins, shortcuts
and helpers to use as `@util` rules.
* [`atcss`] contains plugins that transform your CSS according
to special annotation comments.
* [`cssnano`] contains plugins that optimize CSS size for use in production.
* [`oldie`] contains plugins that transform your CSS
for older Internet Explorer compatibility.
* [`rucksack`] contains plugins to speed up CSS development
with new features and shortcuts.
* [`level4`] contains only plugins that let you write CSS4 without
the IE9 fallbacks.
* [`short`] adds and extends numerous shorthand properties.
* [`stylelint`] contains plugins that lint your stylesheets.
* [`postcss-hamster`] for vertical rhythm, typography, modular scale functions.
* [`postcss-preset-env`] lets you convert modern CSS into something most
browsers can understand, determining the polyfills you need based
on your targeted browsers or runtime environments.
* [`postcss-ui-theme`] gives you syntax sugar and allows you to change theme.
[`postcss-preset-env`]: https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
[`postcss-utilities`]: https://github.com/ismamz/postcss-utilities
[`postcss-hamster`]: https://github.com/h0tc0d3/postcss-hamster
[`stylelint`]: https://github.com/stylelint/stylelint
[`rucksack`]: https://github.com/seaneking/rucksack
[`cssnano`]: https://cssnano.github.io/cssnano/
[`level4`]: https://github.com/stephenway/level4
[`oldie`]: https://github.com/csstools/oldie
[`atcss`]: https://github.com/morishitter/atcss
[`postcss-ui-theme`]: https://github.com/cleverboy32/postcss-ui-theme
## Future CSS Syntax
* [`postcss-apply`] supports custom properties sets references.
* [`postcss-attribute-case-insensitive`] supports case insensitive attributes.
* [`postcss-bidirection`] generate left-to-right and right-to-left styles
with single syntax.
* [`postcss-color-function`] supports functions to transform colors.
* [`postcss-color-gray`] supports the `gray()` function.
* [`postcss-color-hex-alpha`] supports `#rrggbbaa` and `#rgba` notation.
* [`postcss-color-hsl`]: transforms CSS Colors 4 `hsl()` to more compatible
`hsl()` or `hsla()`.
* [`postcss-color-hwb`] transforms `hwb()` to widely compatible `rgb()`.
* [`postcss-color-image`] supports `image(<color>)` syntax
allowing to use a solid color as an image.
* [`postcss-color-rebeccapurple`] supports the `rebeccapurple` color.
* [`postcss-color-rgb`]: transforms CSS Colors 4 `rgb()` to more compatible
`rgb()` or `rgba()`.
* [`postcss-conic-gradient`] supports the `conic-gradient` background.
* [`postcss-custom-media`] supports custom aliases for media queries.
* [`postcss-custom-properties`] supports variables, using syntax from
the W3C Custom Properties.
* [`postcss-custom-selectors`] adds custom aliases for selectors.
* [`postcss-extend`] supports spec-approximate `@extend` for rules
and placeholders, recursively.
* [`postcss-font-format-keywords`] transforms keywords in `@font-face` rule’s
`format()` function to widely supported strings.
* [`postcss-font-normalize`] to normalize font, especially `font-family`.
* [`postcss-font-variant`] transpiles human-readable `font-variant`
to more widely supported CSS.
* [`postcss-font-family-system-ui`] transforms W3C CSS `font-family: system-ui`
to a practical font list.
* [`postcss-font-display`] add `font-display` css rule.
* [`postcss-if-function`] transforms `if()` function for `media()` and
`supports()` to `@media` and `@supports` queries.
* [`postcss-host`] makes the Shadow DOM’s `:host` selector work properly
with pseudo-classes.
* [`postcss-initial`] supports `initial` keyword and `all: initial`
to clean inherit styles.
* [`postcss-logical-properties`] transforms `start` and `end` properties
to `left` and `right` depending on the writing direction of the document.
* [`postcss-media-minmax`] adds `<=` and `=>` statements to media queries.
* [`postcss-multi-value-display`] transforms `inline flex` and `block flow`
to `inline-flex` and `block`
* [`postcss-pseudo-class-any-link`] adds `:any-link` pseudo-class.
* [`postcss-pseudo-is`] transforms `:is()` to more compatible CSS.
* [`postcss-selector-not`] transforms CSS4 `:not()` to CSS3 `:not()`.
* [`postcss-selector-matches`] transforms CSS4 `:matches()`
to more compatible CSS.
* [`postcss-start-to-end`] lets you control your layout (LTR or RTL)
through logical rather than direction / physical rules.
* [`postcss-subgrid`] provides a basic shim for the CSS `display: subgrid` spec.
* [`mq4-hover-shim`] supports the `@media (hover)` feature.
See also [`postcss-preset-env`] plugins pack to add future CSS syntax
by one line of code.
## Fallbacks
* [`postcss-auto-var-fallback`] adds var fallbacks by provided files of variables.
* [`postcss-color-rgba-fallback`] transforms `rgba()` to hexadecimal.
* [`postcss-disabled`] adds a `[disabled]` attribute and/or a `.disabled` class
when the `:disabled` pseudo class is present.
* [`postcss-epub`] adds the `-epub-` prefix to relevant properties.
* [`postcss-esplit`] splits your CSS exceeding 4095 selectors for IE.
* [`postcss-fallback`] adds `fallback` function to avoid duplicate declarations.
* [`postcss-filter-gradient`] adds gradient filter for the old IE.
* [`postcss-flexibility`] adds `-js-` prefix for [`Flexibility polyfill`].
* [`postcss-gradient-transparency-fix`] transforms `transparent` values
in gradients to support Safari's different color interpolation.
* [`postcss-hash-classname`] append hash string to your css class name.
* [`postcss-mqwidth-to-class`] converts min/max-width media queries to classes.
* [`postcss-opacity`] adds opacity filter for IE8.
* [`postcss-opacity-percentage`] transforms CSS4 percentage-based `opacity`
values to float values.
* [`postcss-page-break`] adds `page-break-` fallback to `break-` properties.
* [`postcss-pseudoelements`] Convert `::` selectors into `:` selectors
for IE 8 compatibility.
* [`postcss-redundant-color-vars`] adds custom property for certain border and
box-shadow declarations to fix a known Safari bug
* [`postcss-replace-overflow-wrap`] replace `overflow-wrap` with `word-wrap`.
* [`postcss-round-subpixels`] plugin that rounds sub-pixel values
to the nearest
full pixel.
* [`postcss-unmq`] removes media queries while preserving desktop rules
for IE≤8.
* [`postcss-vmin`] generates `vm` fallback for `vmin` unit in IE9.
* [`postcss-will-change`] inserts 3D hack before `will-change` property.
* [`autoprefixer`] adds vendor prefixes for you, using data from Can I Use.
* [`postcss-pie`] makes IE several of the most useful CSS3 decoration features.
* [`cssgrace`] provides various helpers and transpiles CSS 3 for IE
and other old browsers.
* [`pixrem`] generates pixel fallbacks for `rem` units.
* [`postcss-fixie`] adds easy and painless IE hacks
* [`postcss-safe-area`] adds browser fallbacks for `safe-area-inset` `env`
variables.
* [`webp-in-css`] to use WebP background images in CSS.
* [`postcss-clamp`] transform `clamp()` to combination of `min/max`
* [`postcss-spring-easing`] replaces `spring()` with a resulting `linear()`
function and add a `--spring-duration` css variable.
See also [`oldie`] plugins pack.
[`Flexibility polyfill`]: https://github.com/10up/flexibility
## Language Extensions
* [`postcss-aspect-ratio`] fix an element's dimensions to an aspect ratio.
* [`postcss-atroot`] place rules directly at the root node.
* [`postcss-bem-fix`] adds at-rules for BEM and SUIT style classes.
* [`postcss-click`] allows to use the `:click` pseudo class and implement
it in JavaScript.
* [`postcss-compact-mq`] provides compact syntax for media queries based
on viewport width.
* [`postcss-conditionals`] adds `@if` statements.
* [`postcss-css-variables`] supports variables for selectors, and at-rules
using W3C similar syntax.
* [`postcss-current-selector`] to get current selector in declaration.
* [`postcss-define-property`] to define properties shortcut.
* [`postcss-define-function`] to implement Sass `@function` directive.
* [`postcss-each`] adds `@each` statement.
* [`postcss-for`] adds `@for` loops.
* [`postcss-at-rules-variables`] adds support for custom properties in
`@for`, `@each`, `@if`, etc.
* [`postcss-functions`] enables exposure of JavaScript functions.
* [`postcss-if-media`] inline or nest media queries within
CSS rules & properties.
* [`postcss-inline-extract`] extract inline styles from HTML and convert them to CSS rules.
* [`postcss-inline-media`] inline multiple media queries into CSS property
values.
* [`postcss-local-constants`] adds support for localized constants.
* [`postcss-map`] enables configuration maps.
* [`postcss-match`] adds `@match` for [Rust-style pattern matching].
* [`postcss-mixins`] enables mixins more powerful than Sass’,
defined within stylesheets or in JS.
* [`postcss-media-variables`] adds support for `var()` and `calc()`
in `@media` rules
* [`postcss-modular-scale`] adds a modular scale `ms()` function.
* [`postcss-namespace`] prefix a namespace to a selector.
* [`postcss-nested`] unwraps nested rules.
* [`postcss-nested-props`] unwraps nested properties.
* [`postcss-nested-vars`] supports nested Sass-style variables.
* [`postcss-pseudo-class-any-button`] adds `:any-button` pseudo-class
for targeting all button elements.
* [`postcss-pseudo-class-enter`] transforms `:enter` into `:hover` and `:focus`.
* [`postcss-quantity-queries`] enables quantity queries.
* [`postcss-ref`] refers properties from another rule.
* [`postcss-reverse-media`] reverse/Invert media query parameters.
* [`postcss-sassy-mixins`] enables mixins with Sass keywords.
* [`postcss-map-get`] adds the ability to use Sass like map function `map-get`.
* [`postcss-simple-extend`] lightweight extending of silent classes,
like Sass’ `@extend`.
* [`postcss-simple-vars`] supports for Sass-style variables.
* [`postcss-strip-units`] strips units off of property values.
* [`postcss-vertical-rhythm`] adds a vertical rhythm unit
based on `font-size` and `line-height`.
* [`postcss-vertical-rhythm-function`] adds a vertical rhythm `vr()` function
that is unit agnostic and works in situations where the font-size cannot
be calculated during build time.
* [`postcss-responsive-properties`] allows you to write responsive
property values.
* [`postcss-text-remove-gap`] remove space before and after text strings, added
by line-height and extra space in glyph itself.
* [`postcss-closest`] plugin to modify closest matching part of current
selector.
* [`csstyle`] adds components workflow to your styles.
* [`postcss-percentage`] support Sass-like `percentage()` function.
* [`postcss-custom-css-units`] Define custom css units and convert them
to CSS variables.
* [`postcss-easy-z`] lets you organize z-indices by declaring relations
between them.
* [`@csstools/postcss-design-tokens`] lets you import and use design tokens
from CSS.
* [`postcss-smooth-shadow`] generates more realistic smooth shadow.
[Rust-style pattern matching]: https://doc.rust-lang.org/book/match.html
## Colors
* [`postcss-ase-colors`] replaces color names with values read
from an ASE palette file.
* [`postcss-brand-colors`] inserts company brand colors
in the `brand-colors` module.
* [`postcss-color-alpha`] transforms `#hex.a`, `black(alpha)` and `white(alpha)`
to `rgba()`.
* [`postcss-color-hcl`] transforms `hcl(H, C, L)` and `hcl(H, C, L, alpha)`
to `#rgb` and `rgba()`.
* [`postcss-color-hexa`] transforms `hexa(hex, alpha)` into `rgba` format.
* [`postcss-color-mix`] mixes two colors together.
* [`postcss-color-palette`] transforms CSS 2 color keywords to a custom palette.
* [`postcss-color-pantone`] transforms pantone color to RGB.
* [`postcss-color-scale`] adds a color scale `cs()` function.
* [`postcss-color-short`] adds shorthand color declarations.
* [`postcss-color-yiq`] sets foreground colors using the YIQ color space.
* [`postcss-colorblind`] transforms colors using filters to simulate
colorblindness.
* [`postcss-contrast`] checks background-color and gives either white or black.
* [`postcss-dark-theme-class`] to force dark or light theme by custom switcher.
* [`postcss-theme-colors`] add dark and light theme with color groups.
* [`postcss-hexrgba`] adds shorthand hex `rgba(hex, alpha)` method.
* [`postcss-rgb-plz`] converts 3 or 6 digit hex values to `rgb`.
* [`postcss-rgba-hex`] converts `rgba` values to `hex` analogues.
* [`postcss-shades-of-gray`] helps keeping grayscale colors consistent
to a gray palette.
* [`colorguard`] helps maintain a consistent color palette.
* [`postcss-get-color`] get the prominent colors from an image.
* [`postcss-randomcolor`] supports function to use random color.
## Images and Fonts
* [`avif-in-css`] to use AVIF image format in CSS background.
* [`postcss-assets`] allows you to simplify URLs, insert image dimensions,
and inline files.
* [`postcss-assets-rebase`] rebases assets from `url()`.
* [`postcss-at2x`] handles retina background images via use of `at-2x` keyword.
* [`postcss-background-image-auto-size`] generates CSS rules `width`
and `height` for `background-image` automatically.
* [`postcss-border-9-patch`] generates 9-patch like border styles
via a custom rule.
* [`postcss-cachebuster`] adds version parameter to images and fonts
* [`postcss-copy-assets`] copies assets referenced by relative `url()`s
into a build directory.
* [`postcss-data-packer`] moves embedded Base64 data to a separate file.
* [`postcss-easysprites`] combine images to sprites, based on their
image.png`#hash` and aspect ratio (`@2x`).
* [`postcss-icon-blender`] create custom SVG icon sets from over 80,000 free
and open-source icons
* [`postcss-image-set`] adds `background-image` with first image
for `image-set()`.
* [`postcss-image-inliner`] inlines local and remote images.
* [`postcss-instagram`] adds Instagram filters to `filter`.
* [`postcss-filter-tint`] adds tint filter to elements such as images.
* [`postcss-foft-classes`] adds guarding classes to blocks using web fonts
for better font loading strategies.
* [`postcss-font-awesome`] adds an easy shortcut to font-awesome unicode codes
* [`postcss-font-grabber`] grabs remote fonts in `@font-face`,
download them and update your CSS.
* [`postcss-font-pack`] simplifies font declarations and validates they match
configured font packs.
* [`postcss-fontsize`] generates `rem` unit `font-size` and `line-height`
with `px` fallbacks.
* [`postcss-fontpath`] adds font links for different browsers.
* [`postcss-fontsource-url`] rewrite Fontsource assets folder.
* [`postcss-lazyimagecss`] adds image width and height automatically.
* [`postcss-lazysprite`] generates sprites from the directory of images.
* [`postcss-placehold`] makes it easy to drop in placeholder images.
* [`postcss-resemble-image`] provides a gradient fallback for an image that
loosely resembles the original.
* [`postcss-resolve-urls`] resolves relative urls referenced in `url()`s
* [`postcss-responsive-images`] adds stylesheets for making
your images responsive.
* [`postcss-sprites`] generates CSS sprites from stylesheets.
* [`postcss-svg`] insert inline SVG to CSS and allows to manage it colors.
* [`postcss-svg-fallback`] converts SVG in your CSS to PNG files for IE 8.
* [`postcss-svgo`] processes inline SVG through [SVGO].
* [`postcss-unicode-characters`] makes it easier to write `unicode-range`
descriptors.
* [`postcss-url`] rebases or inlines `url()`s.
* [`postcss-urlrebase`] rebases `url()`s to a given root URL.
* [`postcss-urlrev`] adds MD5 hash strings to `url()`s.
* [`postcss-write-svg`] write inline SVGs in CSS.
* [`postcss-inline-svg`] inline SVG images and customize their styles.
* [`webpcss`] adds URLs for WebP images for browsers that support WebP.
* [`webp-in-css`] to use WebP image format in CSS background.
## Grids
* [`postcss-grid`] adds a semantic grid system.
* [`postcss-grid-kiss`] transforms ASCII-art grids into CSS Grid layout.
* [`postcss-grid-system`] creates grids based on a fixed column width.
* [`postcss-grid-fluid`] creates fluid grids.
* [`postcss-layout`] a plugin for some common CSS layout patterns
and a Grid system.
* [`postcss-maze`] is a mobile first, semantic responsive grid
to suit any design pattern.
* [`postcss-neat`] is a semantic and fluid grid framework.
* [`postcss-oldschool-grid`] is a grid system with wrapping columns
and padding gutters.
* [`postcss-simple-grid`] create grid with one line.
* [`lost`] feature-rich `calc()` grid system by Jeet author.
## Optimizations
* [`postcss-calc`] reduces `calc()` to values
(when expressions involve the same units).
* [`postcss-remove-nested-calc`] `calc(100vw - calc(20% - 10px))` to
`calc(100vw - (20% - 10px))` for IE 11 compatibility.
* [`postcss-class-name-shortener`] shortens CSS class names to optimize
website performance.
* [`postcss-combine-duplicated-selectors`] automatically join identical
selectors.
* [`postcss-filter-mq`] Filter all matching or non-matching media queries.
* [`postcss-import`] inlines the stylesheets referred to by `@import` rules.
* [`postcss-nested-import`] inlines stylesheets referred to by `@import` rules
inside nested rule blocks.
* [`postcss-partial-import`] inlines standard imports and Sass-like partials.
* [`postcss-reference`] emulates Less’s `@import`.
* [`postcss-remove-root`] removes all instances of `:root` from a stylesheet.
* [`postcss-single-charset`] ensures that there is one and only one
`@charset` rule at the top of file.
* [`postcss-zindex`] rebases positive `z-index` values.
* [`postcss-unprefix`] Unprefixes vendor prefixes in legacy CSS.
* [`css-byebye`] removes the CSS rules that you don’t want.
* [`css-mqpacker`] joins matching CSS media queries into a single statement.
* [`stylehacks`] removes CSS hacks based on browser support.
* [`postcss-mq-optimize`] removes invalid media queries or its expressions.
* [`postcss-uncss`] removes unused CSS from your stylesheets.
* [`postcss-html-filter`] filters out CSS that does not apply to the HTML
you provide.
* [`postcss-no-important`] delete declarations !important.
* [`postcss-deep-scopable`] unified deep scoped style for Vue.js.
* [`postcss-deadcss`] helps to find dead CSS in stylesheets.
* [`postcss-variable-compress`] minifies css variables and saves you space.
See also plugins in modular minifier [`cssnano`].
[SVGO]: https://github.com/svg/svgo
## Shortcuts
* [`postcss-alias`] creates shorter aliases for properties.
* [`postcss-alias-atrules`] creates shorter aliases for at-rules.
* [`postcss-all-link-colors`] insert colors for link-related pseudo-classes.
* [`postcss-border`] adds shorthand for width and color of all borders
in `border` property.
* [`postcss-border-shortcut`] PostCSS plugin for assign default `border` type
if not expressed.
* [`postcss-button`] creates buttons.
* [`postcss-center`] centers elements.
* [`postcss-circle`] inserts a circle with color.
* [`postcss-clearfix`] adds `fix` and `fix-legacy` properties to the `clear`
declaration.
* [`postcss-crip`] shorthand properties for Crips that are too lazy to write.
* [`postcss-default-unit`] adds default unit to numeric CSS properties.
* [`postcss-easings`] replaces easing names from easings.net
with `cubic-bezier()` functions.
* [`postcss-filter`] adds shorthand for black and white filter.
* [`postcss-focus`] adds `:focus` selector to every `:hover`.
* [`postcss-generate-preset`] allows quick generation of rules.
Useful for creating repetitive utilities.
* [`postcss-hidden`] allows for easy ways to hide elements.
* [`postcss-input-style`] adds new pseudo-elements for cross-browser styling
of inputs.
* [`postcss-nested-ancestors`] reference any parent/ancestor selector
in nested CSS.
* [`postcss-parent-selector`] adds a parent selector to the beginning
of all rules.
* [`postcss-position`] adds shorthand declarations for position attributes.
* [`postcss-property-lookup`] allows referencing property values without
a variable.
* [`postcss-range-value`] range value with a max and min value between
two screen sizes.
* [`postcss-responsive-type`] changes `font-size` depends on screen size.
* [`postcss-scrib`] define your own aliases/shortcuts for properties or values.
* [`postcss-short-font-size`] extends `font-size` to define line-height
s a second value.
* [`postcss-short-position`] extends `position` to define edges
as additional values.
* [`postcss-short-spacing`] extends `margin` and `padding` to allow
or omitted edges.
* [`postcss-short-text`] adds a `text` shortcut property for several
text-related properties.
* [`postcss-size`] adds a `size` shortcut that sets width and height
with one declaration.
* [`postcss-speech-bubble`] adds speech bubbles of different kinds
with just a couple of lines of CSS.
* [`postcss-transform-shortcut`] allows shorthand transform properties in CSS.
* [`postcss-triangle`] creates a triangle.
* [`postcss-typescale`] sets type based on a typographic scale.
* [`postcss-verthorz`] adds vertical and horizontal spacing declarations.
* [`font-magician`] generates all the `@font-face` rules needed in CSS.
* [`postcss-animation`] PostCSS plugin that adds `@keyframes` from animate.css.
* [`postcss-magic-animations`] PostCSS plugin that adds `@keyframes`
from Magic Animations.
## Others
* [`postcss-add-root-selector`] intelligently wraps all rules
in a custom selector.
* [`postcss-alter-property-value`] alters your CSS declarations
from a rule based configuration.
* [`postcss-attribute-selector-prefix`] adds a prefix to attribute selectors
* [`postcss-auto-rem`] compiles pixel units to `rem` without configuration.
* [`postcss-autoreset`] automatically adds reset styles.
* [`postcss-bem-to-js`] creates a JavaScript definition file for BEM-style CSS.
* [`postcss-bom`] adds a UTF-8 BOM to files.
* [`postcss-blurry-gradient-workaround`] fixes blurry CSS gradients
with too many explicit end-stops.
* [`postcss-camelcaser`] transforms selectors to CamelCase.
* [`postcss-class-prefix`] adds a prefix/namespace to class selectors.
* [`postcss-classes-to-mixins`] converts classes to Sass, Less and Stylus mixins
* [`postcss-currency`] replaces name of currency with symbols.
* [`postcss-d-ts`] generates `.d.ts` declaration for TypeScript `import`
from used CSS classes and ids
* [`postcss-eol`] replaces EOL of files.
* [`postcss-extract-value`] extracts values from css properties and puts them
into variables.
* [`postcss-fakeid`] transforms `#foo` IDs to attribute selectors `[id="foo"]`.
* [`postcss-filter-stream`] blacklist files / folders that you don’t want
to process with a PostCSS plugin.
* [`postcss-flexbox`] easy way to understand and start using CSS3 Flexbox.
* [`postcss-flexbox-reset`] resets Flexbox to avoid issues in responsive layouts.
* [`postcss-flexboxfixer`] unprefixes `-webkit-` only flexbox in legacy CSS.
* [`postcss-flexbugs-fixes`] fixes some of known [flexbox bugs].
* [`postcss-gradientfixer`] unprefixes `-webkit-` only gradients in legacy CSS.
* [`postcss-grid-reset`] resets CSS Grid to avoid issues in responsive layouts.
* [`postcss-hash`] replaces output file names with hash algorithms
for cache busting.
* [`postcss-ie8`] strips out unsupported properties and media queries for IE8.
* [`postcss-increase-specificity`] increases the specificity of your selectors.
* [`postcss-inline-rtl`] converts your CSS to right-to-left,
but inline (adding just what you need).
* [`postcss-join-transitions`] joins conflicting transition declarations.
* [`postcss-letter-tracking`] generates relative, Photoshop-compatible
letter tracking for improved letter spacing.
* [`postcss-light-text`] adds `-webkit-` antialiasing for light text.
* [`postcss-modules`] allows to use CSS Modules everywhere.
* [`postcss-momentum-scrolling`] adding momentum style scrolling behavior
(`-webkit-overflow-scrolling:touch`) for elements with overflow on iOS.
* [`postcss-mq-keyframes`] moves any animation keyframes in media queries
to the end of the file.
* [`postcss-mq-last`] gives media query rules precedence by moving them
to the end of the file.
* [`postcss-node-modules-replacer`] replaces path than includes `node_modules`
to `~`.
* [`postcss-plugin-namespace`] add a css selector to all rules,
so that CSS file don’t affect other element.
* [`postcss-prefix-hover`] adds a prefixed to any selector containing `:hover`.
* [`postcss-pseudo-content-insert`] adds `content: ''` to `:before` and `:after`
if it is missing.
* [`postcss-pseudo-element-cases`] converts `.style::BEFORE`
into `.style::before` and vice versa.
* [`postcss-pseudo-element-colons`] converts `.style:before`
into `.style::before` and vice versa.
* [`postcss-pseudo-elements-content`] adds `content: ''` to `:before-c`
and `:after-c`.
* [`postcss-pxtorem`] converts pixel units to `rem`.
* [`postcss-raw`] protects nodes inside `@raw` at-rules from being touched
by other plugins.
* [`postcss-remove-prefixes`] removes vendor prefixes.
* [`postcss-rtlcss`] creates left-to-right and right-to-left rules
in a single CSS file.
* [`postcss-safe-important`] adds `!important` to style declarations safely.
* [`postcss-sanitize`] remove properties and values using rules.
* [`postcss-scopify`] adds a user input scope to each selector.
* [`postcss-select`] select rules based off a selector list.
* [`postcss-selector-prefixer`] adds a prefix to css selectors.
* [`postcss-shorthand-expand`] expands shorthand properties.
* [`postcss-simple-trig`] calculate trigonometric functions: sin/cos/tan.
* [`postcss-sorting`] sort rules content with specified order.
* [`postcss-sort-media-queries`] combine and sort CSS media queries
with mobile first or desktop first methods.
* [`postcss-style-guide`] generates a style guide automatically.
* [`css-declaration-sorter`] sorts CSS declarations fast and automatically
in a certain order.
* [`perfectionist`] formats poorly written CSS and renders a “pretty” result.
* [`rtlcss`] mirrors styles for right-to-left locales.
* [`stylefmt`] modern CSS formatter that works well with `stylelint`.
* [`postcss-autocorrect`] corrects typos and notifies in the console.
* [`postcss-px-to-viewport`] generates viewport units
(`vw`, `vh`, `vmin`, `vmax`) from `px` units.
* [`postcss-viewport-height-correction`] solves the popular problem when `100vh`
doesn’t fit the mobile browser screen.
* [`postcss-unit-processor`] flexible processing of CSS units.
* [`postcss-rem-to-px`] converts `rem` values to `px` values.
* [`postcss-design-tokens`] provides a function to retrieve design tokens
expressed in JS or JSON, within CSS.
* [`postcss-pixel-to-remvw`] converting px to both of rem and vw, also one of them
* [`postcss-easy-import`] inline `@import` rules content with extra features.
* [`postcss-plugin-ignore-file`] ignore file with a top-comment `/* @ignore */`.
[flexbox bugs]: https://github.com/philipwalton/flexbugs
## Analysis
* [`postcss-bem-linter`] lints CSS for conformance to SUIT CSS methodology.
* [`postcss-cssstats`] returns an object with CSS statistics.
* [`postcss-regexp-detect`] search for regexp in CSS declarations.
* [`css2modernizr`] creates a Modernizr config file
that requires only the tests that your CSS uses.
* [`doiuse`] lints CSS for browser support, using data from Can I Use.
* [`immutable-css`] lints CSS for class mutations.
* [`list-selectors`] lists and categorizes the selectors used in your CSS,
for code review.
## Reporters
* [`postcss-browser-reporter`] displays warning messages from other plugins
right in your browser.
* [`postcss-forced-variables`] provides warnings and errors when specified
properties don’t use variables.
* [`postcss-reporter`] logs warnings and other messages from other plugins
in the console.
## Fun
* [`postcss-australian-stylesheets`] Australian Style Sheets.
* [`postcss-andalusian-stylesheets`] Andalusian Style Sheets.
* [`postcss-aze-stylesheets`] Azerbaijanian Style Sheets.
* [`postcss-canadian-stylesheets`] Canadian Style Sheets.
* [`postcss-chinese-stylesheets`] Chinese Style Sheets.
* [`postcss-czech-stylesheets`] Czech Style Sheets.
* [`postcss-german-stylesheets`] German Style Sheets.
* [`postcss-italian-stylesheets`] Italian Style Sheets.
* [`postcss-russian-stylesheets`] Russian Style Sheets.
* [`postcss-swedish-stylesheets`] Swedish Style Sheets.
* [`postcss-tatar-stylesheets`] Tatar Style Sheets
* [`postcss-trolling`] Trolling Style Sheets.
* [`postcss-lolcat-stylesheets`] Lolspeak Style Sheets.
* [`postcss-imperial`] adds CSS support for Imperial and US customary units
of length.
* [`postcss-russian-units`] adds CSS support for russian units of length.
* [`postcss-pointer`] Replaces `pointer: cursor` with `cursor: pointer`.
* [`postcss-spiffing`] lets you use British English in your CSS.
* [`postcss-spanish-stylesheets`] Spanish Style Sheets.
* [`postcss-nope`] lets you write `nope` instead of `none`.
* [`postcss-glitch`] add glitch effect to your text.
* [`postcss-khaleesi`] translate CSS values and properties to
`khaleesi meme` language.
[`postcss-background-image-auto-size`]: https://github.com/JustClear/postcss-background-image-auto-size
[`postcss-letter-tracking`]: https://github.com/letsjaam/postcss-letter-tracking
[`postcss-combine-duplicated-selectors`]: https://github.com/ChristianMurphy/postcss-combine-duplicated-selectors
[`postcss-attribute-case-insensitive`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-attribute-case-insensitive
[`postcss-alter-property-value`]: https://github.com/kunukn/postcss-alter-property-value
[`postcss-attribute-selector-prefix`]: https://github.com/GitScrum/postcss-attribute-selector-prefix
[`postcss-gradient-transparency-fix`]: https://github.com/gilmoreorless/postcss-gradient-transparency-fix
[`postcss-vertical-rhythm-function`]: https://github.com/F21/postcss-vertical-rhythm-function
[`postcss-pseudo-class-any-button`]: https://github.com/andrepolischuk/postcss-pseudo-class-any-button
[`postcss-pseudo-elements-content`]: https://github.com/omgovich/postcss-pseudo-elements-content
[`postcss-pseudo-element-cases`]: https://github.com/timelsass/postcss-pseudo-element-cases
[`postcss-pseudo-element-colons`]: https://github.com/timelsass/postcss-pseudo-element-colons
[`postcss-aze-stylesheets`]: https://github.com/iskandarovBakshi/postcss-aze-stylesheets
[`postcss-andalusian-stylesheets`]: https://github.com/bameda/postcss-andalusian-stylesheets
[`postcss-australian-stylesheets`]: https://github.com/dp-lewis/postcss-australian-stylesheets
[`postcss-responsive-properties`]: https://github.com/alexandr-solovyov/postcss-responsive-properties
[`postcss-pseudo-class-any-link`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-pseudo-class-any-link
[`postcss-pseudo-content-insert`]: https://github.com/liquidlight/postcss-pseudo-content-insert
[`postcss-canadian-stylesheets`]: https://github.com/chancancode/postcss-canadian-stylesheets
[`postcss-increase-specificity`]: https://github.com/MadLittleMods/postcss-increase-specificity
[`postcss-chinese-stylesheets`]: https://github.com/zhouwenbin/postcss-chinese-stylesheets
[`postcss-italian-stylesheets`]: https://github.com/Pustur/postcss-italian-stylesheets
[`postcss-russian-stylesheets`]: https://github.com/Semigradsky/postcss-russian-stylesheets
[`postcss-swedish-stylesheets`]: https://github.com/johnie/postcss-swedish-stylesheets
[`postcss-color-rebeccapurple`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-rebeccapurple
[`postcss-auto-var-fallback`]: https://github.com/Ch-Valentine/postcss-auto-var-fallback
[`postcss-color-rgba-fallback`]: https://github.com/postcss/postcss-color-rgba-fallback
[`postcss-spanish-stylesheets`]: https://github.com/ismamz/postcss-spanish-stylesheets
[`postcss-at-rules-variables`]: https://github.com/GitScrum/postcss-at-rules-variables
[`postcss-discard-duplicates`]: https://github.com/ben-eb/postcss-discard-duplicates
[`postcss-german-stylesheets`]: https://github.com/timche/postcss-german-stylesheets
[`postcss-logical-properties`]: https://github.com/ahmadalfy/postcss-logical-properties
[`postcss-bidirection`]: https://github.com/gasolin/postcss-bidirection
[`postcss-lolcat-stylesheets`]: https://github.com/sandralundgren/postcss-lolcat-stylesheets
[`postcss-minify-font-weight`]: https://github.com/ben-eb/postcss-minify-font-weight
[`postcss-pseudo-class-enter`]: https://github.com/csstools/postcss-pseudo-class-enter
[`postcss-transform-shortcut`]: https://github.com/csstools/postcss-transform-shortcut
[`postcss-unicode-characters`]: https://github.com/ben-eb/postcss-unicode-characters
[`postcss-custom-properties`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties
[`postcss-czech-stylesheets`]: https://github.com/HoBi/postcss-czech-stylesheets
[`postcss-discard-font-face`]: https://github.com/ben-eb/postcss-discard-font-face
[`postcss-responsive-images`]: https://www.npmjs.com/package/postcss-responsive-images
[`postcss-selector-prefixer`]: https://github.com/amaranter/postcss-selector-prefixer
[`postcss-tatar-stylesheets`]: https://github.com/azat-io/postcss-tatar-stylesheets
[`postcss-browser-reporter`]: https://github.com/postcss/postcss-browser-reporter
[`postcss-current-selector`]: https://github.com/komlev/postcss-current-selector
[`postcss-custom-selectors`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-selectors
[`postcss-discard-comments`]: https://github.com/ben-eb/postcss-discard-comments
[`postcss-forced-variables`]: https://github.com/alekhrycaiko/postcss-forced-variables
[`postcss-magic-animations`]: https://github.com/nucliweb/postcss-magic-animations/
[`postcss-minify-selectors`]: https://github.com/ben-eb/postcss-minify-selectors
[`postcss-mqwidth-to-class`]: https://github.com/notacouch/postcss-mqwidth-to-class
[`postcss-quantity-queries`]: https://github.com/pascalduez/postcss-quantity-queries
[`postcss-selector-matches`]: https://github.com/postcss/postcss-selector-matches
[`postcss-shorthand-expand`]: https://github.com/johnotander/postcss-shorthand-expand
[`postcss-dark-theme-class`]: https://github.com/postcss/postcss-dark-theme-class
[`postcss-theme-colors`]: https://github.com/ambar/postcss-theme-colors
[`postcss-all-link-colors`]: https://github.com/jedmao/postcss-all-link-colors
[`postcss-border-shortcut`]: https://github.com/michelemazzucco/postcss-border-shortcut
[`postcss-color-hex-alpha`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-hex-alpha
[`postcss-define-property`]: https://github.com/daleeidd/postcss-define-property
[`postcss-define-function`]: https://github.com/titancat/postcss-define-function
[`postcss-filter-gradient`]: https://github.com/yuezk/postcss-filter-gradient
[`postcss-generate-preset`]: https://github.com/simonsmith/postcss-generate-preset
[`postcss-local-constants`]: https://github.com/macropodhq/postcss-constants
[`postcss-media-variables`]: https://github.com/WolfgangKluge/postcss-media-variables
[`postcss-page-break`]: https://github.com/shrpne/postcss-page-break
[`postcss-property-lookup`]: https://github.com/simonsmith/postcss-property-lookup
[`postcss-remove-prefixes`]: https://github.com/johnotander/postcss-remove-prefixes
[`postcss-replace-overflow-wrap`]: https://github.com/MattDiMu/postcss-replace-overflow-wrap
[`postcss-range-value`]: https://github.com/soberwp/postcss-range-value
[`postcss-responsive-type`]: https://github.com/seaneking/postcss-responsive-type
[`postcss-round-subpixels`]: https://github.com/himynameisdave/postcss-round-subpixels
[`postcss-short-font-size`]: https://github.com/csstools/postcss-short-font-size
[`postcss-vertical-rhythm`]: https://github.com/markgoodyear/postcss-vertical-rhythm
[`postcss-border-9-patch`]: https://github.com/teaualune/postcss-border-9-patch
[`postcss-color-function`]: https://github.com/postcss/postcss-color-function
[`postcss-conic-gradient`]: https://github.com/csstools/postcss-conic-gradient
[`postcss-convert-values`]: https://github.com/ben-eb/postcss-convert-values
[`postcss-flexbugs-fixes`]: https://github.com/luisrudge/postcss-flexbugs-fixes
[`postcss-font-format-keywords`]: https://github.com/valtlai/postcss-font-format-keywords
[`postcss-font-normalize`]: https://github.com/iahu/postcss-font-normalize
[`postcss-hash-classname`]: https://github.com/ctxhou/postcss-hash-classname
[`postcss-oldschool-grid`]: https://github.com/lordgiotto/postcss-oldschool-grid
[`postcss-partial-import`]: https://github.com/csstools/postcss-partial-import
[`postcss-pseudoelements`]: https://github.com/axa-ch/postcss-pseudoelements
[`postcss-resemble-image`]: https://github.com/ben-eb/postcss-resemble-image
[`postcss-safe-important`]: https://github.com/Crimx/postcss-safe-important
[`postcss-shades-of-gray`]: https://github.com/laureanoarcanio/postcss-shades-of-gray
[`postcss-short-position`]: https://github.com/csstools/postcss-short-position
[`postcss-single-charset`]: https://github.com/hail2u/postcss-single-charset
[`css-declaration-sorter`]: https://github.com/Siilwyn/css-declaration-sorter
[`postcss-alias-atrules`]: https://github.com/maximkoretskiy/postcss-alias-atrules
[`postcss-assets-rebase`]: https://github.com/devex-web-frontend/postcss-assets-rebase
[`postcss-color-palette`]: https://github.com/zaim/postcss-color-palette
[`postcss-color-pantone`]: https://github.com/longdog/postcss-color-pantone
[`postcss-css-variables`]: https://github.com/MadLittleMods/postcss-css-variables
[`postcss-discard-empty`]: https://github.com/ben-eb/postcss-discard-empty
[`postcss-extract-value`]: https://github.com/lutien/postcss-extract-value
[`postcss-smooth-shadow`]: https://github.com/postcss/postcss-smooth-shadow/
[`postcss-filter-stream`]: https://www.npmjs.com/package/postcss-filter-stream
[`postcss-gradientfixer`]: https://github.com/hallvors/postcss-gradientfixer
[`postcss-image-inliner`]: https://github.com/bezoerb/postcss-image-inliner
[`postcss-modular-scale`]: https://github.com/kristoferjoseph/postcss-modular-scale
[`postcss-normalize-url`]: https://github.com/ben-eb/postcss-normalize-url
[`postcss-reduce-idents`]: https://github.com/ben-eb/postcss-reduce-idents
[`postcss-regexp-detect`]: https://github.com/devex-web-frontend/postcss-regexp-detect
[`postcss-reverse-media`]: https://github.com/MadLittleMods/postcss-reverse-media
[`postcss-russian-units`]: https://github.com/Semigradsky/postcss-russian-units
[`postcss-short-spacing`]: https://github.com/csstools/postcss-short-spacing
[`postcss-simple-extend`]: https://github.com/davidtheclark/postcss-simple-extend
[`postcss-speech-bubble`]: https://github.com/archana-s/postcss-speech-bubble
[`postcss-aspect-ratio`]: https://github.com/arccoza/postcss-aspect-ratio
[`postcss-brand-colors`]: https://github.com/postcss/postcss-brand-colors
[`postcss-no-important`]: https://github.com/DUBANGARCIA/postcss-no-important
[`postcss-class-prefix`]: https://github.com/thompsongl/postcss-class-prefix
[`postcss-conditionals`]: https://github.com/andyjansson/postcss-conditionals
[`postcss-custom-media`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media
[`postcss-default-unit`]: https://github.com/antyakushev/postcss-default-unit
[`postcss-flexboxfixer`]: https://github.com/hallvors/postcss-flexboxfixer
[`postcss-font-awesome`]: https://github.com/dan-gamble/postcss-font-awesome
[`postcss-font-variant`]: https://github.com/postcss/postcss-font-variant
[`postcss-lazyimagecss`]: https://github.com/Jeff2Ma/postcss-lazyimagecss
[`postcss-lazysprite`]: https://github.com/Jeff2Ma/postcss-lazysprite
[`postcss-media-minmax`]: https://github.com/postcss/postcss-media-minmax
[`postcss-merge-idents`]: https://github.com/ben-eb/postcss-merge-idents
[`postcss-mq-keyframes`]: https://github.com/TCotton/postcss-mq-keyframes
[`postcss-nested-props`]: https://github.com/jedmao/postcss-nested-props
[`postcss-sassy-mixins`]: https://github.com/andyjansson/postcss-sassy-mixins
[`postcss-selector-not`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-selector-not
[`postcss-svg-fallback`]: https://github.com/justim/postcss-svg-fallback
[`postcss-cachebuster`]: https://github.com/glebmachine/postcss-cachebuster
[`postcss-color-alpha`]: https://github.com/avanes/postcss-color-alpha
[`postcss-color-scale`]: https://github.com/kristoferjoseph/postcss-color-scale
[`postcss-color-short`]: https://github.com/andrepolischuk/postcss-color-short
[`postcss-copy-assets`]: https://github.com/shutterstock/postcss-copy-assets
[`postcss-data-packer`]: https://github.com/Ser-Gen/postcss-data-packer
[`postcss-easysprites`]: https://github.com/glebmachine/postcss-easysprites
[`postcss-flexibility`]: https://github.com/7rulnik/postcss-flexibility
[`postcss-font-family`]: https://github.com/ben-eb/postcss-font-family
[`postcss-fontsize`]: https://github.com/richbachman/postcss-fontsize
[`postcss-fontsource-url`]: https://github.com/mondeja/postcss-fontsource-url
[`postcss-grid-system`]: https://github.com/francoisromain/postcss-grid-system
[`postcss-input-style`]: https://github.com/seaneking/postcss-input-style
[`postcss-merge-rules`]: https://github.com/ben-eb/postcss-merge-rules
[`postcss-mq-optimize`]: https://github.com/panec/postcss-mq-optimize
[`postcss-nested-vars`]: https://github.com/jedmao/postcss-nested-vars
[`postcss-remove-root`]: https://github.com/cbracco/postcss-remove-root
[`postcss-simple-grid`]: https://github.com/admdh/postcss-simple-grid
[`postcss-simple-trig`]: https://github.com/Rplus/postcss-simple-trig
[`postcss-simple-vars`]: https://github.com/postcss/postcss-simple-vars
[`postcss-strip-units`]: https://github.com/whitneyit/postcss-strip-units
[`postcss-style-guide`]: https://github.com/morishitter/postcss-style-guide
[`postcss-will-change`]: https://github.com/postcss/postcss-will-change
[`postcss-randomcolor`]: https://github.com/alanev/postcss-randomcolor
[`postcss-filter-tint`]: https://github.com/alexlibby/postcss-filter-tint
[`postcss-ase-colors`]: https://github.com/dfernandez79/postcss-ase-colors
[`postcss-bem-linter`]: https://github.com/postcss/postcss-bem-linter
[`postcss-camelcaser`]: https://github.com/GMchris/postcss-camelcaser
[`postcss-color-gray`]: https://github.com/postcss/postcss-color-gray
[`postcss-color-hexa`]: https://github.com/nicksheffield/postcss-color-hexa
[`postcss-colorblind`]: https://github.com/btholt/postcss-colorblind
[`postcss-compact-mq`]: https://github.com/rominmx/postcss-compact-mq
[`postcss-grid-fluid`]: https://github.com/francoisromain/postcss-grid-fluid
[`postcss-inline-rtl`]: https://github.com/jakob101/postcss-inline-rtl
[`postcss-inline-svg`]: https://github.com/TrySound/postcss-inline-svg
[`postcss-short-text`]: https://github.com/csstools/postcss-short-text
[`postcss-animation`]: https://github.com/zhouwenbin/postcss-animation
[`postcss-autoreset`]: https://github.com/maximkoretskiy/postcss-autoreset
[`postcss-color-hcl`]: https://github.com/devgru/postcss-color-hcl
[`postcss-color-hwb`]: https://github.com/postcss/postcss-color-hwb
[`postcss-color-image`]: https://github.com/valtlai/postcss-color-image
[`postcss-color-mix`]: https://github.com/iamstarkov/postcss-color-mix
[`postcss-color-yiq`]: https://github.com/ben-eb/postcss-color-yiq
[`postcss-filter-mq`]: https://github.com/simeydotme/postcss-filter-mq
[`postcss-font-pack`]: https://github.com/jedmao/postcss-font-pack
[`postcss-functions`]: https://github.com/andyjansson/postcss-functions
[`postcss-get-color`]: https://github.com/ismamz/postcss-get-color
[`postcss-image-set`]: https://github.com/alex499/postcss-image-set
[`postcss-instagram`]: https://github.com/azat-io/postcss-instagram
[`postcss-namespace`]: https://github.com/totora0155/postcss-namespace
[`postcss-placehold`]: https://github.com/awayken/postcss-placehold
[`postcss-reference`]: https://github.com/dehuszar/postcss-reference
[`postcss-typescale`]: https://github.com/francoisromain/postcss-typescale
[`postcss-write-svg`]: https://github.com/csstools/postcss-write-svg
[`postcss-disabled`]: https://github.com/cocco3/postcss-disabled
[`postcss-clearfix`]: https://github.com/seaneking/postcss-clearfix
[`postcss-colormin`]: https://github.com/ben-eb/colormin
[`postcss-contrast`]: https://github.com/stephenway/postcss-contrast
[`postcss-cssstats`]: https://github.com/cssstats/postcss-cssstats
[`postcss-currency`]: https://github.com/talgautb/postcss-currency
[`postcss-fallback`]: https://github.com/MadLittleMods/postcss-fallback
[`postcss-fontpath`]: https://github.com/seaneking/postcss-fontpath
[`postcss-if-media`]: https://github.com/arccoza/postcss-if-media
[`postcss-inline-extract`]: https://github.com/knowledgecode/postcss-inline-extract
[`postcss-imperial`]: https://github.com/cbas/postcss-imperial
[`postcss-position`]: https://github.com/seaneking/postcss-position
[`postcss-reporter`]: https://github.com/postcss/postcss-reporter
[`postcss-rgba-hex`]: https://github.com/XOP/postcss-rgba-hex
[`postcss-sanitize`]: https://github.com/eramdam/postcss-sanitize
[`postcss-spiffing`]: https://github.com/HashanP/postcss-spiffing
[`postcss-triangle`]: https://github.com/jedmao/postcss-triangle
[`postcss-trolling`]: https://github.com/juanfran/postcss-trolling
[`postcss-verthorz`]: https://github.com/davidhemphill/postcss-verthorz
[`pleeease-filters`]: https://github.com/iamvdo/pleeease-filters
[`postcss-easings`]: https://github.com/postcss/postcss-easings
[`postcss-flexbox`]: https://github.com/archana-s/postcss-flexbox
[`postcss-hexrgba`]: https://github.com/seaneking/postcss-hexrgba
[`postcss-initial`]: https://github.com/maximkoretskiy/postcss-initial
[`postcss-modules`]: https://github.com/outpunk/postcss-modules
[`postcss-opacity`]: https://github.com/iamvdo/postcss-opacity
[`postcss-opacity-percentage`]: https://github.com/Dreamseer/postcss-opacity-percentage
[`postcss-pointer`]: https://github.com/markgoodyear/postcss-pointer
[`postcss-pxtorem`]: https://github.com/cuth/postcss-pxtorem
[`postcss-rgb-plz`]: https://github.com/himynameisdave/postcss-rgb-plz
[`postcss-map-get`]: https://github.com/GitScrum/postcss-map-get
[`postcss-scopify`]: https://github.com/pazams/postcss-scopify
[`postcss-sorting`]: https://github.com/hudochenkov/postcss-sorting
[`postcss-sprites`]: https://github.com/2createStudio/postcss-sprites
[`postcss-assets`]: https://github.com/borodean/postcss-assets
[`postcss-atroot`]: https://github.com/OEvgeny/postcss-atroot
[`postcss-border`]: https://github.com/andrepolischuk/postcss-border
[`postcss-button`]: https://github.com/francoisromain/postcss-button
[`postcss-center`]: https://github.com/jedmao/postcss-center
[`postcss-circle`]: https://github.com/jedmao/postcss-circle
[`postcss-esplit`]: https://github.com/vitaliyr/postcss-esplit
[`postcss-extend`]: https://github.com/travco/postcss-extend
[`postcss-fakeid`]: https://github.com/pathsofdesign/postcss-fakeid
[`postcss-filter`]: https://github.com/alanev/postcss-filter
[`postcss-hidden`]: https://github.com/lukelarsen/postcss-hidden
[`postcss-import`]: https://github.com/postcss/postcss-import
[`postcss-nested-import`]: https://github.com/eriklharper/postcss-nested-import
[`postcss-layout`]: https://github.com/arccoza/postcss-layout
[`postcss-mixins`]: https://github.com/postcss/postcss-mixins
[`postcss-nested`]: https://github.com/postcss/postcss-nested
[`postcss-rtlcss`]: https://github.com/elchininet/postcss-rtlcss
[`postcss-select`]: https://github.com/johnotander/postcss-select
[`postcss-urlrebase`]: https://github.com/strarsis/postcss-urlrebase
[`postcss-urlrev`]: https://github.com/yuezk/postcss-urlrev
[`postcss-zindex`]: https://www.npmjs.com/package/postcss-zindex
[`list-selectors`]: https://github.com/davidtheclark/list-selectors
[`mq4-hover-shim`]: https://github.com/twbs/mq4-hover-shim
[`postcss-alias`]: https://github.com/seaneking/postcss-alias
[`postcss-apply`]: https://github.com/pascalduez/postcss-apply
[`postcss-focus`]: https://github.com/postcss/postcss-focus
[`postcss-match`]: https://github.com/rtsao/postcss-match
[`postcss-scrib`]: https://github.com/sneakertack/postcss-scrib
[`css2modernizr`]: https://github.com/vovanbo/css2modernizr
[`font-magician`]: https://github.com/csstools/postcss-font-magician
[`immutable-css`]: https://github.com/johno/immutable-css
[`perfectionist`]: https://github.com/ben-eb/perfectionist
[`postcss-uncss`]: https://github.com/RyanZim/postcss-uncss
[`postcss-click`]: https://github.com/ismamz/postcss-click
[`postcss-at2x`]: https://github.com/simonsmith/postcss-at2x
[`postcss-calc`]: https://github.com/postcss/postcss-calc
[`postcss-remove-nested-calc`]: https://github.com/nico-jacobs/postcss-remove-nested-calc
[`postcss-crip`]: https://github.com/johnie/postcss-crip
[`postcss-each`]: https://github.com/outpunk/postcss-each
[`postcss-epub`]: https://github.com/Rycochet/postcss-epub
[`postcss-grid`]: https://github.com/andyjansson/postcss-grid
[`postcss-host`]: https://github.com/vitkarpov/postcss-host
[`postcss-maze`]: https://github.com/cathydutton/postcss-maze
[`postcss-neat`]: https://github.com/jo-asakura/postcss-neat
[`postcss-size`]: https://github.com/postcss/postcss-size
[`postcss-size-advanced`]: https://github.com/jhpratt/postcss-size-advanced
[`postcss-svgo`]: https://www.npmjs.com/package/postcss-svgo
[`postcss-unmq`]: https://github.com/csstools/postcss-unmq
[`postcss-vmin`]: https://github.com/iamvdo/postcss-vmin
[`postcss-nope`]: https://github.com/dariopog/postcss-nope
[`autoprefixer`]: https://github.com/postcss/autoprefixer
[`css-mqpacker`]: https://github.com/hail2u/node-css-mqpacker
[`postcss-bem-fix`]: https://github.com/supermonkeyz/postcss-bem-fix
[`postcss-for`]: https://github.com/antyakushev/postcss-for
[`postcss-ie8`]: https://github.com/4wdmedia/postcss-ie8
[`postcss-map`]: https://github.com/pascalduez/postcss-map
[`postcss-raw`]: https://github.com/MadLittleMods/postcss-raw
[`postcss-svg`]: https://github.com/Pavliko/postcss-svg
[`postcss-url`]: https://github.com/postcss/postcss-url
[`webp-in-css`]: https://github.com/ai/webp-in-css
[`postcss-ref`]: https://github.com/morishitter/postcss-ref
[`colorguard`]: https://github.com/SlexAxton/css-colorguard
[`css-byebye`]: https://github.com/AoDev/css-byebye
[`stylehacks`]: https://www.npmjs.com/package/stylehacks
[`cssgrace`]: https://github.com/cssdream/cssgrace
[`stylefmt`]: https://github.com/morishitter/stylefmt
[`csstyle`]: https://github.com/geddski/csstyle
[`webpcss`]: https://github.com/lexich/webpcss
[`doiuse`]: https://github.com/anandthakker/doiuse
[`pixrem`]: https://github.com/robwierzbowski/node-pixrem
[`postcss-fixie`]: https://github.com/tivac/fixie
[`rtlcss`]: https://github.com/MohammadYounes/rtlcss
[`short`]: https://github.com/csstools/postcss-short
[`lost`]: https://github.com/corysimmons/lost
[`postcss-text-remove-gap`]: https://github.com/m18ru/postcss-text-remove-gap
[`postcss-closest`]: https://github.com/m18ru/postcss-closest
[`postcss-grid-kiss`]: https://github.com/sylvainpolletvillard/postcss-grid-kiss
[`postcss-unprefix`]: https://github.com/gucong3000/postcss-unprefix
[`postcss-pie`]: https://github.com/gucong3000/postcss-pie
[`postcss-color-hsl`]: https://github.com/dmarchena/postcss-color-hsl
[`postcss-color-rgb`]: https://github.com/dmarchena/postcss-color-rgb
[`postcss-parent-selector`]: https://github.com/domwashburn/postcss-parent-selector
[`postcss-font-family-system-ui`]: https://github.com/JLHwung/postcss-font-family-system-ui
[`postcss-percentage`]: https://github.com/creeperyang/postcss-percentage
[`postcss-start-to-end`]: https://github.com/sandrina-p/postcss-start-to-end
[`postcss-autocorrect`]: https://github.com/DimitrisNL/postcss-autocorrect
[`postcss-html-filter`]: https://github.com/mapbox/postcss-html-filter
[`postcss-hash`]: https://github.com/dacodekid/postcss-hash
[`postcss-light-text`]: https://github.com/jdsteinbach/postcss-light-text
[`postcss-bom`]: https://github.com/dichuvichkin/postcss-bom
[`postcss-eol`]: https://github.com/dichuvichkin/postcss-eol
[`postcss-node-modules-replacer`]: https://github.com/dichuvichkin/postcss-node-modules-replacer
[`postcss-mq-last`]: https://github.com/JGJP/postcss-mq-last
[`postcss-bem-to-js`]: https://github.com/WebSeed/postcss-bem-to-js
[`postcss-foft-classes`]: https://github.com/zachleat/postcss-foft-classes
[`postcss-inline-media`]: https://github.com/dimitrinicolas/postcss-inline-media
[`postcss-nested-ancestors`]: https://github.com/toomuchdesign/postcss-nested-ancestors
[`postcss-subgrid`]: https://github.com/seaneking/postcss-subgrid
[`postcss-join-transitions`]: https://github.com/JGJP/postcss-join-transitions
[`postcss-font-display`]: https://github.com/dkrnl/postcss-font-display
[`postcss-if-function`]: https://github.com/mfranzke/css-if-polyfill/tree/main/packages/postcss-if-function
[`postcss-glitch`]: https://github.com/crftd/postcss-glitch
[`postcss-class-name-shortener`]: https://github.com/mbrandau/postcss-class-name-shortener
[`postcss-plugin-namespace`]: https://github.com/ymrdf/postcss-plugin-namespace
[`postcss-classes-to-mixins`]: https://github.com/nrkno/postcss-classes-to-mixins
[`postcss-px-to-viewport`]: https://github.com/evrone/postcss-px-to-viewport
[`postcss-font-grabber`]: https://github.com/AaronJan/postcss-font-grabber
[`postcss-redundant-color-vars`]: https://github.com/caseyjacobson/postcss-redundant-color-vars
[`postcss-safe-area`]: https://github.com/plegner/postcss-safe-area
[`postcss-sort-media-queries`]: https://github.com/solversgroup/postcss-sort-media-queries
[`postcss-momentum-scrolling`]: https://github.com/solversgroup/postcss-momentum-scrolling
[`postcss-viewport-height-correction`]: https://github.com/Faisal-Manzer/postcss-viewport-height-correction
[`postcss-clamp`]: https://github.com/polemius/postcss-clamp
[`postcss-pseudo-is`]: https://github.com/IlyaUpyackovich/postcss-pseudo-is
[`postcss-deep-scopable`]: https://github.com/litt1e-p/postcss-deep-scopable
[`postcss-deadcss`]: https://github.com/DenyVeyten/postcss-deadcss
[`postcss-flexbox-reset`]: https://github.com/AndrejGajdos/postcss-flexbox-reset
[`postcss-grid-reset`]: https://github.com/AndrejGajdos/postcss-grid-reset
[`webp-in-css`]: https://github.com/ai/webp-in-css
[`avif-in-css`]: https://github.com/nucliweb/avif-in-css
[`postcss-custom-css-units`]: https://github.com/joe223/postcss-custom-css-units
[`postcss-khaleesi`]: https://github.com/Hugoer/postcss-khaleesi
[`postcss-blurry-gradient-workaround`]: https://github.com/strarsis/postcss-blurry-gradient-workaround
[`postcss-d-ts`]: https://github.com/askirmas/postcss-d-ts
[`postcss-multi-value-display`]: https://github.com/jake-low/postcss-multi-value-display
[`postcss-easy-z`]: https://github.com/CSSSR/postcss-easy-z
[`postcss-icon-blender`]: https://github.com/icon-blender/postcss-icon-blender
[`postcss-variable-compress`]: https://github.com/navanshu/postcss-variable-compress
[`postcss-unit-processor`]: https://github.com/hex-ci/postcss-unit-processor
[`postcss-rem-to-px`]: https://github.com/TheDutchCoder/postcss-rem-to-px
[`postcss-prefix-hover`]: https://github.com/larsmunkholm/postcss-prefix-hover
[`postcss-resolve-urls`]: https://github.com/bognarlaszlo/postcss-resolve-urls
[`postcss-design-tokens`]: https://github.com/jptaranto/postcss-design-tokens
[`postcss-pixel-to-remvw`]: https://github.com/ben-lau/postcss-pixel-to-remvw
[`@csstools/postcss-design-tokens`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-design-tokens
[`postcss-easy-import`]: https://github.com/TrySound/postcss-easy-import
[`postcss-spring-easing`]: https://github.com/okikio/postcss-spring-easing
[`postcss-plugin-ignore-file`]: https://github.com/RiadhAdrani/postcss-plugin-ignore-file
================================================
FILE: docs/source-maps.md
================================================
# PostCSS and Source Maps
See our **[source map API docs](https://postcss.org/api/#sourcemapoptions)**.
================================================
FILE: docs/syntax.md
================================================
# How to Write Custom Syntax
PostCSS can transform styles in any syntax, and is not limited to just CSS.
By writing a custom syntax, you can transform styles in any desired format.
Writing a custom syntax is much harder than writing a PostCSS plugin, but
it is an awesome adventure.
There are 3 types of PostCSS syntax packages:
* **Parser** to parse input string to node’s tree.
* **Stringifier** to generate output string by node’s tree.
* **Syntax** contains both parser and stringifier.
**Table of Contents**
* [Syntax](#syntax)
* [Parser](#parser)
* [Main Theory](#main-theory)
* [Performance](#performance)
* [Node Source](#node-source)
* [Raw Values](#raw-values)
* [Tests](#tests)
* [Stringifier](#stringifier)
* [Main Theory](#main-theory-1)
* [Builder Function](#builder-function)
* [Raw Values](#raw-values-1)
* [Tests](#tests-1)
## Syntax
A good example of a custom syntax is [SCSS]. Some users may want to transform
SCSS sources with PostCSS plugins, for example if they need to add vendor
prefixes or change the property order. So this syntax should output SCSS from
an SCSS input.
The syntax API is a very simple plain object, with `parse` & `stringify`
functions:
```js
module.exports = {
parse: require('./parse'),
stringify: require('./stringify')
}
```
[SCSS]: https://github.com/postcss/postcss-scss
## Parser
A good example of a parser is [Safe Parser], which parses malformed/broken CSS.
Because there is no point to generate broken output, this package only provides
a parser.
The parser API is a function which receives a string & returns a [`Root`]
or [`Document`] node. The second argument is a function which receives
an object with PostCSS options.
```js
const postcss = require('postcss')
module.exports = function parse (css, opts) {
const root = postcss.root()
// Add other nodes to root
return root
}
```
For open source parser npm package must have `postcss` in `peerDependencies`,
not in direct `dependencies`.
[Safe Parser]: https://github.com/postcss/postcss-safe-parser
[`Root`]: https://postcss.org/api/#root
[`Document`]: https://postcss.org/api/#document
### Main Theory
There are many books about parsers; but do not worry because CSS syntax is
very easy, and so the parser will be much simpler than a programming language
parser.
The default PostCSS parser contains two steps:
1. [Tokenizer] which reads input string character by character and builds a
tokens array. For example, it joins space symbols to a `['space', '\n ']`
token, and detects strings to a `['string', '"\"{"']` token.
2. [Parser] which reads the tokens array, creates node instances and
builds a tree.
[Tokenizer]: https://github.com/postcss/postcss/blob/main/lib/tokenize.js
[Parser]: https://github.com/postcss/postcss/blob/main/lib/parser.js
### Performance
Parsing input is often the most time consuming task in CSS processors. So it
is very important to have a fast parser.
The main rule of optimization is that there is no performance without a
benchmark. You can look at [PostCSS benchmarks] to build your own.
Of parsing tasks, the tokenize step will often take the most time, so its
performance should be prioritized. Unfortunately, classes, functions and
high level structures can slow down your tokenizer. Be ready to write dirty
code with repeated statements. This is why it is difficult to extend the
default [PostCSS tokenizer]; copy & paste will be a necessary evil.
Second optimization is using character codes instead of strings.
```js
// Slow
string[i] === '{'
// Fast
const OPEN_CURLY = 123 // `{'
string.charCodeAt(i) === OPEN_CURLY
```
Third optimization is “fast jumps”. If you find open quotes, you can find
next closing quote much faster by `indexOf`:
```js
// Simple jump
next = string.indexOf('"', currentPosition + 1)
// Jump by RegExp
regexp.lastIndex = currentPosion + 1
regexp.test(string)
next = regexp.lastIndex
```
The parser can be a well written class. There is no need in copy-paste and
hardcore optimization there. You can extend the default [PostCSS parser].
[PostCSS benchmarks]: https://github.com/postcss/benchmark
[PostCSS tokenizer]: https://github.com/postcss/postcss/blob/main/lib/tokenize.js
[PostCSS parser]: https://github.com/postcss/postcss/blob/main/lib/parser.js
### Node Source
Every node should have `source` property to generate correct source map.
This property contains `start` and `end` properties with `{ line, column }`,
and `input` property with an [`Input`] instance.
Your tokenizer should save the original position so that you can propagate
the values to the parser, to ensure that the source map is correctly updated.
[`Input`]: https://github.com/postcss/postcss/blob/main/lib/input.js
### Raw Values
A good PostCSS parser should provide all information (including spaces symbols)
to generate byte-to-byte equal output. It is not so difficult, but respectful
for user input and allow integration smoke tests.
A parser should save all additional symbols to `node.raws` object.
It is an open structure for you, you can add additional keys.
For example, [SCSS parser] saves comment types (`/* */` or `//`)
in `node.raws.inline`.
The default parser cleans CSS values from comments and spaces.
It saves the original value with comments to `node.raws.value.raw` and uses it,
if the node value was not changed.
[SCSS parser]: https://github.com/postcss/postcss-scss
### Tests
Of course, all parsers in the PostCSS ecosystem must have tests.
If your parser just extends CSS syntax (like [SCSS] or [Safe Parser]),
you can use the [PostCSS Parser Tests]. It contains unit & integration tests.
[PostCSS Parser Tests]: https://github.com/postcss/postcss-parser-tests
## Stringifier
A style guide generator is a good example of a stringifier. It generates output
HTML which contains CSS components. For this use case, a parser isn't necessary,
so the package should just contain a stringifier.
The Stringifier API is little bit more complicated, than the parser API.
PostCSS generates a source map, so a stringifier can’t just return a string.
It must link every substring with its source node.
A Stringifier is a function which receives [`Root`] or [`Document`] node and builder callback.
Then it calls builder with every node’s string and node instance.
```js
module.exports = function stringify (root, builder) {
// Some magic
const string = decl.prop + ':' + decl.value + ';'
builder(string, decl)
// Some science
};
```
### Main Theory
PostCSS [default stringifier] is just a class with a method for each node type
and many methods to detect raw properties.
In most cases it will be enough just to extend this class,
like in [SCSS stringifier].
[default stringifier]: https://github.com/postcss/postcss/blob/main/lib/stringifier.js
[SCSS stringifier]: https://github.com/postcss/postcss-scss/blob/main/lib/scss-stringifier.js
### Builder Function
A builder function will be passed to `stringify` function as second argument.
For example, the default PostCSS stringifier class saves it
to `this.builder` property.
Builder receives output substring and source node to append this substring
to the final output.
Some nodes contain other nodes in the middle. For example, a rule has a `{`
at the beginning, many declarations inside and a closing `}`.
For these cases, you should pass a third argument to builder function:
`'start'` or `'end'` string:
```js
this.builder(rule.selector + '{', rule, 'start')
// Stringify declarations inside
this.builder('}', rule, 'end')
```
### Raw Values
A good PostCSS custom syntax saves all symbols and provide byte-to-byte equal
output if there were no changes.
This is why every node has `node.raws` object to store space symbol, etc.
All data related to source code and not CSS structure, should be in `Node#raws`. For instance, `postcss-scss` keep in `Comment#raws.inline` boolean marker of inline comment (`// comment` instead of `/* comment */`).
Be careful, because sometimes these raw properties will not be present; some
nodes may be built manually, or may lose their indentation when they are moved
to another parent node.
This is why the default stringifier has a `raw()` method to autodetect raw
properties by other nodes. For example, it will look at other nodes to detect
indent size and then multiply it with the current node depth.
### Tests
A stringifier must have tests too.
You can use unit and integration test cases from [PostCSS Parser Tests].
Just compare input CSS with CSS after your parser and stringifier.
[PostCSS Parser Tests]: https://github.com/postcss/postcss-parser-tests
================================================
FILE: docs/writing-a-plugin.md
================================================
# Writing a PostCSS Plugin
**Table of Contents**
* [Links](#links)
* [Step 1: Create an idea](#step-1-create-an-idea)
* [Step 2: Create a project](#step-2-create-a-project)
* [Step 3: Find nodes](#step-3-find-nodes)
* [Step 4: Change nodes](#step-4-change-nodes)
* [Step 5: Fight with frustration](#step-5-fight-with-frustration)
* [Step 6: Make it public](#step-6-make-it-public)
## Links
Documentation:
* [Plugin Boilerplate](https://github.com/postcss/postcss-plugin-boilerplate)
* [Plugin Guidelines](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md)
* [PostCSS API](https://postcss.org/api/)
* [AST playground](https://astexplorer.net/#/2uBU1BLuJ1)
Support:
* [Ask questions](https://github.com/orgs/postcss/discussions)
* [PostCSS twitter](https://twitter.com/postcss) with latest updates.
## Step 1: Create an idea
There are many fields where writing new PostCSS plugin will help your work:
* **Compatibility fixes:** if you always forget to add hack
for browser compatibility, you can create PostCSS plugin to automatically
insert this hack for you. [`postcss-flexbugs-fixes`] and [`postcss-100vh-fix`]
are good examples.
* **Automate routine operations:** let’s computer do routine operations, free
yourself for creative tasks. For instance, PostCSS with [RTLCSS] can
automatically convert a design to right-to-left languages (like Arabic
or Hebrew) or with [postcss-dark-theme-class`] can insert media
queries for dark/light theme switcher.
* **Preventing popular mistakes:** “if an error happened twice,
it will happen again.” PostCSS plugin can check your source code for popular
mistakes and save your time for unnecessary debugging. The best way to do it
is to [write new Stylelint plugin] (Stylelint uses PostCSS inside).
* **Increasing code maintainability:** [CSS Modules] or [`postcss-autoreset`]
are great example how PostCSS can increase code maintainability by isolation.
* **Polyfills:** we already have a lot polyfills for CSS drafts
in [`postcss-preset-env`]. If you find a new draft, you can add a new plugin
and send it to this preset.
* **New CSS syntax:** we recommend avoiding adding new syntax to CSS.
If you want to add a new feature, it is always better to write a CSS draft
proposal, send it to [CSSWG] and then implement polyfill.
[`postcss-easing-gradients`] with [this proposal] is a good example.
However, there are a lot of cases when you can’t send a proposal.
For instance, browser’s parser performance limited CSSWG nested syntax a lot
and you may want to have non-official Sass-like syntax from [`postcss-nested].
[`postcss-easing-gradients`]: https://github.com/larsenwork/postcss-easing-gradients
[write new Stylelint plugin]: https://stylelint.io/developer-guide/plugins
[postcss-dark-theme-class`]: https://github.com/postcss/postcss-dark-theme-class
[`postcss-flexbugs-fixes`]: https://github.com/luisrudge/postcss-flexbugs-fixes
[`postcss-preset-env`]: https://github.com/csstools/postcss-preset-env
[`postcss-autoreset`]: https://github.com/maximkoretskiy/postcss-autoreset
[`postcss-100vh-fix`]: https://github.com/postcss/postcss-100vh-fix
[`postcss-nested]: https://github.com/postcss/postcss-nested
[this proposal]: https://github.com/w3c/csswg-drafts/issues/1332
[CSS Modules]: https://github.com/css-modules/css-modules
[RTLCSS]: https://rtlcss.com/
[CSSWG]: https://github.com/w3c/csswg-drafts
## Step 2: Create a project
There are two ways to write a plugin:
* Create a **private** plugin. Use this way only if the plugin is related
to specific things of projects. For instance, you want to automate a specific
task for your unique UI library.
* Publish a **public** plugin. It is always the recommended way. Remember that
private front-end systems, even in Google, often became unmaintained.
On the other hand, many popular plugins were created during the work
on a closed source project.
For private plugin:
1. Create a new file in `postcss/` folder with the name of your plugin.
2. Copy [plugin template] from our boilerplate.
For public plugins:
1. Use the guide in [PostCSS plugin boilerplate] to create a plugin directory.
2. Create a repository on GitHub or GitLab.
3. Publish your code there.
```js
module.exports = (opts = {}) => {
// Plugin creator to check options or prepare shared state
return {
postcssPlugin: 'PLUGIN NAME'
// Plugin listeners
}
}
module.exports.postcss = true
```
[PostCSS plugin boilerplate]: https://github.com/postcss/postcss-plugin-boilerplate/
[plugin template]: https://github.com/postcss/postcss-plugin-boilerplate/blob/main/template/index.t.js
## Step 3: Find nodes
Most of the PostCSS plugins do two things:
1. Find something in CSS (for instance, `will-change` property).
2. Change found elements (for instance, insert `transform: translateZ(0)` before
`will-change` as a polyfill for old browsers).
PostCSS parses CSS to the tree of nodes (we call it AST). This tree may content:
* [`Root`]: node of the top of the tree, which represent CSS file.
* [`AtRule`]: statements begin with `@` like `@charset "UTF-8"`
or `@media (screen) {}`.
* [`Rule`]: selector with declaration inside. For instance `input, button {}`.
* [`Declaration`]: key-value pair like `color: black`;
* [`Comment`]: stand-alone comment. Comments inside selectors, at-rule
parameters and values are stored in node’s `raws` property.
You can use [AST Explorer](https://astexplorer.net/#/2uBU1BLuJ1) to learn
how PostCSS convert different CSS to AST.
[`Root`]: https://postcss.org/api/#root
[`AtRule`]: https://postcss.org/api/#atrule
[`Rule`]: https://postcss.org/api/#rule
[`Declaration`]: https://postcss.org/api/#declaration
[`Comment`]: https://postcss.org/api/#comment
You can find all nodes with specific types by adding method to plugin object:
```js
module.exports = (opts = {}) => {
return {
postcssPlugin: 'PLUGIN NAME',
Once (root) {
// Calls once per file, since every file has single Root
},
Declaration (decl) {
// All declaration nodes
}
}
}
module.exports.postcss = true
```
Here is the full list of [plugin’s events](https://postcss.org/api/#plugin).
If you need declaration or at-rule with specific names,
you can use quick search:
```js
Declaration: {
color: decl => {
// All `color` declarations
}
'*': decl => {
// All declarations
}
},
AtRule: {
media: atRule => {
// All @media at-rules
}
}
```
For other cases, you can use regular expressions or specific parsers:
* [Selector parser](https://github.com/postcss/postcss-selector-parser)
* [Value parser](https://github.com/TrySound/postcss-value-parser)
* [Dimension parser](https://github.com/jedmao/parse-css-dimension)
for `number`, `length` and `percentage`.
* [Media query parser](https://github.com/dryoma/postcss-media-query-parser)
* [Font parser](https://github.com/jedmao/parse-css-font)
* [Sides parser](https://github.com/jedmao/parse-css-sides)
for `margin`, `padding` and `border` properties.
Other tools to analyze AST:
* [Property resolver](https://github.com/jedmao/postcss-resolve-prop)
* [Function resolver](https://github.com/andyjansson/postcss-functions)
* [Font helpers](https://github.com/jedmao/postcss-font-helpers)
* [Margin helpers](https://github.com/jedmao/postcss-margin-helpers)
Don’t forget that regular expression and parsers are heavy tasks. You can use
`String#includes()` quick test before check node with heavy tool:
```js
if (decl.value.includes('gradient(')) {
let value = valueParser(decl.value)
…
}
```
There two types or listeners: enter and exit. `Once`, `Root`, `AtRule`,
and `Rule` will be called before processing children. `OnceExit`, `RootExit`,
`AtRuleExit`, and `RuleExit` after processing all children inside node.
You may want to re-use some data between listeners. You can do with
runtime-defined listeners:
```js
module.exports = (opts = {}) => {
return {
postcssPlugin: 'vars-collector',
prepare (result) {
const variables = {}
return {
Declaration (node) {
if (node.variable) {
variables[node.prop] = node.value
}
},
OnceExit () {
console.log(variables)
}
}
}
}
}
```
You can use `prepare()` to generate listeners dynamically. For instance,
to use [Browserslist] to get declaration properties.
[Browserslist]: https://github.com/browserslist/browserslist
## Step 4: Change nodes
When you find the right nodes, you will need to change them or to insert/delete
other nodes around.
PostCSS node has a DOM-like API to transform AST. Check out our [API docs].
Nodes has methods to travel around (like [`Node#next`] or [`Node#parent`]),
look to children (like [`Container#some`]), remove a node
or add a new node inside.
Plugin’s methods will receive node creators in second argument:
```js
Declaration (node, { Rule }) {
let newRule = new Rule({ selector: 'a', source: node.source })
node.root().append(newRule)
newRule.append(node)
}
```
If you added new nodes, it is important to copy [`Node#source`] to generate
correct source maps.
Plugins will re-visit all nodes, which you changed or added. If you will change
any children, plugin will re-visit parent as well. Only `Once` and
`OnceExit` will not be called again.
```js
const plugin = () => {
return {
postcssPlugin: 'to-red',
Rule (rule) {
console.log(rule.toString())
},
Declaration (decl) {
console.log(decl.toString())
decl.value = 'red'
}
}
}
plugin.postcss = true
await postcss([plugin]).process('a { color: black }', { from })
// => a { color: black }
// => color: black
// => a { color: red }
// => color: red
```
Since visitors will re-visit node on any changes, just adding children will
cause an infinite loop. To prevent it, you need to check
that you already processed this node:
```js
Declaration: {
'will-change': decl => {
if (decl.parent.some(decl => decl.prop === 'transform')) {
decl.cloneBefore({ prop: 'transform', value: 'translate3d(0, 0, 0)' })
}
}
}
```
You can also use `Symbol` to mark processed nodes:
```js
const processed = Symbol('processed')
const plugin = () => {
return {
postcssPlugin: 'example',
Rule (rule) {
if (!rule[processed]) {
process(rule)
rule[processed] = true
}
}
}
}
plugin.postcss = true
```
Second argument also have `result` object to add warnings:
```js
Declaration: {
bad: (decl, { result }) {
decl.warn(result, 'Deprecated property bad')
}
}
```
If your plugin depends on another file, you can attach a message to `result`
to signify to runners (webpack, Gulp etc.) that they should rebuild the CSS
when this file changes:
```js
AtRule: {
import: (atRule, { result }) {
const importedFile = parseImport(atRule)
result.messages.push({
type: 'dependency',
plugin: 'postcss-import',
file: importedFile,
parent: result.opts.from
})
}
}
```
If the dependency is a directory you should use the `dir-dependency`
message type instead:
```js
result.messages.push({
type: 'dir-dependency',
plugin: 'postcss-import',
dir: importedDir,
parent: result.opts.from
})
```
If you find an syntax error (for instance, undefined custom property),
you can throw a special error:
```js
if (!variables[name]) {
throw decl.error(`Unknown variable ${name}`, { word: name })
}
```
[`Container#some`]: https://postcss.org/api/#container-some
[`Node#source`]: https://postcss.org/api/#node-source
[`Node#parent`]: https://postcss.org/api/#node-parent
[`Node#next`]: https://postcss.org/api/#node-next
[API docs]: https://postcss.org/api/
## Step 5: Fight with frustration
> I hate programming<br />
> I hate programming<br />
> I hate programming<br />
> It works!<br />
> I love programming
You will have bugs and a minimum of 10 minutes in debugging even a simple plugin.
You may found that simple origin idea will not work in real-world and you need
to change everything.
Don’t worry. Every bug is findable, and finding another solution may make your
plugin even better.
Start from writing tests. Plugin boilerplate has a test template
in `index.test.js`. Call `npx jest` to test your plugin.
Use Node.js debugger in your text editor or just `console.log`
to debug the code.
PostCSS community can help you since we are all experiencing the same problems.
Don’t afraid to ask in [special channel](https://github.com/orgs/postcss/discussions).
## Step 6: Make it public
When your plugin is ready, call `npx clean-publish` in your repository.
[`clean-publish`] is a tool to remove development configs from the npm package.
We added this tool to our plugin boilerplate.
Write a tweet about your new plugin (even if it is a small one) with
[`@postcss`] mention. Or tell about your plugin in [our chat].
We will help you with marketing.
[Add your new plugin] to PostCSS plugin catalog.
[Add your new plugin]: https://github.com/himynameisdave/postcss-plugins#submitting-a-new-plugin
[`clean-publish`]: https://github.com/shashkovdanil/clean-publish/
[`@postcss`]: https://twitter.com/postcss
================================================
FILE: eslint.config.mjs
================================================
import loguxTsConfig from '@logux/eslint-config/ts'
export default [
{ ignores: ['docs/api/assets/', '**/errors.ts'] },
...loguxTsConfig,
{
rules: {
'@typescript-eslint/consistent-type-imports': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-require-imports': 'off',
'@typescript-eslint/no-this-alias': 'off',
'@typescript-eslint/prefer-optional-chain': 'off',
'consistent-return': 'off',
'global-require': 'off',
'n/no-unsupported-features/es-syntax': [
'error',
{
ignores: ['hashbang', 'modules']
}
],
'n/no-unsupported-features/node-builtins': [
'error',
{ ignores: ['url.fileURLToPath', 'url.pathToFileURL', 'btoa', 'atob'] }
],
'n/prefer-node-protocol': 'off',
'perfectionist/sort-switch-case': 'off'
}
},
{
files: ['**/*.d.ts'],
rules: {
'@typescript-eslint/no-redeclare': 'off',
'n/no-unsupported-features/es-syntax': 'off',
'no-shadow': 'off',
'no-use-before-define': 'off'
}
},
{
files: ['**/*.test.*', '**/types.ts'],
rules: {
'@typescript-eslint/no-base-to-string': 'off',
'@typescript-eslint/no-unsafe-return': 'off',
'@typescript-eslint/no-unused-expressions': 'off',
'@typescript-eslint/restrict-template-expressions': 'off',
'@typescript-eslint/unbound-method': 'off',
'func-style': 'off',
'n/no-unsupported-features/es-syntax': 'off',
'n/no-unsupported-features/node-builtins': 'off',
'no-console': 'off',
'no-unused-expressions': 'off'
}
}
]
================================================
FILE: lib/at-rule.d.ts
================================================
import Container, {
ContainerProps,
ContainerWithChildren
} from './container.js'
declare namespace AtRule {
export interface AtRuleRaws extends Record<string, unknown> {
/**
* The space symbols after the last child of the node to the end of the node.
*/
after?: string
/**
* The space between the at-rule name and its parameters.
*/
afterName?: string
/**
* The space symbols before the node. It also stores `*`
* and `_` symbols before the declaration (IE hack).
*/
before?: string
/**
* The symbols between the last parameter and `{` for rules.
*/
between?: string
/**
* The rule’s selector with comments.
*/
params?: {
raw: string
value: string
}
/**
* Contains `true` if the last child has an (optional) semicolon.
*/
semicolon?: boolean
}
export interface AtRuleProps extends ContainerProps {
/** Name of the at-rule. */
name: string
/** Parameters following the name of the at-rule. */
params?: number | string
/** Information used to generate byte-to-byte equal node string as it was in the origin input. */
raws?: AtRuleRaws
}
export { AtRule_ as default }
}
/**
* Represents an at-rule.
*
* ```js
* Once (root, { AtRule }) {
* let media = new AtRule({ name: 'media', params: 'print' })
* media.append(…)
* root.append(media)
* }
* ```
*
* If it’s followed in the CSS by a `{}` block, this node will have
* a nodes property representing its children.
*
* ```js
* const root = postcss.parse('@charset "UTF-8"; @media print {}')
*
* const charset = root.first
* charset.type //=> 'atrule'
* charset.nodes //=> undefined
*
* const media = root.last
* media.nodes //=> []
* ```
*/
declare class AtRule_ extends Container {
/**
* An array containing the layer’s children.
*
* ```js
* const root = postcss.parse('@layer example { a { color: black } }')
* const layer = root.first
* layer.nodes.length //=> 1
* layer.nodes[0].selector //=> 'a'
* ```
*
* Can be `undefinded` if the at-rule has no body.
*
* ```js
* const root = postcss.parse('@layer a, b, c;')
* const layer = root.first
* layer.nodes //=> undefined
* ```
*/
nodes: Container['nodes'] | undefined
parent: ContainerWithChildren | undefined
raws: AtRule.AtRuleRaws
type: 'atrule'
/**
* The at-rule’s name immediately follows the `@`.
*
* ```js
* const root = postcss.parse('@media print {}')
* const media = root.first
* media.name //=> 'media'
* ```
*/
get name(): string
set name(value: string)
/**
* The at-rule’s parameters, the values that follow the at-rule’s name
* but precede any `{}` block.
*
* ```js
* const root = postcss.parse('@media print, screen {}')
* const media = root.first
* media.params //=> 'print, screen'
* ```
*/
get params(): string
set params(value: string)
constructor(defaults?: AtRule.AtRuleProps)
assign(overrides: AtRule.AtRuleProps | object): this
clone(overrides?: Partial<AtRule.AtRuleProps>): this
cloneAfter(overrides?: Partial<AtRule.AtRuleProps>): this
cloneBefore(overrides?: Partial<AtRule.AtRuleProps>): this
}
declare class AtRule extends AtRule_ {}
export = AtRule
================================================
FILE: lib/at-rule.js
================================================
'use strict'
let Container = require('./container')
class AtRule extends Container {
constructor(defaults) {
super(defaults)
this.type = 'atrule'
}
append(...children) {
if (!this.proxyOf.nodes) this.nodes = []
return super.append(...children)
}
prepend(...children) {
if (!this.proxyOf.nodes) this.nodes = []
return super.prepend(...children)
}
}
module.exports = AtRule
AtRule.default = AtRule
Container.registerAtRule(AtRule)
================================================
FILE: lib/comment.d.ts
================================================
import Container from './container.js'
import Node, { NodeProps } from './node.js'
declare namespace Comment {
export interface CommentRaws extends Record<string, unknown> {
/**
* The space symbols before the node.
*/
before?: string
/**
* The space symbols between `/*` and the comment’s text.
*/
left?: string
/**
* The space symbols between the comment’s text.
*/
right?: string
}
export interface CommentProps extends NodeProps {
/** Information used to generate byte-to-byte equal node string as it was in the origin input. */
raws?: CommentRaws
/** Content of the comment. */
text: string
}
export { Comment_ as default }
}
/**
* It represents a class that handles
* [CSS comments](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments)
*
* ```js
* Once (root, { Comment }) {
* const note = new Comment({ text: 'Note: …' })
* root.append(note)
* }
* ```
*
* Remember that CSS comments inside selectors, at-rule parameters,
* or declaration values will be stored in the `raws` properties
* explained above.
*/
declare class Comment_ extends Node {
parent: Container | undefined
raws: Comment.CommentRaws
type: 'comment'
/**
* The comment's text.
*/
get text(): string
set text(value: string)
constructor(defaults?: Comment.CommentProps)
assign(overrides: Comment.CommentProps | object): this
clone(overrides?: Partial<Comment.CommentProps>): this
cloneAfter(overrides?: Partial<Comment.CommentProps>): this
cloneBefore(overrides?: Partial<Comment.CommentProps>): this
}
declare class Comment extends Comment_ {}
export = Comment
================================================
FILE: lib/comment.js
================================================
'use strict'
let Node = require('./node')
class Comment extends Node {
constructor(defaults) {
super(defaults)
this.type = 'comment'
}
}
module.exports = Comment
Comment.default = Comment
===========================================
gitextract_x9pi1t66/ ├── .editorconfig ├── .github/ │ ├── CONTRIBUTING.md │ ├── FUNDING.yml │ └── workflows/ │ ├── release.yml │ └── test.yml ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── docs/ │ ├── README-cn.md │ ├── README.md │ ├── architecture.md │ ├── guidelines/ │ │ ├── plugin.md │ │ └── runner.md │ ├── plugins.md │ ├── source-maps.md │ ├── syntax.md │ └── writing-a-plugin.md ├── eslint.config.mjs ├── lib/ │ ├── at-rule.d.ts │ ├── at-rule.js │ ├── comment.d.ts │ ├── comment.js │ ├── container.d.ts │ ├── container.js │ ├── css-syntax-error.d.ts │ ├── css-syntax-error.js │ ├── declaration.d.ts │ ├── declaration.js │ ├── document.d.ts │ ├── document.js │ ├── fromJSON.d.ts │ ├── fromJSON.js │ ├── input.d.ts │ ├── input.js │ ├── lazy-result.d.ts │ ├── lazy-result.js │ ├── list.d.ts │ ├── list.js │ ├── map-generator.js │ ├── no-work-result.d.ts │ ├── no-work-result.js │ ├── node.d.ts │ ├── node.js │ ├── parse.d.ts │ ├── parse.js │ ├── parser.js │ ├── postcss.d.mts │ ├── postcss.d.ts │ ├── postcss.js │ ├── postcss.mjs │ ├── previous-map.d.ts │ ├── previous-map.js │ ├── processor.d.ts │ ├── processor.js │ ├── result.d.ts │ ├── result.js │ ├── root.d.ts │ ├── root.js │ ├── rule.d.ts │ ├── rule.js │ ├── stringifier.d.ts │ ├── stringifier.js │ ├── stringify.d.ts │ ├── stringify.js │ ├── symbols.js │ ├── terminal-highlight.js │ ├── tokenize.js │ ├── warn-once.js │ ├── warning.d.ts │ └── warning.js ├── package.json ├── patches/ │ └── yargs@17.7.2.patch ├── test/ │ ├── at-rule.test.ts │ ├── comment.test.ts │ ├── container.test.ts │ ├── css-syntax-error.test.ts │ ├── declaration.test.ts │ ├── document.test.ts │ ├── errors.ts │ ├── fromJSON.test.ts │ ├── input.test.ts │ ├── integration.js │ ├── lazy-result.test.ts │ ├── list.test.ts │ ├── location.test.ts │ ├── map.test.ts │ ├── no-work-result.test.ts │ ├── node.test.ts │ ├── old-node.js │ ├── parse.test.ts │ ├── postcss.test.ts │ ├── previous-map.test.ts │ ├── processor.test.ts │ ├── result.test.ts │ ├── root.test.ts │ ├── rule.test.ts │ ├── stringifier.test.js │ ├── stringify.test.ts │ ├── tokenize.test.js │ ├── types.ts │ ├── version.js │ ├── visitor.test.ts │ └── warning.test.ts └── tsconfig.json
SYMBOL INDEX (456 symbols across 59 files)
FILE: lib/at-rule.d.ts
type AtRuleRaws (line 7) | interface AtRuleRaws extends Record<string, unknown> {
type AtRuleProps (line 43) | interface AtRuleProps extends ContainerProps {
class AtRule_ (line 81) | class AtRule_ extends Container {
class AtRule (line 138) | class AtRule extends AtRule_ {}
FILE: lib/at-rule.js
class AtRule (line 5) | class AtRule extends Container {
method constructor (line 6) | constructor(defaults) {
method append (line 11) | append(...children) {
method prepend (line 16) | prepend(...children) {
FILE: lib/comment.d.ts
type CommentRaws (line 5) | interface CommentRaws extends Record<string, unknown> {
type CommentProps (line 22) | interface CommentProps extends NodeProps {
class Comment_ (line 48) | class Comment_ extends Node {
class Comment (line 66) | class Comment extends Comment_ {}
FILE: lib/comment.js
class Comment (line 5) | class Comment extends Node {
method constructor (line 6) | constructor(defaults) {
FILE: lib/container.d.ts
type ContainerWithChildren (line 9) | type ContainerWithChildren<Child extends Node = ChildNode> = {
type ValueOptions (line 17) | interface ValueOptions {
type ContainerProps (line 29) | interface ContainerProps extends NodeProps {
type NewChild (line 37) | type NewChild =
class Container (line 479) | class Container<
FILE: lib/container.js
function cleanSource (line 10) | function cleanSource(nodes) {
function markTreeDirty (line 18) | function markTreeDirty(node) {
class Container (line 27) | class Container extends Node {
method first (line 28) | get first() {
method last (line 33) | get last() {
method append (line 38) | append(...children) {
method cleanRaws (line 49) | cleanRaws(keepBetween) {
method each (line 56) | each(callback) {
method every (line 73) | every(condition) {
method getIterator (line 77) | getIterator() {
method getProxyProcessor (line 88) | getProxyProcessor() {
method index (line 138) | index(child) {
method insertAfter (line 144) | insertAfter(exist, add) {
method insertBefore (line 163) | insertBefore(exist, add) {
method normalize (line 187) | normalize(nodes, sample) {
method prepend (line 241) | prepend(...children) {
method push (line 256) | push(child) {
method removeAll (line 262) | removeAll() {
method removeChild (line 271) | removeChild(child) {
method replaceValues (line 289) | replaceValues(pattern, opts, callback) {
method some (line 307) | some(condition) {
method walk (line 311) | walk(callback) {
method walkAtRules (line 327) | walkAtRules(name, callback) {
method walkComments (line 350) | walkComments(callback) {
method walkDecls (line 358) | walkDecls(prop, callback) {
method walkRules (line 381) | walkRules(selector, callback) {
FILE: lib/css-syntax-error.d.ts
type RangePosition (line 7) | interface RangePosition {
class CssSyntaxError_ (line 52) | class CssSyntaxError_ extends Error {
class CssSyntaxError (line 246) | class CssSyntaxError extends CssSyntaxError_ {}
FILE: lib/css-syntax-error.js
class CssSyntaxError (line 7) | class CssSyntaxError extends Error {
method constructor (line 8) | constructor(message, line, column, source, file, plugin) {
method setMessage (line 41) | setMessage() {
method showSourceCode (line 50) | showSourceCode(color) {
method toString (line 123) | toString() {
FILE: lib/declaration.d.ts
type DeclarationRaws (line 5) | interface DeclarationRaws extends Record<string, unknown> {
type DeclarationProps (line 31) | interface DeclarationProps {
class Declaration_ (line 65) | class Declaration_ extends Node {
class Declaration (line 149) | class Declaration extends Declaration_ {}
FILE: lib/declaration.js
class Declaration (line 5) | class Declaration extends Node {
method variable (line 6) | get variable() {
method constructor (line 10) | constructor(defaults) {
FILE: lib/document.d.ts
type DocumentProps (line 7) | interface DocumentProps extends ContainerProps {
class Document_ (line 37) | class Document_ extends Container<Root> {
class Document (line 67) | class Document extends Document_ {}
FILE: lib/document.js
class Document (line 7) | class Document extends Container {
method constructor (line 8) | constructor(defaults) {
method toResult (line 17) | toResult(opts = {}) {
FILE: lib/fromJSON.d.ts
type FromJSON (line 3) | interface FromJSON extends JSONHydrator {
FILE: lib/fromJSON.js
function fromJSON (line 11) | function fromJSON(json, inputs) {
FILE: lib/input.d.ts
type FilePosition (line 5) | interface FilePosition {
class Input_ (line 64) | class Input_ {
class Input (line 225) | class Input extends Input_ {}
FILE: lib/input.js
function getLineToIndex (line 17) | function getLineToIndex(input) {
class Input (line 32) | class Input {
method from (line 33) | get from() {
method constructor (line 37) | constructor(css, opts = {}) {
method error (line 85) | error(message, line, column, opts = {}) {
method fromLineAndColumn (line 156) | fromLineAndColumn(line, column) {
method fromOffset (line 162) | fromOffset(offset) {
method mapResolve (line 190) | mapResolve(file) {
method origin (line 197) | origin(line, column, endLine, endColumn) {
method toJSON (line 243) | toJSON() {
FILE: lib/lazy-result.d.ts
class LazyResult_ (line 22) | class LazyResult_<RootNode = Document | Root>
class LazyResult (line 186) | class LazyResult<
FILE: lib/lazy-result.js
constant TYPE_TO_CLASS_NAME (line 13) | const TYPE_TO_CLASS_NAME = {
constant PLUGIN_PROPS (line 22) | const PLUGIN_PROPS = {
constant NOT_VISITORS (line 41) | const NOT_VISITORS = {
constant CHILDREN (line 47) | const CHILDREN = 0
function isPromise (line 49) | function isPromise(obj) {
function getEvents (line 53) | function getEvents(node) {
function toStack (line 79) | function toStack(node) {
function cleanMarks (line 99) | function cleanMarks(node) {
class LazyResult (line 107) | class LazyResult {
method content (line 108) | get content() {
method css (line 112) | get css() {
method map (line 116) | get map() {
method messages (line 120) | get messages() {
method opts (line 124) | get opts() {
method processor (line 128) | get processor() {
method root (line 132) | get root() {
method constructor (line 140) | constructor(processor, css, opts) {
method async (line 188) | async() {
method catch (line 197) | catch(onRejected) {
method finally (line 201) | finally(onFinally) {
method getAsyncError (line 205) | getAsyncError() {
method handleError (line 209) | handleError(error, node) {
method prepareVisitors (line 248) | prepareVisitors() {
method runAsync (line 286) | async runAsync() {
method runOnRoot (line 343) | runOnRoot(plugin) {
method stringify (line 368) | stringify() {
method sync (line 389) | sync() {
method then (line 426) | then(onFulfilled, onRejected) {
method toString (line 439) | toString() {
method visitSync (line 443) | visitSync(visitors, node) {
method visitTick (line 461) | visitTick(stack) {
method walkSync (line 518) | walkSync(node) {
method warnings (line 537) | warnings() {
method [Symbol.toStringTag] (line 136) | get [Symbol.toStringTag]() {
FILE: lib/list.d.ts
type List (line 2) | type List = {
FILE: lib/list.js
method comma (line 4) | comma(string) {
method space (line 8) | space(string) {
method split (line 13) | split(string, separators, last) {
FILE: lib/map-generator.js
class MapGenerator (line 12) | class MapGenerator {
method constructor (line 13) | constructor(stringify, root, opts, cssString) {
method addAnnotation (line 27) | addAnnotation() {
method applyPrevMaps (line 46) | applyPrevMaps() {
method clearAnnotation (line 65) | clearAnnotation() {
method generate (line 90) | generate() {
method generateMap (line 103) | generateMap() {
method generateString (line 137) | generateString() {
method isAnnotation (line 208) | isAnnotation() {
method isInline (line 221) | isInline() {
method isMap (line 237) | isMap() {
method isSourcesContent (line 244) | isSourcesContent() {
method outputFile (line 254) | outputFile() {
method path (line 264) | path(file) {
method previous (line 283) | previous() {
method setSourcesContent (line 304) | setSourcesContent() {
method sourcePath (line 327) | sourcePath(node) {
method toBase64 (line 337) | toBase64(str) {
method toFileUrl (line 345) | toFileUrl(path) {
method toUrl (line 361) | toUrl(path) {
FILE: lib/no-work-result.d.ts
class NoWorkResult_ (line 25) | class NoWorkResult_ implements LazyResult<Root> {
class NoWorkResult (line 44) | class NoWorkResult extends NoWorkResult_ {}
FILE: lib/no-work-result.js
class NoWorkResult (line 9) | class NoWorkResult {
method content (line 10) | get content() {
method css (line 14) | get css() {
method map (line 18) | get map() {
method messages (line 22) | get messages() {
method opts (line 26) | get opts() {
method processor (line 30) | get processor() {
method root (line 34) | get root() {
method constructor (line 60) | constructor(processor, css, opts) {
method async (line 95) | async() {
method catch (line 100) | catch(onRejected) {
method finally (line 104) | finally(onFinally) {
method sync (line 108) | sync() {
method then (line 113) | then(onFulfilled, onRejected) {
method toString (line 127) | toString() {
method warnings (line 131) | warnings() {
method [Symbol.toStringTag] (line 56) | get [Symbol.toStringTag]() {
FILE: lib/node.d.ts
type ChildNode (line 16) | type ChildNode = AtRule.default | Comment | Declaration | Rule
type AnyNode (line 18) | type AnyNode =
type ChildProps (line 26) | type ChildProps =
type Position (line 32) | interface Position {
type Range (line 49) | interface Range {
type Source (line 64) | interface Source {
type NodeProps (line 103) | interface NodeProps {
type NodeErrorOptions (line 107) | interface NodeErrorOptions {
class Node (line 130) | class Node extends Node_ {}
class Node (line 554) | class Node extends Node_ {}
FILE: lib/node.js
function cloneNode (line 8) | function cloneNode(obj, parent) {
function sourceOffset (line 35) | function sourceOffset(inputCSS, position) {
class Node (line 62) | class Node {
method proxyOf (line 63) | get proxyOf() {
method constructor (line 67) | constructor(defaults = {}) {
method addToError (line 88) | addToError(error) {
method after (line 100) | after(add) {
method assign (line 105) | assign(overrides = {}) {
method before (line 112) | before(add) {
method cleanRaws (line 117) | cleanRaws(keepBetween) {
method clone (line 123) | clone(overrides = {}) {
method cloneAfter (line 131) | cloneAfter(overrides = {}) {
method cloneBefore (line 137) | cloneBefore(overrides = {}) {
method error (line 143) | error(message, opts = {}) {
method getProxyProcessor (line 156) | getProxyProcessor() {
method markClean (line 188) | markClean() {
method markDirty (line 192) | markDirty() {
method next (line 202) | next() {
method positionBy (line 208) | positionBy(opts = {}) {
method positionInside (line 227) | positionInside(index) {
method prev (line 249) | prev() {
method rangeBy (line 255) | rangeBy(opts = {}) {
method raw (line 332) | raw(prop, defaultType) {
method remove (line 337) | remove() {
method replaceWith (line 345) | replaceWith(...nodes) {
method root (line 368) | root() {
method toJSON (line 376) | toJSON(_, inputs) {
method toProxy (line 425) | toProxy() {
method toString (line 432) | toString(stringifier = stringify) {
method warn (line 441) | warn(result, text, opts = {}) {
FILE: lib/parse.d.ts
type Parse (line 3) | interface Parse extends Parser {
FILE: lib/parse.js
function parse (line 7) | function parse(css, opts) {
FILE: lib/parser.js
constant SAFE_COMMENT_NEIGHBOR (line 10) | const SAFE_COMMENT_NEIGHBOR = {
function findLastWithPosition (line 15) | function findLastWithPosition(tokens) {
class Parser (line 23) | class Parser {
method constructor (line 24) | constructor(input) {
method atrule (line 36) | atrule(token) {
method checkMissedSemicolon (line 122) | checkMissedSemicolon(tokens) {
method colon (line 144) | colon(tokens) {
method comment (line 172) | comment(token) {
method createTokenizer (line 191) | createTokenizer() {
method decl (line 195) | decl(tokens, customProperty) {
method doubleColon (line 300) | doubleColon(token) {
method emptyRule (line 308) | emptyRule(token) {
method end (line 316) | end(token) {
method endFile (line 334) | endFile() {
method freeSemicolon (line 343) | freeSemicolon(token) {
method getPosition (line 358) | getPosition(offset) {
method init (line 367) | init(node, offset) {
method other (line 378) | other(start) {
method parse (line 441) | parse() {
method precheckMissedSemicolon (line 479) | precheckMissedSemicolon(/* tokens */) {
method raw (line 483) | raw(node, prop, tokens, customProperty) {
method rule (line 518) | rule(tokens) {
method spacesAndCommentsFromEnd (line 529) | spacesAndCommentsFromEnd(tokens) {
method spacesAndCommentsFromStart (line 542) | spacesAndCommentsFromStart(tokens) {
method spacesFromEnd (line 553) | spacesFromEnd(tokens) {
method stringFrom (line 564) | stringFrom(tokens, from) {
method unclosedBlock (line 573) | unclosedBlock() {
method unclosedBracket (line 578) | unclosedBracket(bracket) {
method unexpectedClose (line 586) | unexpectedClose(token) {
method unknownWord (line 594) | unknownWord(tokens) {
method unnamedAtrule (line 602) | unnamedAtrule(node, token) {
FILE: lib/postcss.d.ts
type DocumentProcessor (line 27) | type DocumentProcessor = (
type RootProcessor (line 31) | type RootProcessor = (
type DeclarationProcessor (line 35) | type DeclarationProcessor = (
type RuleProcessor (line 39) | type RuleProcessor = (
type AtRuleProcessor (line 43) | type AtRuleProcessor = (
type CommentProcessor (line 47) | type CommentProcessor = (
type Processors (line 52) | interface Processors {
type SourceMap (line 189) | type SourceMap = {
type Helpers (line 193) | type Helpers = { postcss: Postcss; result: Result } & Postcss
type Plugin (line 195) | interface Plugin extends Processors {
type PluginCreator (line 200) | interface PluginCreator<PluginOptions> {
type Transformer (line 205) | interface Transformer extends TransformCallback {
type TransformCallback (line 210) | interface TransformCallback {
type OldPlugin (line 214) | interface OldPlugin<T> extends Transformer {
type AcceptedPlugin (line 219) | type AcceptedPlugin =
type Parser (line 229) | interface Parser<RootNode = Document | Root> {
type Builder (line 236) | interface Builder {
type Stringifier (line 240) | interface Stringifier {
type JSONHydrator (line 244) | interface JSONHydrator {
type Syntax (line 249) | interface Syntax<RootNode = Document | Root> {
type SourceMapOptions (line 261) | interface SourceMapOptions {
type ProcessOptions (line 317) | interface ProcessOptions<RootNode = Document | Root> {
type Postcss (line 356) | type Postcss = typeof postcss
FILE: lib/postcss.js
function postcss (line 22) | function postcss(...plugins) {
function creator (line 31) | function creator(...args) {
method get (line 59) | get() {
FILE: lib/previous-map.d.ts
class PreviousMap_ (line 22) | class PreviousMap_ {
class PreviousMap (line 79) | class PreviousMap extends PreviousMap_ {}
FILE: lib/previous-map.js
function fromBase64 (line 7) | function fromBase64(str) {
class PreviousMap (line 16) | class PreviousMap {
method constructor (line 17) | constructor(css, opts) {
method consumer (line 31) | consumer() {
method decodeInline (line 38) | decodeInline(text) {
method getAnnotationURL (line 58) | getAnnotationURL(sourceMapString) {
method isMap (line 62) | isMap(map) {
method loadAnnotation (line 71) | loadAnnotation(css) {
method loadFile (line 85) | loadFile(path) {
method loadMap (line 93) | loadMap(file, prev) {
method startWith (line 130) | startWith(string, start) {
method withContent (line 135) | withContent() {
FILE: lib/processor.d.ts
class Processor_ (line 29) | class Processor_ {
class Processor (line 113) | class Processor extends Processor_ {}
FILE: lib/processor.js
class Processor (line 8) | class Processor {
method constructor (line 9) | constructor(plugins = []) {
method normalize (line 14) | normalize(plugins) {
method process (line 44) | process(css, opts = {}) {
method use (line 57) | use(plugin) {
FILE: lib/result.d.ts
type Message (line 15) | interface Message {
type ResultOptions (line 29) | interface ResultOptions extends ProcessOptions {
class Result_ (line 62) | class Result_<RootNode = Document | Root> {
class Result (line 203) | class Result<RootNode = Document | Root> extends Result_<RootNode> {}
FILE: lib/result.js
class Result (line 5) | class Result {
method content (line 6) | get content() {
method constructor (line 10) | constructor(processor, root, opts) {
method toString (line 19) | toString() {
method warn (line 23) | warn(text, opts = {}) {
method warnings (line 36) | warnings() {
FILE: lib/root.d.ts
type RootRaws (line 7) | interface RootRaws extends Record<string, any> {
type RootProps (line 35) | interface RootProps extends ContainerProps {
class Root_ (line 56) | class Root_ extends Container {
class Root (line 85) | class Root extends Root_ {}
FILE: lib/root.js
class Root (line 7) | class Root extends Container {
method constructor (line 8) | constructor(defaults) {
method normalize (line 14) | normalize(child, sample, type) {
method removeChild (line 34) | removeChild(child, ignore) {
method toResult (line 44) | toResult(opts = {}) {
FILE: lib/rule.d.ts
type RuleRaws (line 7) | interface RuleRaws extends Record<string, unknown> {
type RuleProps (line 43) | type RuleProps = {
class Rule_ (line 81) | class Rule_ extends Container {
class Rule (line 124) | class Rule extends Rule_ {}
FILE: lib/rule.js
class Rule (line 6) | class Rule extends Container {
method selectors (line 7) | get selectors() {
method selectors (line 11) | set selectors(values) {
method constructor (line 17) | constructor(defaults) {
FILE: lib/stringifier.d.ts
class Stringifier_ (line 18) | class Stringifier_ {
class Stringifier (line 44) | class Stringifier extends Stringifier_ {}
FILE: lib/stringifier.js
constant DEFAULT_RAW (line 3) | const DEFAULT_RAW = {
function capitalize (line 18) | function capitalize(str) {
class Stringifier (line 22) | class Stringifier {
method constructor (line 23) | constructor(builder) {
method atrule (line 27) | atrule(node, semicolon) {
method beforeAfter (line 45) | beforeAfter(node, detect) {
method block (line 74) | block(node, start) {
method body (line 90) | body(node) {
method comment (line 106) | comment(node) {
method decl (line 112) | decl(node, semicolon) {
method document (line 124) | document(node) {
method raw (line 128) | raw(node, own, detect) {
method rawBeforeClose (line 182) | rawBeforeClose(root) {
method rawBeforeComment (line 199) | rawBeforeComment(root, node) {
method rawBeforeDecl (line 218) | rawBeforeDecl(root, node) {
method rawBeforeOpen (line 237) | rawBeforeOpen(root) {
method rawBeforeRule (line 248) | rawBeforeRule(root) {
method rawColon (line 265) | rawColon(root) {
method rawEmptyBody (line 276) | rawEmptyBody(root) {
method rawIndent (line 287) | rawIndent(root) {
method rawSemicolon (line 304) | rawSemicolon(root) {
method rawValue (line 315) | rawValue(node, prop) {
method root (line 325) | root(node) {
method rule (line 330) | rule(node) {
method stringify (line 337) | stringify(node, semicolon) {
FILE: lib/stringify.d.ts
type Stringify (line 3) | interface Stringify extends Stringifier {
FILE: lib/stringify.js
function stringify (line 5) | function stringify(node, builder) {
FILE: lib/terminal-highlight.js
function registerInput (line 9) | function registerInput(dependant) {
constant HIGHLIGHT_THEME (line 13) | const HIGHLIGHT_THEME = {
function getTokenType (line 31) | function getTokenType([type, value], processor) {
function terminalHighlight (line 50) | function terminalHighlight(css) {
FILE: lib/tokenize.js
constant SINGLE_QUOTE (line 3) | const SINGLE_QUOTE = "'".charCodeAt(0)
constant DOUBLE_QUOTE (line 4) | const DOUBLE_QUOTE = '"'.charCodeAt(0)
constant BACKSLASH (line 5) | const BACKSLASH = '\\'.charCodeAt(0)
constant SLASH (line 6) | const SLASH = '/'.charCodeAt(0)
constant NEWLINE (line 7) | const NEWLINE = '\n'.charCodeAt(0)
constant SPACE (line 8) | const SPACE = ' '.charCodeAt(0)
constant FEED (line 9) | const FEED = '\f'.charCodeAt(0)
constant TAB (line 10) | const TAB = '\t'.charCodeAt(0)
constant OPEN_SQUARE (line 12) | const OPEN_SQUARE = '['.charCodeAt(0)
constant CLOSE_SQUARE (line 13) | const CLOSE_SQUARE = ']'.charCodeAt(0)
constant OPEN_PARENTHESES (line 14) | const OPEN_PARENTHESES = '('.charCodeAt(0)
constant CLOSE_PARENTHESES (line 15) | const CLOSE_PARENTHESES = ')'.charCodeAt(0)
constant OPEN_CURLY (line 16) | const OPEN_CURLY = '{'.charCodeAt(0)
constant CLOSE_CURLY (line 17) | const CLOSE_CURLY = '}'.charCodeAt(0)
constant SEMICOLON (line 18) | const SEMICOLON = ';'.charCodeAt(0)
constant ASTERISK (line 19) | const ASTERISK = '*'.charCodeAt(0)
constant COLON (line 20) | const COLON = ':'.charCodeAt(0)
constant RE_AT_END (line 23) | const RE_AT_END = /[\t\n\f\r "#'()/;[\\\]{}]/g
constant RE_WORD_END (line 24) | const RE_WORD_END = /[\t\n\f\r !"#'():;@[\\\]{}]|\/(?=\*)/g
constant RE_BAD_BRACKET (line 25) | const RE_BAD_BRACKET = /.[\r\n"'(/\\]/
constant RE_HEX_ESCAPE (line 26) | const RE_HEX_ESCAPE = /[\da-f]/i
function position (line 40) | function position() {
function unclosed (line 44) | function unclosed(what) {
function endOfFile (line 48) | function endOfFile() {
function nextToken (line 52) | function nextToken(opts) {
function back (line 256) | function back(token) {
FILE: lib/warning.d.ts
type WarningOptions (line 5) | interface WarningOptions {
class Warning_ (line 56) | class Warning_ {
class Warning (line 145) | class Warning extends Warning_ {}
FILE: lib/warning.js
class Warning (line 3) | class Warning {
method constructor (line 4) | constructor(text, opts = {}) {
method toString (line 19) | toString() {
FILE: test/css-syntax-error.test.ts
function isSyntaxError (line 16) | function isSyntaxError(e: unknown): e is CssSyntaxError {
function catchError (line 20) | async function catchError(cb: () => Promise<any>): Promise<CssSyntaxErro...
function parseError (line 33) | function parseError(
function urlOf (line 282) | function urlOf(file: string): string {
function pathOf (line 316) | function pathOf(file: string): string {
method Once (line 386) | Once(css) {
method Once (line 403) | Once(css) {
FILE: test/errors.ts
method Comment (line 11) | Comment(decl, { Decl }) {
FILE: test/location.test.ts
function checkOffset (line 13) | function checkOffset(source: string, node: Node, expected: string): void {
FILE: test/map.test.ts
function consumer (line 19) | function consumer(map: SourceMap): any {
function read (line 23) | function read(result: { css: string }): any {
function deleteDir (line 41) | function deleteDir(path: string): void {
method annotation (line 657) | annotation(to, root) {
FILE: test/node.test.ts
function stringify (line 18) | function stringify(node: AnyNode, builder: (str: string) => void): void {
method Once (line 72) | Once(css, { result }) {
method toJSON (line 302) | toJSON() {
FILE: test/previous-map.test.ts
function deleteDir (line 28) | function deleteDir(path: string): void {
FILE: test/processor.test.ts
function prs (line 28) | function prs(): Root {
function str (line 32) | function str(node: Node, builder: (s: string) => void): void {
function catchError (line 36) | async function catchError(cb: () => Promise<any>): Promise<Error> {
method Once (line 354) | Once() {
function processBy (line 397) | function processBy(version: string): void {
method parse (line 498) | parse() {}
FILE: test/result.test.ts
method Once (line 19) | Once(css, { result }) {
method Once (line 39) | Once(css, { result }) {
FILE: test/tokenize.test.js
function tokenize (line 7) | function tokenize(css, opts) {
function run (line 16) | function run(css, tokens, opts) {
function token (line 295) | function token(css, opts) {
FILE: test/types.ts
function parseMarkdown (line 27) | function parseMarkdown(): Document {
function parentCanNarrowType (line 34) | function parentCanNarrowType(): never | void {
FILE: test/visitor.test.ts
function hasAlready (line 18) | function hasAlready(parent: Container | undefined, selector: string): bo...
function addIndex (line 27) | function addIndex(array: any[][]): any[][] {
function buildVisitor (line 33) | function buildVisitor(): [[string, string][], Plugin] {
method Once (line 84) | Once(root) {
method Declaration (line 93) | Declaration(node) {
method Declaration (line 108) | Declaration(node) {
method Declaration (line 125) | Declaration(node) {
method Declaration (line 134) | Declaration(node) {
method AtRule (line 143) | AtRule(node) {
method AtRule (line 152) | AtRule(node) {
method Rule (line 162) | Rule(rule) {
method Declaration (line 181) | Declaration(decl) {
function createPlugin (line 227) | function createPlugin(creator: () => Plugin): PluginCreator<void> {
method Declaration (line 236) | Declaration(decl) {
method Once (line 246) | Once(root) {
method Once (line 331) | Once(node) {
method Rule (line 335) | Rule(node) {
method Rule (line 524) | Rule(rule) {
method Rule (line 542) | async Rule(rule) {
method Rule (line 561) | Rule(rule) {
method Rule (line 579) | Rule() {
method Rule (line 597) | async Rule() {
method Rule (line 616) | async Rule() {}
function check (line 628) | function check(node: AnyNode, helpers: Helpers): void {
method Once (line 645) | async Once(node, helpers) {
method OnceExit (line 649) | async OnceExit(node, helpers) {
method Rule (line 654) | async Rule(node, helpers) {
function check (line 665) | function check(node: AnyNode, helpers: Helpers): void {
method Once (line 682) | async Once(node, helpers) {
method OnceExit (line 686) | async OnceExit(node, helpers) {
method Rule (line 691) | async Rule(node, helpers) {
method Declaration (line 709) | Declaration(decl) {
method Declaration (line 725) | Declaration(decl) {
method prepare (line 729) | prepare(result) {
method Rule (line 750) | Rule(rule) {
method Declaration (line 800) | Declaration(decl) {
method Rule (line 810) | Rule(rule) {
method prepare (line 819) | prepare() {
method OnceExit (line 1310) | OnceExit() {
method RootExit (line 1314) | RootExit() {
method Rule (line 1317) | Rule(rule) {
method DocumentExit (line 1340) | DocumentExit() {
method OnceExit (line 1343) | OnceExit() {
method RootExit (line 1347) | RootExit() {
method Rule (line 1350) | Rule(rule) {
method DocumentExit (line 1378) | DocumentExit() {
method OnceExit (line 1381) | OnceExit() {
method RootExit (line 1385) | RootExit() {
method Rule (line 1388) | Rule(rule) {
method OnceExit (line 1413) | OnceExit() {
method Rule (line 1477) | Rule(rule) {
method Rule (line 1515) | Rule(rule) {
method OnceExit (line 1560) | OnceExit(root) {
method Rule (line 1571) | Rule(rule) {
Condensed preview — 106 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (624K chars).
[
{
"path": ".editorconfig",
"chars": 147,
"preview": "root = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ni"
},
{
"path": ".github/CONTRIBUTING.md",
"chars": 2208,
"preview": "# Contributing Guide to PostCSS\n\nIf you want to contribute to PostCSS, there are a few things that you should\nbe familia"
},
{
"path": ".github/FUNDING.yml",
"chars": 58,
"preview": "open_collective: postcss\ntidelift: npm/postcss\ngithub: ai\n"
},
{
"path": ".github/workflows/release.yml",
"chars": 1479,
"preview": "name: Release\non:\n push:\n tags:\n - '*'\npermissions:\n contents: write\njobs:\n release:\n name: Release On Tag"
},
{
"path": ".github/workflows/test.yml",
"chars": 3170,
"preview": "name: Test\non:\n push:\n branches:\n - main\n pull_request:\npermissions:\n contents: read\njobs:\n full:\n name: "
},
{
"path": ".gitignore",
"chars": 63,
"preview": "node_modules/\n\ncoverage/\n\ndocs/api/index.html\ndocs/api/assets/\n"
},
{
"path": ".npmignore",
"chars": 63,
"preview": "coverage/\ntest/\n\ndocs/\ntsconfig.json\neslint.config.mjs\npatches\n"
},
{
"path": "CHANGELOG.md",
"chars": 31432,
"preview": "# Change Log\nThis project adheres to [Semantic Versioning](https://semver.org/).\n\n## 8.5.8\n* Fixed `Processor#version`.\n"
},
{
"path": "LICENSE",
"chars": 1095,
"preview": "The MIT License (MIT)\n\nCopyright 2013 Andrey Sitnik <andrey@sitnik.ru>\n\nPermission is hereby granted, free of charge, to"
},
{
"path": "README.md",
"chars": 17853,
"preview": "# PostCSS\n\n<img align=\"right\" width=\"95\" height=\"95\"\n alt=\"Philosopher’s stone, logo of PostCSS\"\n src=\"https://p"
},
{
"path": "docs/README-cn.md",
"chars": 12467,
"preview": "# PostCSS\n\n<img align=\"right\" width=\"95\" height=\"95\"\n alt=\"哲学家的石头 - PostCSS 的 logo\"\n src=\"https://postcss.org/lo"
},
{
"path": "docs/README.md",
"chars": 9805,
"preview": "# Documentation\n\n* [PostCSS Architecture](https://github.com/postcss/postcss/blob/main/docs/architecture.md#postcss-arch"
},
{
"path": "docs/architecture.md",
"chars": 8214,
"preview": "# PostCSS Architecture\n\nGeneral overview of the PostCSS architecture.\nIt can be useful for everyone who wishes to contri"
},
{
"path": "docs/guidelines/plugin.md",
"chars": 9673,
"preview": "# PostCSS Plugin Guidelines\n\nA PostCSS plugin is a function that receives and, usually,\ntransforms a CSS AST from the Po"
},
{
"path": "docs/guidelines/runner.md",
"chars": 6766,
"preview": "# PostCSS Runner Guidelines\n\nA PostCSS runner is a tool that processes CSS through a user-defined list\nof plugins; for e"
},
{
"path": "docs/plugins.md",
"chars": 63039,
"preview": "# PostCSS Plugins\n\n**Table of Contents**\n\n* [Control](#control)\n* [Packs](#packs)\n* [Future CSS Syntax](#future-css-synt"
},
{
"path": "docs/source-maps.md",
"chars": 105,
"preview": "# PostCSS and Source Maps\n\nSee our **[source map API docs](https://postcss.org/api/#sourcemapoptions)**.\n"
},
{
"path": "docs/syntax.md",
"chars": 8656,
"preview": "# How to Write Custom Syntax\n\nPostCSS can transform styles in any syntax, and is not limited to just CSS.\nBy writing a c"
},
{
"path": "docs/writing-a-plugin.md",
"chars": 13342,
"preview": "# Writing a PostCSS Plugin\n\n**Table of Contents**\n\n* [Links](#links)\n* [Step 1: Create an idea](#step-1-create-an-idea)\n"
},
{
"path": "eslint.config.mjs",
"chars": 1648,
"preview": "import loguxTsConfig from '@logux/eslint-config/ts'\n\nexport default [\n { ignores: ['docs/api/assets/', '**/errors.ts'] "
},
{
"path": "lib/at-rule.d.ts",
"chars": 3346,
"preview": "import Container, {\n ContainerProps,\n ContainerWithChildren\n} from './container.js'\n\ndeclare namespace AtRule {\n expo"
},
{
"path": "lib/at-rule.js",
"chars": 471,
"preview": "'use strict'\n\nlet Container = require('./container')\n\nclass AtRule extends Container {\n constructor(defaults) {\n sup"
},
{
"path": "lib/comment.d.ts",
"chars": 1678,
"preview": "import Container from './container.js'\nimport Node, { NodeProps } from './node.js'\n\ndeclare namespace Comment {\n export"
},
{
"path": "lib/comment.js",
"chars": 203,
"preview": "'use strict'\n\nlet Node = require('./node')\n\nclass Comment extends Node {\n constructor(defaults) {\n super(defaults)\n "
},
{
"path": "lib/container.d.ts",
"chars": 14009,
"preview": "import AtRule from './at-rule.js'\nimport Comment from './comment.js'\nimport Declaration from './declaration.js'\nimport N"
},
{
"path": "lib/container.js",
"chars": 10647,
"preview": "'use strict'\n\nlet Comment = require('./comment')\nlet Declaration = require('./declaration')\nlet Node = require('./node')"
},
{
"path": "lib/css-syntax-error.d.ts",
"chars": 6451,
"preview": "import { FilePosition } from './input.js'\n\ndeclare namespace CssSyntaxError {\n /**\n * A position that is part of a ra"
},
{
"path": "lib/css-syntax-error.js",
"chars": 3402,
"preview": "'use strict'\n\nlet pico = require('picocolors')\n\nlet terminalHighlight = require('./terminal-highlight')\n\nclass CssSyntax"
},
{
"path": "lib/declaration.d.ts",
"chars": 3837,
"preview": "import { ContainerWithChildren } from './container.js'\nimport Node from './node.js'\n\ndeclare namespace Declaration {\n e"
},
{
"path": "lib/declaration.js",
"chars": 495,
"preview": "'use strict'\n\nlet Node = require('./node')\n\nclass Declaration extends Node {\n get variable() {\n return this.prop.sta"
},
{
"path": "lib/document.d.ts",
"chars": 1884,
"preview": "import Container, { ContainerProps } from './container.js'\nimport { ProcessOptions } from './postcss.js'\nimport Result f"
},
{
"path": "lib/document.js",
"chars": 654,
"preview": "'use strict'\n\nlet Container = require('./container')\n\nlet LazyResult, Processor\n\nclass Document extends Container {\n co"
},
{
"path": "lib/fromJSON.d.ts",
"chars": 162,
"preview": "import { JSONHydrator } from './postcss.js'\n\ninterface FromJSON extends JSONHydrator {\n default: FromJSON\n}\n\ndeclare co"
},
{
"path": "lib/fromJSON.js",
"chars": 1506,
"preview": "'use strict'\n\nlet AtRule = require('./at-rule')\nlet Comment = require('./comment')\nlet Declaration = require('./declarat"
},
{
"path": "lib/input.d.ts",
"chars": 5130,
"preview": "import { CssSyntaxError, ProcessOptions } from './postcss.js'\nimport PreviousMap from './previous-map.js'\n\ndeclare names"
},
{
"path": "lib/input.js",
"chars": 6752,
"preview": "'use strict'\n\nlet { nanoid } = require('nanoid/non-secure')\nlet { isAbsolute, resolve } = require('path')\nlet { SourceMa"
},
{
"path": "lib/lazy-result.d.ts",
"chars": 4941,
"preview": "import Document from './document.js'\nimport { SourceMap } from './postcss.js'\nimport Processor from './processor.js'\nimp"
},
{
"path": "lib/lazy-result.js",
"chars": 13562,
"preview": "'use strict'\n\nlet Container = require('./container')\nlet Document = require('./document')\nlet MapGenerator = require('./"
},
{
"path": "lib/list.d.ts",
"chars": 1426,
"preview": "declare namespace list {\n type List = {\n /**\n * Safely splits comma-separated values (such as those for `transit"
},
{
"path": "lib/list.js",
"chars": 1227,
"preview": "'use strict'\n\nlet list = {\n comma(string) {\n return list.split(string, [','], true)\n },\n\n space(string) {\n let "
},
{
"path": "lib/map-generator.js",
"chars": 10031,
"preview": "'use strict'\n\nlet { dirname, relative, resolve, sep } = require('path')\nlet { SourceMapConsumer, SourceMapGenerator } = "
},
{
"path": "lib/no-work-result.d.ts",
"chars": 1507,
"preview": "import LazyResult from './lazy-result.js'\nimport { SourceMap } from './postcss.js'\nimport Processor from './processor.js"
},
{
"path": "lib/no-work-result.js",
"chars": 2621,
"preview": "'use strict'\n\nlet MapGenerator = require('./map-generator')\nlet parse = require('./parse')\nconst Result = require('./res"
},
{
"path": "lib/node.d.ts",
"chars": 14682,
"preview": "import AtRule = require('./at-rule.js')\nimport { AtRuleProps } from './at-rule.js'\nimport Comment, { CommentProps } from"
},
{
"path": "lib/node.js",
"chars": 10719,
"preview": "'use strict'\n\nlet CssSyntaxError = require('./css-syntax-error')\nlet Stringifier = require('./stringifier')\nlet stringif"
},
{
"path": "lib/parse.d.ts",
"chars": 135,
"preview": "import { Parser } from './postcss.js'\n\ninterface Parse extends Parser {\n default: Parse\n}\n\ndeclare const parse: Parse\n\n"
},
{
"path": "lib/parse.js",
"chars": 1147,
"preview": "'use strict'\n\nlet Container = require('./container')\nlet Input = require('./input')\nlet Parser = require('./parser')\n\nfu"
},
{
"path": "lib/parser.js",
"chars": 14846,
"preview": "'use strict'\n\nlet AtRule = require('./at-rule')\nlet Comment = require('./comment')\nlet Declaration = require('./declarat"
},
{
"path": "lib/postcss.d.mts",
"chars": 1041,
"preview": "export {\n // Type-only exports\n AcceptedPlugin,\n\n AnyNode,\n atRule,\n AtRule,\n AtRuleProps,\n Builder,\n ChildNode,"
},
{
"path": "lib/postcss.d.ts",
"chars": 11459,
"preview": "import { RawSourceMap, SourceMapGenerator } from 'source-map-js'\n\nimport AtRule, { AtRuleProps } from './at-rule.js'\nimp"
},
{
"path": "lib/postcss.js",
"chars": 2880,
"preview": "'use strict'\n\nlet AtRule = require('./at-rule')\nlet Comment = require('./comment')\nlet Container = require('./container'"
},
{
"path": "lib/postcss.mjs",
"chars": 980,
"preview": "import postcss from './postcss.js'\n\nexport default postcss\n\nexport const stringify = postcss.stringify\nexport const from"
},
{
"path": "lib/previous-map.d.ts",
"chars": 1761,
"preview": "import { SourceMapConsumer } from 'source-map-js'\n\nimport { ProcessOptions } from './postcss.js'\n\ndeclare namespace Prev"
},
{
"path": "lib/previous-map.js",
"chars": 3984,
"preview": "'use strict'\n\nlet { existsSync, readFileSync } = require('fs')\nlet { dirname, join } = require('path')\nlet { SourceMapCo"
},
{
"path": "lib/processor.d.ts",
"chars": 3347,
"preview": "import Document from './document.js'\nimport LazyResult from './lazy-result.js'\nimport NoWorkResult from './no-work-resul"
},
{
"path": "lib/processor.js",
"chars": 1738,
"preview": "'use strict'\n\nlet Document = require('./document')\nlet LazyResult = require('./lazy-result')\nlet NoWorkResult = require("
},
{
"path": "lib/result.d.ts",
"chars": 4348,
"preview": "import {\n Document,\n Node,\n Plugin,\n ProcessOptions,\n Root,\n SourceMap,\n TransformCallback,\n Warning,\n WarningO"
},
{
"path": "lib/result.js",
"chars": 738,
"preview": "'use strict'\n\nlet Warning = require('./warning')\n\nclass Result {\n get content() {\n return this.css\n }\n\n constructo"
},
{
"path": "lib/root.d.ts",
"chars": 2253,
"preview": "import Container, { ContainerProps } from './container.js'\nimport Document from './document.js'\nimport { ProcessOptions "
},
{
"path": "lib/root.js",
"chars": 1239,
"preview": "'use strict'\n\nlet Container = require('./container')\n\nlet LazyResult, Processor\n\nclass Root extends Container {\n constr"
},
{
"path": "lib/rule.d.ts",
"chars": 2893,
"preview": "import Container, {\n ContainerProps,\n ContainerWithChildren\n} from './container.js'\n\ndeclare namespace Rule {\n export"
},
{
"path": "lib/rule.js",
"chars": 569,
"preview": "'use strict'\n\nlet Container = require('./container')\nlet list = require('./list')\n\nclass Rule extends Container {\n get "
},
{
"path": "lib/stringifier.d.ts",
"chars": 1364,
"preview": "import {\n AnyNode,\n AtRule,\n Builder,\n Comment,\n Container,\n Declaration,\n Document,\n Root,\n Rule\n} from './pos"
},
{
"path": "lib/stringifier.js",
"chars": 8220,
"preview": "'use strict'\n\nconst DEFAULT_RAW = {\n after: '\\n',\n beforeClose: '\\n',\n beforeComment: '\\n',\n beforeDecl: '\\n',\n bef"
},
{
"path": "lib/stringify.d.ts",
"chars": 165,
"preview": "import { Stringifier } from './postcss.js'\n\ninterface Stringify extends Stringifier {\n default: Stringify\n}\n\ndeclare co"
},
{
"path": "lib/stringify.js",
"chars": 213,
"preview": "'use strict'\n\nlet Stringifier = require('./stringifier')\n\nfunction stringify(node, builder) {\n let str = new Stringifie"
},
{
"path": "lib/symbols.js",
"chars": 91,
"preview": "'use strict'\n\nmodule.exports.isClean = Symbol('isClean')\n\nmodule.exports.my = Symbol('my')\n"
},
{
"path": "lib/terminal-highlight.js",
"chars": 1399,
"preview": "'use strict'\n\nlet pico = require('picocolors')\n\nlet tokenizer = require('./tokenize')\n\nlet Input\n\nfunction registerInput"
},
{
"path": "lib/tokenize.js",
"chars": 6538,
"preview": "'use strict'\n\nconst SINGLE_QUOTE = \"'\".charCodeAt(0)\nconst DOUBLE_QUOTE = '\"'.charCodeAt(0)\nconst BACKSLASH = '\\\\'.charC"
},
{
"path": "lib/warn-once.js",
"chars": 256,
"preview": "/* eslint-disable no-console */\n'use strict'\n\nlet printed = {}\n\nmodule.exports = function warnOnce(message) {\n if (prin"
},
{
"path": "lib/warning.d.ts",
"chars": 2918,
"preview": "import { RangePosition } from './css-syntax-error.js'\nimport Node from './node.js'\n\ndeclare namespace Warning {\n export"
},
{
"path": "lib/warning.js",
"chars": 739,
"preview": "'use strict'\n\nclass Warning {\n constructor(text, opts = {}) {\n this.type = 'warning'\n this.text = text\n\n if (o"
},
{
"path": "package.json",
"chars": 4387,
"preview": "{\n \"name\": \"postcss\",\n \"version\": \"8.5.8\",\n \"description\": \"Tool for transforming styles with JS plugins\",\n \"engines"
},
{
"path": "patches/yargs@17.7.2.patch",
"chars": 694,
"preview": "diff --git a/browser.d.ts b/browser.d.ts\ndeleted file mode 100644\nindex 21f3fc69190b574ab8456514d3da1972afa53973..000000"
},
{
"path": "test/at-rule.test.ts",
"chars": 1362,
"preview": "import { test } from 'uvu'\nimport { is, type } from 'uvu/assert'\n\nimport { AtRule, parse } from '../lib/postcss.js'\n\ntes"
},
{
"path": "test/comment.test.ts",
"chars": 480,
"preview": "import { test } from 'uvu'\nimport { is } from 'uvu/assert'\n\nimport { Comment, parse } from '../lib/postcss.js'\n\ntest('to"
},
{
"path": "test/container.test.ts",
"chars": 22613,
"preview": "import { test } from 'uvu'\nimport { equal, is, match, throws, type } from 'uvu/assert'\n\nimport { AtRule, Declaration, pa"
},
{
"path": "test/css-syntax-error.test.ts",
"chars": 10700,
"preview": "import Concat from 'concat-with-sourcemaps'\nimport { join, resolve as pathResolve } from 'node:path'\nimport { pathToFile"
},
{
"path": "test/declaration.test.ts",
"chars": 1446,
"preview": "import { test } from 'uvu'\nimport { is } from 'uvu/assert'\n\nimport { Declaration, parse, Rule } from '../lib/postcss.js'"
},
{
"path": "test/document.test.ts",
"chars": 673,
"preview": "import { test } from 'uvu'\nimport { is, match } from 'uvu/assert'\n\nimport Document from '../lib/document.js'\nimport { pa"
},
{
"path": "test/errors.ts",
"chars": 646,
"preview": "import { PluginCreator } from '../lib/postcss.js'\n\nconst plugin: PluginCreator<{ a: number }> = opts => {\n // THROWS 'o"
},
{
"path": "test/fromJSON.test.ts",
"chars": 1789,
"preview": "import { test } from 'uvu'\nimport { instance, is, throws } from 'uvu/assert'\nimport * as v8 from 'v8'\n\nimport postcss, {"
},
{
"path": "test/input.test.ts",
"chars": 645,
"preview": "import { test } from 'uvu'\nimport { equal, is } from 'uvu/assert'\n\nimport { Input } from '../lib/postcss.js'\n\ntest('from"
},
{
"path": "test/integration.js",
"chars": 178,
"preview": "#!/usr/bin/env node\n\nlet { testOnReal } = require('postcss-parser-tests')\n\nlet { parse } = require('../')\n\ntestOnReal(cs"
},
{
"path": "test/lazy-result.test.ts",
"chars": 1915,
"preview": "import { SourceMapGenerator } from 'source-map-js'\nimport { test } from 'uvu'\nimport { equal, is, type } from 'uvu/asser"
},
{
"path": "test/list.test.ts",
"chars": 1294,
"preview": "import { test } from 'uvu'\nimport { equal } from 'uvu/assert'\n\nimport { list } from '../lib/postcss.js'\n\ntest('space() s"
},
{
"path": "test/location.test.ts",
"chars": 5689,
"preview": "import { test } from 'uvu'\nimport { equal } from 'uvu/assert'\n\nimport {\n AtRule,\n Comment,\n Declaration,\n Node,\n pa"
},
{
"path": "test/map.test.ts",
"chars": 18389,
"preview": "import {\n existsSync,\n lstatSync,\n mkdirSync,\n readdirSync,\n rmdirSync,\n unlinkSync,\n writeFileSync\n} from 'fs'\ni"
},
{
"path": "test/no-work-result.test.ts",
"chars": 5578,
"preview": "import { spy } from 'nanospy'\nimport { SourceMapGenerator } from 'source-map-js'\nimport { test } from 'uvu'\nimport { equ"
},
{
"path": "test/node.test.ts",
"chars": 26712,
"preview": "import { resolve } from 'path'\nimport { test } from 'uvu'\nimport { equal, is, not, type } from 'uvu/assert'\n\nimport post"
},
{
"path": "test/old-node.js",
"chars": 314,
"preview": "// eslint-disable-next-line\nglobalThis = Function('return this')()\n\nlet Module = require('module')\nlet originalRequire ="
},
{
"path": "test/parse.test.ts",
"chars": 6405,
"preview": "import { readFileSync } from 'fs'\nimport { resolve } from 'path'\nimport { eachTest, jsonify, testPath } from 'postcss-pa"
},
{
"path": "test/postcss.test.ts",
"chars": 4896,
"preview": "import { restoreAll, spyOn } from 'nanospy'\nimport { test } from 'uvu'\nimport { equal, is, match, throws, type } from 'u"
},
{
"path": "test/previous-map.test.ts",
"chars": 8731,
"preview": "import {\n existsSync,\n lstatSync,\n mkdirSync,\n readdirSync,\n rmdirSync,\n unlinkSync,\n writeFileSync\n} from 'fs'\ni"
},
{
"path": "test/processor.test.ts",
"chars": 15458,
"preview": "import { delay } from 'nanodelay'\nimport { restoreAll, spyOn } from 'nanospy'\nimport { resolve as pathResolve } from 'pa"
},
{
"path": "test/result.test.ts",
"chars": 1629,
"preview": "import { test } from 'uvu'\nimport { equal, is } from 'uvu/assert'\n\nimport postcss, { Plugin, Result, Root, Warning } fro"
},
{
"path": "test/root.test.ts",
"chars": 1828,
"preview": "import { test } from 'uvu'\nimport { is, match, type } from 'uvu/assert'\n\nimport { parse, Result } from '../lib/postcss.j"
},
{
"path": "test/rule.test.ts",
"chars": 2258,
"preview": "import { test } from 'uvu'\nimport { equal, is } from 'uvu/assert'\n\nimport { parse, Rule } from '../lib/postcss.js'\n\ntest"
},
{
"path": "test/stringifier.test.js",
"chars": 7447,
"preview": "let { test } = require('uvu')\nlet { is } = require('uvu/assert')\n\nlet {\n AtRule,\n Declaration,\n Document,\n Node,\n p"
},
{
"path": "test/stringify.test.ts",
"chars": 398,
"preview": "import { eachTest } from 'postcss-parser-tests'\nimport { test } from 'uvu'\nimport { is } from 'uvu/assert'\n\nimport { par"
},
{
"path": "test/tokenize.test.js",
"chars": 6664,
"preview": "let { test } = require('uvu')\nlet { equal, is, throws } = require('uvu/assert')\n\nlet { Input } = require('../lib/postcss"
},
{
"path": "test/types.ts",
"chars": 1491,
"preview": "import postcss, { Document, PluginCreator } from '../lib/postcss.js'\nimport { RootRaws } from '../lib/root.js'\n\nconst pl"
},
{
"path": "test/version.js",
"chars": 242,
"preview": "#!/usr/bin/env node\n\nlet Processor = require('../lib/processor')\nlet pkg = require('../package')\n\nlet instance = new Pro"
},
{
"path": "test/visitor.test.ts",
"chars": 38838,
"preview": "import { delay } from 'nanodelay'\nimport { basename, resolve } from 'path'\nimport { test } from 'uvu'\nimport { equal, is"
},
{
"path": "test/warning.test.ts",
"chars": 4996,
"preview": "import { resolve } from 'path'\nimport { test } from 'uvu'\nimport { is, type } from 'uvu/assert'\n\nimport { decl, parse, W"
},
{
"path": "tsconfig.json",
"chars": 174,
"preview": "{\n \"compilerOptions\": {\n \"lib\": [\"es2018\"],\n \"target\": \"es2018\",\n \"module\": \"commonjs\",\n \"strict\": true,\n "
}
]
About this extraction
This page contains the full source code of the postcss/postcss GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 106 files (582.9 KB), approximately 166.7k tokens, and a symbol index with 456 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.