hanzoai/postcss
2
0
Fork 0
mirror of https://github.com/hanzoai/postcss.git synced 2026-09-24 17:01:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move to oxfmt

Browse Source
This commit is contained in:
Andrey Sitnik
2026-04-07 16:07:54 +00:00
parent 9f08141f59
commit 85bf516d71
36 changed files with 2751 additions and 2065 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/CONTRIBUTING.md
+8 -11
View File
@@ -3,7 +3,6 @@
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
@@ -14,24 +13,24 @@ moderated by the PostCSS author.
Plugins submitted by the community are located in [`docs/plugins`].
* **Keep plugins ordered**
- **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**
- **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**
- **Check PostCSS plugin guidelines**
The suggested plugin should match plugin [guidelines].
- **Provide link to suggested plugin**
* **Provide link to suggested plugin**
Make sure your pull request description contains a link to the plugin
you want to add.
@@ -39,24 +38,22 @@ Plugins submitted by the community are located in [`docs/plugins`].
[`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**
- **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.
- 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
CHANGELOG.md
+801 -529
View File
File diff suppressed because it is too large Load Diff
README.md
+90 -126
View File
@@ -14,17 +14,16 @@ and JetBrains. The [Autoprefixer] and [Stylelint] PostCSS plugins are some o
---
<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>.
<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
[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
@@ -37,7 +36,6 @@ PostCSS needs your support. We are accepting donations
<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
@@ -53,59 +51,54 @@ 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
- [`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
- [`postcss-modules`] and [`react-css-modules`] automatically isolate
selectors within components.
* [`postcss-autoreset`] is an alternative to using a global reset
- [`postcss-autoreset`] is an alternative to using a global reset
that is better for isolatable components.
* [`postcss-initial`] adds `all: initial` support, which resets
- [`postcss-initial`] adds `all: initial` support, which resets
all inherited styles.
* [`cq-prolyfill`] adds container query support, allowing styles that respond
- [`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.
- [`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.
- [`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.
- [`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
- [`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.
- [`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.
- [`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
@@ -142,26 +135,26 @@ 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
- [`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
- [`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-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
@@ -178,20 +171,17 @@ you can write a parser and/or stringifier to extend PostCSS.
[`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)
- [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)
- [Mastering PostCSS for Web Design](https://www.packtpub.com/web-development/mastering-postcss-web-design) by Alex Libby, Packt. (June 2016)
## Usage
@@ -202,7 +192,6 @@ You can start using PostCSS in just two steps:
[Select plugins]: https://postcss.org/docs/postcss-plugins
### CSS-in-JS
The best way to use PostCSS with CSS-in-JS is [`astroturf`].
@@ -214,11 +203,11 @@ module.exports = {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'postcss-loader'],
use: ['style-loader', 'postcss-loader']
},
{
test: /\.jsx?$/,
use: ['babel-loader', 'astroturf/loader'],
use: ['babel-loader', 'astroturf/loader']
}
]
}
@@ -230,10 +219,7 @@ Then create `postcss.config.js`:
```js
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
plugins: [require('autoprefixer'), require('postcss-nested')]
}
module.exports = config
@@ -241,7 +227,6 @@ module.exports = config
[`astroturf`]: https://github.com/4Catalyzer/astroturf
### Parcel
[Parcel] has built-in PostCSS support. It already uses Autoprefixer
@@ -251,10 +236,7 @@ in project’s root:
```js
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
plugins: [require('autoprefixer'), require('postcss-nested')]
}
module.exports = config
@@ -266,7 +248,6 @@ Parcel will even automatically install these plugins for you.
[Parcel]: https://parceljs.org
### Webpack
Use [`postcss-loader`] in `webpack.config.js`:
@@ -280,12 +261,12 @@ module.exports = {
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
importLoaders: 1
}
},
{
@@ -303,10 +284,7 @@ Then create `postcss.config.js`:
```js
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
plugins: [require('autoprefixer'), require('postcss-nested')]
}
module.exports = config
@@ -314,7 +292,6 @@ module.exports = config
[`postcss-loader`]: https://github.com/postcss/postcss-loader
### Gulp
Use [`gulp-postcss`] and [`gulp-sourcemaps`].
@@ -324,18 +301,18 @@ 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/') )
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
@@ -347,7 +324,6 @@ 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
@@ -359,7 +335,7 @@ 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') ])
const prefixer = postcss.sync([require('autoprefixer')])
prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
```
@@ -369,22 +345,20 @@ prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-
[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)
- **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
@@ -401,7 +375,7 @@ fs.readFile('src/app.css', (err, css) => {
.process(css, { from: 'src/app.css', to: 'dest/app.css' })
.then(result => {
fs.writeFile('dest/app.css', result.css, () => true)
if ( result.map ) {
if (result.map) {
fs.writeFile('dest/app.css.map', result.map.toString(), () => true)
}
})
@@ -415,28 +389,26 @@ 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.
- 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).
- `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
@@ -447,39 +419,32 @@ by adding `postcss-fail-on-warn` plugin in the end of PostCSS plugins:
```js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-fail-on-warn')
]
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`] 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`] adds PostCSS highlight.
[`Syntax-highlighting-for-PostCSS`]: https://github.com/hudochenkov/Syntax-highlighting-for-PostCSS
### Vim
* [`postcss.vim`] adds PostCSS highlight.
- [`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].
@@ -493,7 +458,6 @@ Tidelift will coordinate the fix and disclosure.
[Tidelift security contact]: https://tidelift.com/security
## For Enterprise
Available as part of the Tidelift Subscription.
docs/README-cn.md
+78 -86
View File
@@ -39,44 +39,44 @@ PostCSS 插件），请联系 [Evil Martians](https://evilmartians.com/?utm_sou
### 解决全局 CSS 的问题
* [`postcss-use`] 允许你在 CSS 里明确地设置 PostCSS 插件，并且只在当前文件执行它们。
* [`postcss-modules`] 和 [`react-css-modules`] 可以自动以组件为单位隔绝 CSS 选择器。
* [`postcss-autoreset`] 是全局样式重置的又一个选择，它更适用于分离的组件。
* [`postcss-initial`] 添加了 `all: initial` 的支持，重置了所有继承的样式。
* [`cq-prolyfill`] 添加了容器查询的支持，允许添加响应于父元素宽度的样式.
- [`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 特性。
- [`autoprefixer`] 添加了 vendor 浏览器前缀，它使用 Can I Use 上面的数据。
- [`postcss-preset-env`] 允许你使用未来的 CSS 特性。
### 更佳的 CSS 可读性
* [`postcss-sorting`] 给规则的内容以及@规则排序。
* [`postcss-utilities`] 囊括了最常用的简写方式和书写帮助。
* [`short`] 添加并拓展了大量的缩写属性。
- [`postcss-sorting`] 给规则的内容以及@规则排序。
- [`postcss-utilities`] 囊括了最常用的简写方式和书写帮助。
- [`short`] 添加并拓展了大量的缩写属性。
### 图片和字体
* [`postcss-assets`] 可以插入图片尺寸和内联文件。
* [`postcss-sprites`] 能生成雪碧图。
* [`font-magician`] 生成所有在 CSS 里需要的 `@font-face` 规则。
* [`postcss-inline-svg`] 允许你内联 SVG 并定制它的样式。
* [`postcss-write-svg`] 允许你在 CSS 里写简单的 SVG。
- [`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`] 帮助你保持一个始终如一的调色板。
- [`stylelint`] 是一个模块化的样式提示器。
- [`stylefmt`] 是一个能根据 `stylelint` 规则自动优化 CSS 格式的工具。
- [`doiuse`] 提示 CSS 的浏览器支持性，使用的数据来自于 Can I Use。
- [`colorguard`] 帮助你保持一个始终如一的调色板。
### 其它
* [`postcss-rtl`] 在单个 CSS 文件里组合了两个方向（左到右，右到左）的样式。
* [`cssnano`] 是一个模块化的 CSS 压缩器。
* [`lost`] 是一个功能强大的 `calc()` 栅格系统。
* [`rtlcss`] 镜像翻转 CSS 样式，适用于 right-to-left 的应用场景。
- [`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
@@ -110,19 +110,19 @@ PostCSS 插件），请联系 [Evil Martians](https://evilmartians.com/?utm_sou
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。
- [`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
@@ -140,15 +140,15 @@ PostCSS 可以转化样式到任意语法，不仅仅是 CSS。
## 文章
* [一些你对 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)
- [一些你对 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月)
- Alex Libby, Packt 的 [网页设计之精通 PostCSS](https://www.packtpub.com/web-development/mastering-postcss-web-design) (2016年6月)
## 使用方法
@@ -169,11 +169,11 @@ module.exports = {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'postcss-loader'],
use: ['style-loader', 'postcss-loader']
},
{
test: /\.jsx?$/,
use: ['babel-loader', 'astroturf/loader'],
use: ['babel-loader', 'astroturf/loader']
}
]
}
@@ -184,10 +184,7 @@ module.exports = {
```js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
plugins: [require('autoprefixer'), require('postcss-nested')]
}
```
@@ -197,10 +194,7 @@ module.exports = {
```js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
plugins: [require('autoprefixer'), require('postcss-nested')]
}
```
@@ -221,12 +215,12 @@ module.exports = {
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
importLoaders: 1
}
},
{
@@ -243,10 +237,7 @@ module.exports = {
```js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
plugins: [require('autoprefixer'), require('postcss-nested')]
}
```
@@ -261,11 +252,12 @@ 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/') )
return gulp
.src('src/**/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([require('postcss-nested'), require('autoprefixer')]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('build/'))
})
```
@@ -292,7 +284,7 @@ postcss --use autoprefixer -c options.json -o main.css css/*.css
```js
var postcss = require('postcss-js')
var prefixer = postcss.sync([ require('autoprefixer') ])
var prefixer = postcss.sync([require('autoprefixer')])
prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
```
@@ -304,17 +296,17 @@ prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-
### 运行器
* **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)
- **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
@@ -331,7 +323,7 @@ fs.readFile('src/app.css', (err, css) => {
.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)
if (result.map) fs.writeFile('dest/app.css.map', result.map)
})
})
```
@@ -347,17 +339,17 @@ fs.readFile('src/app.css', (err, css) => {
绝大多数 PostCSS 运行器接受两个参数：
* 一个包含所需插件的数组
* 一个配置选项的对象
- 一个包含所需插件的数组
- 一个配置选项的对象
常见的选项：
* `syntax`: 一个提供了语法解释器和 stringifier 的对象。
* `parser`: 一个特殊的语法解释器（例如 [SCSS]）。
* `stringifier`: 一个特殊的语法 output 生成器（例如 [Midas]）。
* `map`: [source map 选项].
* `from`: input 文件名称（大多数运行器自动设置了这个）。
* `to`: output 文件名称（大多数运行器自动设置了这个）。
- `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
@@ -365,14 +357,14 @@ fs.readFile('src/app.css', (err, css) => {
### Atom
* [`language-postcss`] 添加了 PostCSS 和 [SugarSS] 代码高亮。
* [`source-preview-postcss`] 在一个独立窗口里实时预览生成的 CSS。
- [`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`] 添加了 PostCSS 代码高亮。
[`Syntax-highlighting-for-PostCSS`]: https://github.com/hudochenkov/Syntax-highlighting-for-PostCSS
[`source-preview-postcss`]: https://atom.io/packages/source-preview-postcss
@@ -380,7 +372,7 @@ fs.readFile('src/app.css', (err, css) => {
### Vim
* [`postcss.vim`] 添加了 PostCSS 代码高亮。
- [`postcss.vim`] 添加了 PostCSS 代码高亮。
[`postcss.vim`]: https://github.com/stephenway/postcss.vim
docs/README.md
+83 -82
View File
@@ -1,88 +1,89 @@
# 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)
- [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)
- [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)
- [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)
docs/architecture.md
+26 -29
View File
@@ -4,11 +4,11 @@ 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](#overview)
- [Workflow](#workflow)
- [Core Structures](#core-structures)
- [API Reference](#api-reference)
### Overview
@@ -18,20 +18,19 @@ Before diving deeper into the development of PostCSS let's briefly describe what
**PostCSS**
- *is **NOT** a style preprocessor like `Sass` or `Less`.*
- _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*
- _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*
- _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
@@ -40,15 +39,15 @@ This is a high-level overview of the whole PostCSS 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.
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*
- _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)*
- _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.
@@ -64,10 +63,9 @@ 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 [`lib/tokenize.js`](https://github.com/postcss/postcss/blob/main/lib/tokenize.js)
Tokenizer (aka Lexer) plays important role in syntax analysis.
@@ -78,23 +76,20 @@ So now let's look more closely on structures that play the main role in PostCSS
For example, if we consider following CSS
```css
.className { color: #FFF; }
.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]
;[
['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)]
]
```
@@ -115,12 +110,15 @@ So now let's look more closely on structures that play the main role in PostCSS
// tokens like `space` don't have such information.
// Here the first number is line number and the second one is corresponding column.
1, 1,
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
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.
@@ -149,7 +147,6 @@ So now let's look more closely on structures that play the main role in PostCSS
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/)
docs/guidelines/plugin.md
+25 -40
View File
@@ -3,7 +3,7 @@
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.
The rules below are _mandatory_ for all PostCSS plugins.
See also [ClojureWerkz’s recommendations] for open source projects.
@@ -11,28 +11,28 @@ See also [ClojureWerkz’s recommendations] for open source projects.
**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)
- [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
@@ -52,7 +52,6 @@ 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
@@ -65,7 +64,6 @@ 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.
@@ -78,7 +76,6 @@ 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.
@@ -106,7 +103,6 @@ It is better even not to import `postcss`.
module.exports.postcss = true
```
### 1.5. Set `plugin.postcssPlugin` with plugin name
Plugin name will be used in error messages and warnings.
@@ -115,7 +111,7 @@ Plugin name will be used in error messages and warnings.
module.exports = opts => {
return {
postcssPlugin: 'postcss-name',
Once (root) {
Once(root) {
// Plugin code
}
}
@@ -123,7 +119,6 @@ module.exports = opts => {
module.exports.postcss = true
```
## 2. Processing
### 2.1. Plugin must be tested
@@ -133,7 +128,6 @@ different environments. You should test in (at least) Node.js [active LTS](https
[Travis]: https://travis-ci.org/
### 2.2. Use asynchronous methods whenever possible
For example, use `fs.writeFile` instead of `fs.writeFileSync`:
@@ -144,7 +138,7 @@ let { readFile } = require('fs').promises
module.exports = opts => {
return {
postcssPlugin: 'plugin-inline',
async Decl (decl) {
async Decl(decl) {
const imagePath = findImage(decl)
if (imagePath) {
let imageFile = await readFile(imagePath)
@@ -195,7 +189,6 @@ or at-rule’s name do you need:
module.exports.postcss = true
```
### 2.4. Set `node.source` for new nodes
Every node must have a relevant `source` so PostCSS can generate
@@ -220,7 +213,6 @@ if (decl.prop === 'animation') {
}
```
### 2.5. Use only the public PostCSS API
PostCSS plugins must not rely on undocumented properties or methods,
@@ -229,7 +221,6 @@ is described in [API docs].
[API docs]: https://postcss.org/api/
## 3. Dependencies
### 3.1. Use messages to specify dependencies
@@ -261,7 +252,6 @@ result.messages.push({
})
```
## 4. Errors
### 4.1. Use `node.error` on CSS relevant errors
@@ -276,7 +266,6 @@ if (typeof mixins[name] === 'undefined') {
}
```
### 4.2. Use `result.warn` for warnings
Do not print warnings with `console.log` or `console.warn`,
@@ -292,7 +281,6 @@ Declaration (decl, { result }) {
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
@@ -303,7 +291,6 @@ 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.
@@ -315,7 +302,6 @@ 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
@@ -328,7 +314,6 @@ Of course, you should be using [SemVer].
[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
docs/guidelines/runner.md
+17 -28
View File
@@ -16,22 +16,22 @@ See also [ClojureWerkz’s recommendations] for open source projects.
**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)
- [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
@@ -52,7 +52,6 @@ module.exports = [
[`postcss-assets`]: https://github.com/borodean/postcss-assets
## 2. Processing
### 2.1. Set `from` and `to` processing options
@@ -66,7 +65,6 @@ to point to the same file:
processor.process({ from: file.path, to: file.path })
```
### 2.2. Use only the asynchronous API
PostCSS runners must use only the asynchronous API.
@@ -76,10 +74,9 @@ 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,
@@ -88,7 +85,6 @@ is described in [API docs].
[API docs]: https://postcss.org/api/
## 3. Dependencies
### 3.1. Rebuild when dependencies change
@@ -115,7 +111,6 @@ 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`
@@ -134,7 +129,6 @@ processor.process(opts).catch(error => {
})
```
### 4.2. Display `result.warnings()`
PostCSS runners must output warnings from `result.warnings()`:
@@ -150,7 +144,6 @@ 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,
@@ -163,7 +156,6 @@ if (result.map) {
}
```
## 5. Documentation
### 5.1. Document your runner in English
@@ -174,7 +166,6 @@ 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,
@@ -187,7 +178,6 @@ Of course, you should use [SemVer].
[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
@@ -197,7 +187,6 @@ 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.
docs/plugins.md
+370 -382
View File
@@ -2,19 +2,19 @@
**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](#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
@@ -36,7 +36,7 @@ Limit a plugin's local stylesheet context using [`postcss-plugin-context`]:
Or enable plugins directly in CSS using [`postcss-use`]:
```pcss
@use autoprefixer(browsers: ['last 2 versions']);
@use autoprefixer(browsers: [ 'last 2 versions']);
:fullscreen a {
display: flex;
@@ -46,27 +46,26 @@ Or enable plugins directly in CSS using [`postcss-use`]:
[`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
- [`postcss-utilities`] includes the most commonly used mixins, shortcuts
and helpers to use as `@util` rules.
* [`atcss`] contains plugins that transform your CSS according
- [`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
- [`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
- [`rucksack`] contains plugins to speed up CSS development
with new features and shortcuts.
* [`level4`] contains only plugins that let you write CSS4 without
- [`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
- [`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-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
@@ -79,534 +78,523 @@ Or enable plugins directly in CSS using [`postcss-use`]:
[`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
- [`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
- [`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
- [`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
- [`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
- [`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
- [`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
- [`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`
- [`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`
- [`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
- [`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
- [`postcss-host`] makes the Shadow DOM’s `:host` selector work properly
with pseudo-classes.
* [`postcss-initial`] supports `initial` keyword and `all: initial`
- [`postcss-initial`] supports `initial` keyword and `all: initial`
to clean inherit styles.
* [`postcss-logical-properties`] transforms `start` and `end` properties
- [`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`
- [`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()`
- [`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)
- [`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.
- [`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
- [`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
- [`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`
- [`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
- [`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
- [`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
- [`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
- [`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
- [`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`
- [`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()`
- [`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
- [`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
- [`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
- [`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
- [`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
- [`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
- [`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’,
- [`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()`
- [`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,
- [`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
- [`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
- [`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
- [`postcss-responsive-properties`] allows you to write responsive
property values.
* [`postcss-text-remove-gap`] remove space before and after text strings, added
- [`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
- [`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
- [`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
- [`postcss-easy-z`] lets you organize z-indices by declaring relations
between them.
* [`@csstools/postcss-design-tokens`] lets you import and use design tokens
- [`@csstools/postcss-design-tokens`] lets you import and use design tokens
from CSS.
* [`postcss-smooth-shadow`] generates more realistic smooth shadow.
- [`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
- [`postcss-ase-colors`] replaces color names with values read
from an ASE palette file.
* [`postcss-brand-colors`] inserts company brand colors
- [`postcss-brand-colors`] inserts company brand colors
in the `brand-colors` module.
* [`postcss-color-alpha`] transforms `#hex.a`, `black(alpha)` and `white(alpha)`
- [`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)`
- [`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
- [`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
- [`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.
- [`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,
- [`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`
- [`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
- [`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
- [`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
- [`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
- [`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
- [`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
- [`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`,
- [`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
- [`postcss-font-pack`] simplifies font declarations and validates they match
configured font packs.
* [`postcss-fontsize`] generates `rem` unit `font-size` and `line-height`
- [`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
- [`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`
- [`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.
- [`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
- [`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
- [`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
- [`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.
- [`postcss-simple-grid`] create grid with one line.
- [`lost`] feature-rich `calc()` grid system by Jeet author.
## Optimizations
* [`postcss-calc`] reduces `calc()` to values
- [`postcss-calc`] reduces `calc()` to values
(when expressions involve the same units).
* [`postcss-remove-nested-calc`] `calc(100vw - calc(20% - 10px))` to
- [`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
- [`postcss-class-name-shortener`] shortens CSS class names to optimize
website performance.
* [`postcss-combine-duplicated-selectors`] automatically join identical
- [`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
- [`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
- [`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
- [`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.
- [`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
- [`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
- [`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`
- [`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
- [`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.
- [`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
- [`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
- [`postcss-nested-ancestors`] reference any parent/ancestor selector
in nested CSS.
* [`postcss-parent-selector`] adds a parent selector to the beginning
- [`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
- [`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
- [`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
- [`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
- [`postcss-short-position`] extends `position` to define edges
as additional values.
* [`postcss-short-spacing`] extends `margin` and `padding` to allow
- [`postcss-short-spacing`] extends `margin` and `padding` to allow
or omitted edges.
* [`postcss-short-text`] adds a `text` shortcut property for several
- [`postcss-short-text`] adds a `text` shortcut property for several
text-related properties.
* [`postcss-size`] adds a `size` shortcut that sets width and height
- [`postcss-size`] adds a `size` shortcut that sets width and height
with one declaration.
* [`postcss-speech-bubble`] adds speech bubbles of different kinds
- [`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`
- [`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
- [`postcss-add-root-selector`] intelligently wraps all rules
in a custom selector.
* [`postcss-alter-property-value`] alters your CSS declarations
- [`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
- [`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`
- [`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
- [`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
- [`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
- [`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,
- [`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
- [`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
- [`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
- [`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
- [`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`
- [`postcss-node-modules-replacer`] replaces path than includes `node_modules`
to `~`.
* [`postcss-plugin-namespace`] add a css selector to all rules,
- [`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`
- [`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`
- [`postcss-pseudo-element-cases`] converts `.style::BEFORE`
into `.style::before` and vice versa.
* [`postcss-pseudo-element-colons`] converts `.style:before`
- [`postcss-pseudo-element-colons`] converts `.style:before`
into `.style::before` and vice versa.
* [`postcss-pseudo-elements-content`] adds `content: ''` to `:before-c`
- [`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
- [`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
- [`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
- [`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
- [`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
- [`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`
- [`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
- [`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 */`.
- [`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
- [`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,
- [`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
- [`postcss-browser-reporter`] displays warning messages from other plugins
right in your browser.
* [`postcss-forced-variables`] provides warnings and errors when specified
- [`postcss-forced-variables`] provides warnings and errors when specified
properties don’t use variables.
* [`postcss-reporter`] logs warnings and other messages from other plugins
- [`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
- [`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
- [`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
docs/syntax.md
+18 -29
View File
@@ -8,24 +8,24 @@ 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.
- **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](#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
@@ -46,7 +46,6 @@ module.exports = {
[SCSS]: https://github.com/postcss/postcss-scss
## Parser
A good example of a parser is [Safe Parser], which parses malformed/broken CSS.
@@ -60,7 +59,7 @@ an object with PostCSS options.
```js
const postcss = require('postcss')
module.exports = function parse (css, opts) {
module.exports = function parse(css, opts) {
const root = postcss.root()
// Add other nodes to root
return root
@@ -74,7 +73,6 @@ not in direct `dependencies`.
[`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
@@ -92,7 +90,6 @@ The default PostCSS parser contains two steps:
[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
@@ -138,7 +135,6 @@ hardcore optimization there. You can extend the default [PostCSS parser].
[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.
@@ -150,7 +146,6 @@ 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)
@@ -168,7 +163,6 @@ 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.
@@ -178,7 +172,6 @@ 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
@@ -193,15 +186,14 @@ A Stringifier is a function which receives [`Root`] or [`Document`] node and bui
Then it calls builder with every node’s string and node instance.
```js
module.exports = function stringify (root, builder) {
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
@@ -213,7 +205,6 @@ 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.
@@ -235,7 +226,6 @@ this.builder(rule.selector + '{', rule, 'start')
this.builder('}', rule, 'end')
```
### Raw Values
A good PostCSS custom syntax saves all symbols and provide byte-to-byte equal
@@ -253,7 +243,6 @@ 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.
docs/writing-a-plugin.md
+48 -50
View File
@@ -2,52 +2,51 @@
**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](#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)
- [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.
- [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
- **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
- **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,
- **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`]
- **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
- **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.
- **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.
@@ -68,24 +67,25 @@ There are many fields where writing new PostCSS plugin will help your work:
[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
- 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
- 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.
@@ -104,21 +104,22 @@ 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"`
- [`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
- [`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
@@ -136,10 +137,10 @@ You can find all nodes with specific types by adding method to plugin object:
module.exports = (opts = {}) => {
return {
postcssPlugin: 'PLUGIN NAME',
Once (root) {
Once(root) {
// Calls once per file, since every file has single Root
},
Declaration (decl) {
Declaration(decl) {
// All declaration nodes
}
}
@@ -170,21 +171,21 @@ you can use quick search:
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)
- [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)
- [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)
- [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:
@@ -207,15 +208,15 @@ runtime-defined listeners:
module.exports = (opts = {}) => {
return {
postcssPlugin: 'vars-collector',
prepare (result) {
prepare(result) {
const variables = {}
return {
Declaration (node) {
Declaration(node) {
if (node.variable) {
variables[node.prop] = node.value
}
},
OnceExit () {
OnceExit() {
console.log(variables)
}
}
@@ -229,7 +230,6 @@ 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
@@ -261,10 +261,10 @@ any children, plugin will re-visit parent as well. Only `Once` and
const plugin = () => {
return {
postcssPlugin: 'to-red',
Rule (rule) {
Rule(rule) {
console.log(rule.toString())
},
Declaration (decl) {
Declaration(decl) {
console.log(decl.toString())
decl.value = 'red'
}
@@ -301,7 +301,7 @@ const processed = Symbol('processed')
const plugin = () => {
return {
postcssPlugin: 'example',
Rule (rule) {
Rule(rule) {
if (!rule[processed]) {
process(rule)
rule[processed] = true
@@ -367,7 +367,6 @@ if (!variables[name]) {
[`Node#next`]: https://postcss.org/api/#node-next
[API docs]: https://postcss.org/api/
## Step 5: Fight with frustration
> I hate programming<br />
@@ -392,7 +391,6 @@ 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.
lib/at-rule.d.ts
Vendored
-1
View File
@@ -49,7 +49,6 @@ declare namespace AtRule {
raws?: AtRuleRaws
}
export { AtRule_ as default }
}
lib/comment.d.ts
Vendored
-1
View File
@@ -26,7 +26,6 @@ declare namespace Comment {
text: string
}
export { Comment_ as default }
}
lib/container.d.ts
Vendored
+1 -6
View File
@@ -8,11 +8,7 @@ import Rule from './rule.js'
declare namespace Container {
export type ContainerWithChildren<Child extends Node = ChildNode> = {
nodes: Child[]
} & (
| AtRule
| Root
| Rule
)
} & (AtRule | Root | Rule)
export interface ValueOptions {
/**
@@ -43,7 +39,6 @@ declare namespace Container {
| string
| undefined
export { Container_ as default }
}
lib/css-syntax-error.d.ts
Vendored
-1
View File
@@ -16,7 +16,6 @@ declare namespace CssSyntaxError {
line: number
}
export { CssSyntaxError_ as default }
}
lib/declaration.d.ts
Vendored
-1
View File
@@ -39,7 +39,6 @@ declare namespace Declaration {
value: string
}
export { Declaration_ as default }
}
lib/document.d.ts
Vendored
-1
View File
@@ -16,7 +16,6 @@ declare namespace Document {
raws?: Record<string, any>
}
export { Document_ as default }
}
lib/input.d.ts
Vendored
-1
View File
@@ -49,7 +49,6 @@ declare namespace Input {
url: string
}
export { Input_ as default }
}
lib/input.js
+9 -1
View File
@@ -142,7 +142,15 @@ class Input {
)
}
result.input = { column, endColumn, endLine, endOffset, line, offset, source: this.css }
result.input = {
column,
endColumn,
endLine,
endOffset,
line,
offset,
source: this.css
}
if (this.file) {
if (pathToFileURL) {
result.input.url = pathToFileURL(this.file).toString()
lib/lazy-result.d.ts
Vendored
+3 -4
View File
@@ -6,7 +6,6 @@ import Root from './root.js'
import Warning from './warning.js'
declare namespace LazyResult {
export { LazyResult_ as default }
}
@@ -19,9 +18,9 @@ declare namespace LazyResult {
* const lazy = postcss([autoprefixer]).process(css)
* ```
*/
declare class LazyResult_<RootNode = Document | Root>
implements PromiseLike<Result<RootNode>>
{
declare class LazyResult_<RootNode = Document | Root> implements PromiseLike<
Result<RootNode>
> {
/**
* Processes input CSS through synchronous and asynchronous plugins
* and calls onRejected for each error thrown in any plugin.
lib/no-work-result.d.ts
Vendored
-1
View File
@@ -6,7 +6,6 @@ import Root from './root.js'
import Warning from './warning.js'
declare namespace NoWorkResult {
export { NoWorkResult_ as default }
}
lib/node.d.ts
Vendored
-1
View File
@@ -126,7 +126,6 @@ declare namespace Node {
word?: string
}
class Node extends Node_ {}
export { Node as default }
}
lib/postcss.d.mts
-3
View File
@@ -1,7 +1,6 @@
export {
// Type-only exports
AcceptedPlugin,
AnyNode,
atRule,
AtRule,
@@ -27,7 +26,6 @@ export {
fromJSON,
Helpers,
Input,
JSONHydrator,
// This is a class, but it’s not re-exported. That’s why it’s exported as type-only here.
type LazyResult,
@@ -64,6 +62,5 @@ export {
TransformCallback,
Transformer,
Warning,
WarningOptions
} from './postcss.js'
lib/postcss.d.ts
Vendored
+1 -3
View File
@@ -450,9 +450,7 @@ declare namespace postcss {
* @param plugins PostCSS plugins.
* @return Processor to process multiple CSS.
*/
declare function postcss(
plugins?: readonly postcss.AcceptedPlugin[]
): Processor
declare function postcss(plugins?: readonly postcss.AcceptedPlugin[]): Processor
declare function postcss(...plugins: postcss.AcceptedPlugin[]): Processor
export = postcss
lib/previous-map.d.ts
Vendored
-1
View File
@@ -3,7 +3,6 @@ import { SourceMapConsumer } from 'source-map-js'
import { ProcessOptions } from './postcss.js'
declare namespace PreviousMap {
export { PreviousMap_ as default }
}
lib/processor.d.ts
Vendored
-1
View File
@@ -12,7 +12,6 @@ import Result from './result.js'
import Root from './root.js'
declare namespace Processor {
export { Processor_ as default }
}
lib/result.d.ts
Vendored
-1
View File
@@ -39,7 +39,6 @@ declare namespace Result {
plugin?: string
}
export { Result_ as default }
}
lib/root.d.ts
Vendored
-1
View File
@@ -40,7 +40,6 @@ declare namespace Root {
raws?: RootRaws
}
export { Root_ as default }
}
lib/rule.d.ts
Vendored
+2 -2
View File
@@ -54,8 +54,8 @@ declare namespace Rule {
/** Selectors of the rule represented as an array of strings. */
selectors: readonly string[]
}
) & ContainerProps
) &
ContainerProps
export { Rule_ as default }
}
lib/stringifier.d.ts
Vendored
-1
View File
@@ -11,7 +11,6 @@ import {
} from './postcss.js'
declare namespace Stringifier {
export { Stringifier_ as default }
}
lib/warning.d.ts
Vendored
-1
View File
@@ -40,7 +40,6 @@ declare namespace Warning {
word?: string
}
export { Warning_ as default }
}
oxfmt.config.ts
+3
View File
@@ -0,0 +1,3 @@
import loguxOxfmtConfig from '@logux/oxc-configs/fmt'
export default loguxOxfmtConfig
package.json
+56 -54
View File
@@ -2,9 +2,47 @@
"name": "postcss",
"version": "8.5.8",
"description": "Tool for transforming styles with JS plugins",
"engines": {
"node": "^10 || ^12 || >=14"
"keywords": [
"css",
"manipulation",
"parser",
"postcss",
"preprocessor",
"rework",
"source map",
"transform",
"transpiler"
],
"homepage": "https://postcss.org/",
"bugs": {
"url": "https://github.com/postcss/postcss/issues"
},
"license": "MIT",
"author": "Andrey Sitnik <[email protected]>",
"repository": "postcss/postcss",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"main": "./lib/postcss.js",
"browser": {
"./lib/terminal-highlight": false,
"source-map-js": false,
"path": false,
"url": false,
"fs": false
},
"types": "./lib/postcss.d.ts",
"exports": {
".": {
"import": "./lib/postcss.mjs",
@@ -39,19 +77,6 @@
"./lib/warning": "./lib/warning.js",
"./package.json": "./package.json"
},
"main": "./lib/postcss.js",
"types": "./lib/postcss.d.ts",
"keywords": [
"css",
"postcss",
"rework",
"preprocessor",
"parser",
"source map",
"transform",
"manipulation",
"transpiler"
],
"scripts": {
"test:lint": "eslint .",
"test:types": "check-dts",
@@ -63,27 +88,6 @@
"unit": "uvu -r ts-node/register/transpile-only test \"\\.test\\.(ts|js)$\"",
"old": "uvu -r ../../../../../../../test/old-node.js -r ts-node/register/transpile-only test \"\\.test\\.(ts|js)$\""
},
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"author": "Andrey Sitnik <[email protected]>",
"license": "MIT",
"homepage": "https://postcss.org/",
"repository": "postcss/postcss",
"bugs": {
"url": "https://github.com/postcss/postcss/issues"
},
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@@ -91,6 +95,7 @@
},
"devDependencies": {
"@logux/eslint-config": "^57.1.0",
"@logux/oxc-configs": "^0.2.2",
"@size-limit/preset-small-lib": "^12.0.1",
"@types/node": "^25.5.2",
"actions-up": "^1.12.1",
@@ -102,6 +107,7 @@
"multiocular": "^0.8.2",
"nanodelay": "^1.0.8",
"nanospy": "^1.0.0",
"oxfmt": "^0.43.0",
"postcss-parser-tests": "^8.9.0",
"simple-git-hooks": "^2.13.1",
"size-limit": "^12.0.1",
@@ -110,15 +116,6 @@
"typescript": "^5.9.3",
"uvu": "^0.5.6"
},
"c8": {
"exclude": [
"**/*.test.*",
"lib/map-generator.js"
],
"lines": 100,
"reporter": "lcov",
"check-coverage": true
},
"simple-git-hooks": {
"pre-commit": "./test/version.js"
},
@@ -130,21 +127,23 @@
"singleQuote": true,
"trailingComma": "none"
},
"browser": {
"./lib/terminal-highlight": false,
"source-map-js": false,
"path": false,
"url": false,
"fs": false
},
"size-limit": [
{
"path": "lib/postcss.js",
"limit": "16 KB"
}
],
"clean-publish": {
"cleanDocs": true
"c8": {
"check-coverage": true,
"exclude": [
"**/*.test.*",
"lib/map-generator.js"
],
"lines": 100,
"reporter": "lcov"
},
"engines": {
"node": "^10 || ^12 || >=14"
},
"pnpm": {
"patchedDependencies": {
@@ -157,5 +156,8 @@
"onlyBuiltDependencies": [
"simple-git-hooks"
]
},
"clean-publish": {
"cleanDocs": true
}
}
pnpm-lock.yaml
Generated
+508
View File
@@ -26,6 +26,9 @@ importers:
'@logux/eslint-config':
specifier: ^57.1.0
version: 57.1.0(@typescript-eslint/[email protected]([email protected]([email protected]))([email protected]))([email protected])([email protected]([email protected]))([email protected])
'@logux/oxc-configs':
specifier: ^0.2.2
version: 0.2.2([email protected])([email protected]([email protected]))([email protected])
'@size-limit/preset-small-lib':
specifier: ^12.0.1
version: 12.0.1([email protected]([email protected]))
@@ -59,6 +62,9 @@ importers:
nanospy:
specifier: ^1.0.0
version: 1.0.0
oxfmt:
specifier: ^0.43.0
version: 0.43.0
postcss-parser-tests:
specifier: ^8.9.0
version: 8.9.0
@@ -349,6 +355,14 @@ packages:
svelte-eslint-parser:
optional: true
'@logux/[email protected]':
resolution: {integrity: sha512-tfToAscfwBA4QOcHDpqs3XItj9GLZ0+ABLXIlxNK08U1jjV0xi9LbAMfteLU2d0ym4djbhYCPsMyHdADrrl/IQ==}
engines: {node: '>=22.0.0'}
peerDependencies:
oxlint: ^1.57.0
oxlint-tsgolint: ^0.18.1
typescript: ^6.0.2
'@logux/[email protected]':
resolution: {integrity: sha512-a7KRD30U252cfIekBGktEIRuwFRT7vOPZXkEsD05DwApsPi70iRnFaHEgMde8tZu+jJUuTDN/xMgabtjzHzXaQ==}
engines: {node: ^20.0.0 || >=22.0.0}
@@ -368,6 +382,280 @@ packages:
resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
engines: {node: '>= 8'}
'@oxfmt/[email protected]':
resolution: {integrity: sha512-CgU2s+/9hHZgo0IxVxrbMPrMj+tJ6VM3mD7Mr/4oiz4FNTISLoCvRmB5nk4wAAle045RtRjd86m673jwPyb1OQ==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm]
os: [android]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-T9OfRwjA/EdYxAqbvR7TtqLv5nIrwPXuCtTwOHtS7aR9uXyn74ZYgzgTo6/ZwvTq9DY4W+DsV09hB2EXgn9EbA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [android]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-o3i49ZUSJWANzXMAAVY1wnqb65hn4JVzwlRQ5qfcwhRzIA8lGVaud31Q3by5ALHPrksp5QEaKCQF9aAS3TXpZA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [darwin]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-vWECzzCFkb0kK6jaHjbtC5sC3adiNWtqawFCxhpvsWlzVeKmv5bNvkB4nux+o4JKWTpHCM57NDK/MeXt44txmA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [darwin]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-rgz8JpkKiI/umOf7fl9gwKyQasC8bs5SYHy6g7e4SunfLBY3+8ATcD5caIg8KLGEtKFm5ujKaH8EfjcmnhzTLg==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [freebsd]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-nWYnF3vIFzT4OM1qL/HSf1Yuj96aBuKWSaObXHSWliwAk2rcj7AWd6Lf7jowEBQMo4wCZVnueIGw/7C4u0KTBQ==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm]
os: [linux]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-sFg+NWJbLfupYTF4WELHAPSnLPOn1jiDZ33Z1jfDnTaA+cC3iB35x0FMMZTFdFOz3icRIArncwCcemJFGXu6TQ==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm]
os: [linux]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-MelWqv68tX6wZEILDrTc9yewiGXe7im62+5x0bNXlCYFOZdA+VnYiJfAihbROsZ5fm90p9C3haFrqjj43XnlAA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-ROaWfYh+6BSJ1Arwy5ujijTlwnZetxDxzBpDc1oBR4d7rfrPBqzeyjd5WOudowzQUgyavl2wEpzn1hw3jWcqLA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [linux]
libc: [musl]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-PJRs/uNxmFipJJ8+SyKHh7Y7VZIKQicqrrBzvfyM5CtKi8D7yZKTwUOZV3ffxmiC2e7l1SDJpkBEOyue5NAFsg==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [ppc64]
os: [linux]
libc: [glibc]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-j6biGAgzIhj+EtHXlbNumvwG7XqOIdiU4KgIWRXAEj/iUbHKukKW8eXa4MIwpQwW1YkxovduKtzEAPnjlnAhVQ==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [riscv64]
os: [linux]
libc: [glibc]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-RYWxAcslKxvy7yri24Xm9cmD0RiANaiEPs007EFG6l9h1ChM69Q5SOzACaCoz4Z9dEplnhhneeBaTWMEdpgIbA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [riscv64]
os: [linux]
libc: [musl]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-DT6Q8zfQQy3jxpezAsBACEHNUUixKSYTwdXeXojNHe4DQOoxjPdjr3Szu6BRNjxLykZM/xMNmp9ElOIyDppwtw==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [s390x]
os: [linux]
libc: [glibc]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-R8Yk7iYcuZORXmCfFZClqbDxRZgZ9/HEidUuBNdoX8Ptx07cMePnMVJ/woB84lFIDjh2ROHVaOP40Ds3rBXFqg==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [linux]
libc: [glibc]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-F2YYqyvnQNvi320RWZNAvsaWEHwmW3k4OwNJ1hZxRKXupY63expbBaNp6jAgvYs7y/g546vuQnGHQuCBhslhLQ==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [linux]
libc: [musl]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-OE6TdietLXV3F6c7pNIhx/9YC1/2YFwjU9DPc/fbjxIX19hNIaP1rS0cFjCGJlGX+cVJwIKWe8Mos+LdQ1yAJw==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [openharmony]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-0nWK6a7pGkbdoypfVicmV9k/N1FwjPZENoqhlTU+5HhZnAhpIO3za30nEE33u6l6tuy9OVfpdXUqxUgZ+4lbZw==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [win32]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-9aokTR4Ft+tRdvgN/pKzSkVy2ksc4/dCpDm9L/xFrbIw0yhLtASLbvoG/5WOTUh/BRPPnfGTsWznEqv0dlOmhA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [ia32]
os: [win32]
'@oxfmt/[email protected]':
resolution: {integrity: sha512-4bPgdQux2ZLWn3bf2TTXXMHcJB4lenmuxrLqygPmvCJ104Yqzj1UctxSRzR31TiJ4MLaG22RK8dUsVpJtrCz5g==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [win32]
'@oxlint-tsgolint/[email protected]':
resolution: {integrity: sha512-CxSd15ZwHn70UJFTXVvy76bZ9zwI097cVyjvUFmYRJwvkQF3VnrTf2oe1gomUacErksvtqLgn9OKvZhLMYwvog==}
cpu: [arm64]
os: [darwin]
'@oxlint-tsgolint/[email protected]':
resolution: {integrity: sha512-LE7VW/T/VcKhl3Z1ev5BusrxdlQ3DWweSeOB+qpBeur2h8+vCWq+M7tCO29C7lveBDfx1+rNwj4aiUVlA+Qs+g==}
cpu: [x64]
os: [darwin]
'@oxlint-tsgolint/[email protected]':
resolution: {integrity: sha512-2AG8YIXVJJbnM0rcsJmzzWOjZXBu5REwowgUpbHZueF7OYM3wR7Xu8pXEpAojEHAtYYZ3X4rpPoetomkJx7kCw==}
cpu: [arm64]
os: [linux]
'@oxlint-tsgolint/[email protected]':
resolution: {integrity: sha512-f8vDYPEdiwpA2JaDEkadTXfuqIgweQ8zcL4SX75EN2kkW2oAynjN7cd8m86uXDgB0JrcyOywbRtwnXdiIzXn2A==}
cpu: [x64]
os: [linux]
'@oxlint-tsgolint/[email protected]':
resolution: {integrity: sha512-fBdML05KMDAL9ebWeoHIzkyI86Eq6r9YH5UDRuXJ9vAIo1EnKo0ti7hLUxNdc2dy2FF/T4k98p5wkkXvLyXqfA==}
cpu: [arm64]
os: [win32]
'@oxlint-tsgolint/[email protected]':
resolution: {integrity: sha512-cYZMhNrsq9ZZ3OUWHyawqiS+c8HfieYG0zuZP2LbEuWWPfdZM/22iAlo608J+27G1s9RXQhvgX6VekwWbXbD7A==}
cpu: [x64]
os: [win32]
'@oxlint/[email protected]':
resolution: {integrity: sha512-1T7UN3SsWWxpWyWGn1cT3ASNJOo+pI3eUkmEl7HgtowapcV8kslYpFQcYn431VuxghXakPNlbjRwhqmR37PFOg==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm]
os: [android]
'@oxlint/[email protected]':
resolution: {integrity: sha512-GryzujxuiRv2YFF7bRy8mKcxlbuAN+euVUtGJt9KKbLT8JBUIosamVhcthLh+VEr6KE6cjeVMAQxKAzJcoN7dg==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [android]
'@oxlint/[email protected]':
resolution: {integrity: sha512-7/bRSJIwl4GxeZL9rPZ11anNTyUO9epZrfEJH/ZMla3+/gbQ6xZixh9nOhsZ0QwsTW7/5J2A/fHbD1udC5DQQA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [darwin]
'@oxlint/[email protected]':
resolution: {integrity: sha512-EqdtJSiHweS2vfILNrpyJ6HUwpEq2g7+4Zx1FPi4hu3Hu7tC3znF6ufbXO8Ub2LD4mGgznjI7kSdku9NDD1Mkg==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [darwin]
'@oxlint/[email protected]':
resolution: {integrity: sha512-VQt5TH4M42mY20F545G637RKxV/yjwVtKk2vfXuazfReSIiuvWBnv+FVSvIV5fKVTJNjt3GSJibh6JecbhGdBw==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [freebsd]
'@oxlint/[email protected]':
resolution: {integrity: sha512-fBYcj4ucwpAtjJT3oeBdFBYKvNyjRSK+cyuvBOTQjh0jvKp4yeA4S/D0IsCHus/VPaNG5L48qQkh+Vjy3HL2/Q==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm]
os: [linux]
'@oxlint/[email protected]':
resolution: {integrity: sha512-0BeuFfwlUHlJ1xpEdSD1YO3vByEFGPg36uLjK1JgFaxFb4W6w17F8ET8sz5cheZ4+x5f2xzdnRrrWv83E3Yd8g==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm]
os: [linux]
'@oxlint/[email protected]':
resolution: {integrity: sha512-TXlZgnPTlxrQzxG9ZXU7BNwx1Ilrr17P3GwZY0If2EzrinqRH3zXPc3HrRcBJgcsoZNMuNL5YivtkJYgp467UQ==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@oxlint/[email protected]':
resolution: {integrity: sha512-zSoYRo5dxHLcUx93Stl2hW3hSNjPt99O70eRVWt5A1zwJ+FPjeCCANCD2a9R4JbHsdcl11TIQOjyigcRVOH2mw==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [linux]
libc: [musl]
'@oxlint/[email protected]':
resolution: {integrity: sha512-NQ0U/lqxH2/VxBYeAIvMNUK1y0a1bJ3ZicqkF2c6wfakbEciP9jvIE4yNzCFpZaqeIeRYaV7AVGqEO1yrfVPjA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [ppc64]
os: [linux]
libc: [glibc]
'@oxlint/[email protected]':
resolution: {integrity: sha512-X9J+kr3gIC9FT8GuZt0ekzpNUtkBVzMVU4KiKDSlocyQuEgi3gBbXYN8UkQiV77FTusLDPsovjo95YedHr+3yg==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [riscv64]
os: [linux]
libc: [glibc]
'@oxlint/[email protected]':
resolution: {integrity: sha512-CDze3pi1OO3Wvb/QsXjmLEY4XPKGM6kIo82ssNOgmcl1IdndF9VSGAE38YLhADWmOac7fjqhBw82LozuUVxD0Q==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [riscv64]
os: [linux]
libc: [musl]
'@oxlint/[email protected]':
resolution: {integrity: sha512-b/89glbxFaEAcA6Uf1FvCNecBJEgcUTsV1quzrqXM/o4R1M4u+2KCVuyGCayN2UpsRWtGGLb+Ver0tBBpxaPog==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [s390x]
os: [linux]
libc: [glibc]
'@oxlint/[email protected]':
resolution: {integrity: sha512-0/yYpkq9VJFCEcuRlrViGj8pJUFFvNS4EkEREaN7CB1EcLXJIaVSSa5eCihwBGXtOZxhnblWgxks9juRdNQI7w==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [linux]
libc: [glibc]
'@oxlint/[email protected]':
resolution: {integrity: sha512-hr6FNvmcAXiH+JxSvaJ4SJ1HofkdqEElXICW9sm3/Rd5eC3t7kzvmLyRAB3NngKO2wzXRCAm4Z/mGWfrsS4X8w==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [linux]
libc: [musl]
'@oxlint/[email protected]':
resolution: {integrity: sha512-R+O368VXgRql1K6Xar+FEo7NEwfo13EibPMoTv3sesYQedRXd6m30Dh/7lZMxnrQVFfeo4EOfYIP4FpcgWQNHg==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [openharmony]
'@oxlint/[email protected]':
resolution: {integrity: sha512-Q0FZiAY/3c4YRj4z3h9K1PgaByrifrfbBoODSeX7gy97UtB7pySPUQfC2B/GbxWU6k7CzQrRy5gME10PltLAFQ==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [win32]
'@oxlint/[email protected]':
resolution: {integrity: sha512-Y8FKBABrSPp9H0QkRLHDHOSUgM/309a3IvOVgPcVxYcX70wxJrk608CuTg7w+C6vEd724X5wJoNkBcGYfH7nNQ==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [ia32]
os: [win32]
'@oxlint/[email protected]':
resolution: {integrity: sha512-bCn5rbiz5My+Bj7M09sDcnqW0QJyINRVxdZ65x1/Y2tGrMwherwK/lpk+HRQCKvXa8pcaQdF5KY5j54VGZLwNg==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [win32]
'@package-json/[email protected]':
resolution: {integrity: sha512-uu43FGU34B5VM9mCNjXCwLaGHYjXdNincqKLaraaCW+7S2+SmiBg1Nv8bPnmschrIfZmfKNY9f3fC376MRrObw==}
@@ -1175,6 +1463,25 @@ packages:
resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
engines: {node: '>= 0.8.0'}
[email protected]:
resolution: {integrity: sha512-KTYNG5ISfHSdmeZ25Xzb3qgz9EmQvkaGAxgBY/p38+ZiAet3uZeu7FnMwcSQJg152Qwl0wnYAxDc+Z/H6cvrwA==}
engines: {node: ^20.19.0 || >=22.12.0}
hasBin: true
[email protected]:
resolution: {integrity: sha512-Hgb0wMfuXBYL0ddY+1hAG8IIfC40ADwPnBuUaC6ENAuCtTF4dHwsy7mCYtQ2e7LoGvfoSJRY0+kqQRiembJ/jQ==}
hasBin: true
[email protected]:
resolution: {integrity: sha512-t4s9leczDMqlvOSjnbCQe7gtoLkWgBGZ7sBdCJ9EOj5IXFSG/X7OAzK4yuH4iW+4cAYe8kLFbC8tuYMwWZm+Cg==}
engines: {node: ^20.19.0 || >=22.12.0}
hasBin: true
peerDependencies:
oxlint-tsgolint: '>=0.18.0'
peerDependenciesMeta:
oxlint-tsgolint:
optional: true
[email protected]:
resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
engines: {node: '>=10'}
@@ -1337,6 +1644,10 @@ packages:
resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
engines: {node: '>=12.0.0'}
[email protected]:
resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
engines: {node: ^20.0.0 || >=22.0.0}
[email protected]:
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
engines: {node: '>=8.0'}
@@ -1669,6 +1980,13 @@ snapshots:
- supports-color
- typescript
'@logux/[email protected]([email protected])([email protected]([email protected]))([email protected])':
dependencies:
eslint-plugin-prefer-let: 4.2.2
oxlint: 1.58.0([email protected])
oxlint-tsgolint: 0.18.1
typescript: 5.9.3
'@logux/[email protected]':
dependencies:
'@logux/actions': 0.5.0(@logux/[email protected])
@@ -1703,6 +2021,138 @@ snapshots:
'@nodelib/fs.scandir': 2.1.5
fastq: 1.20.1
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxfmt/[email protected]':
optional: true
'@oxlint-tsgolint/[email protected]':
optional: true
'@oxlint-tsgolint/[email protected]':
optional: true
'@oxlint-tsgolint/[email protected]':
optional: true
'@oxlint-tsgolint/[email protected]':
optional: true
'@oxlint-tsgolint/[email protected]':
optional: true
'@oxlint-tsgolint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@oxlint/[email protected]':
optional: true
'@package-json/[email protected]': {}
'@profoundlogic/[email protected]':
@@ -2494,6 +2944,62 @@ snapshots:
type-check: 0.4.0
word-wrap: 1.2.5
[email protected]:
dependencies:
tinypool: 2.1.0
optionalDependencies:
'@oxfmt/binding-android-arm-eabi': 0.43.0
'@oxfmt/binding-android-arm64': 0.43.0
'@oxfmt/binding-darwin-arm64': 0.43.0
'@oxfmt/binding-darwin-x64': 0.43.0
'@oxfmt/binding-freebsd-x64': 0.43.0
'@oxfmt/binding-linux-arm-gnueabihf': 0.43.0
'@oxfmt/binding-linux-arm-musleabihf': 0.43.0
'@oxfmt/binding-linux-arm64-gnu': 0.43.0
'@oxfmt/binding-linux-arm64-musl': 0.43.0
'@oxfmt/binding-linux-ppc64-gnu': 0.43.0
'@oxfmt/binding-linux-riscv64-gnu': 0.43.0
'@oxfmt/binding-linux-riscv64-musl': 0.43.0
'@oxfmt/binding-linux-s390x-gnu': 0.43.0
'@oxfmt/binding-linux-x64-gnu': 0.43.0
'@oxfmt/binding-linux-x64-musl': 0.43.0
'@oxfmt/binding-openharmony-arm64': 0.43.0
'@oxfmt/binding-win32-arm64-msvc': 0.43.0
'@oxfmt/binding-win32-ia32-msvc': 0.43.0
'@oxfmt/binding-win32-x64-msvc': 0.43.0
[email protected]:
optionalDependencies:
'@oxlint-tsgolint/darwin-arm64': 0.18.1
'@oxlint-tsgolint/darwin-x64': 0.18.1
'@oxlint-tsgolint/linux-arm64': 0.18.1
'@oxlint-tsgolint/linux-x64': 0.18.1
'@oxlint-tsgolint/win32-arm64': 0.18.1
'@oxlint-tsgolint/win32-x64': 0.18.1
[email protected]([email protected]):
optionalDependencies:
'@oxlint/binding-android-arm-eabi': 1.58.0
'@oxlint/binding-android-arm64': 1.58.0
'@oxlint/binding-darwin-arm64': 1.58.0
'@oxlint/binding-darwin-x64': 1.58.0
'@oxlint/binding-freebsd-x64': 1.58.0
'@oxlint/binding-linux-arm-gnueabihf': 1.58.0
'@oxlint/binding-linux-arm-musleabihf': 1.58.0
'@oxlint/binding-linux-arm64-gnu': 1.58.0
'@oxlint/binding-linux-arm64-musl': 1.58.0
'@oxlint/binding-linux-ppc64-gnu': 1.58.0
'@oxlint/binding-linux-riscv64-gnu': 1.58.0
'@oxlint/binding-linux-riscv64-musl': 1.58.0
'@oxlint/binding-linux-s390x-gnu': 1.58.0
'@oxlint/binding-linux-x64-gnu': 1.58.0
'@oxlint/binding-linux-x64-musl': 1.58.0
'@oxlint/binding-openharmony-arm64': 1.58.0
'@oxlint/binding-win32-arm64-msvc': 1.58.0
'@oxlint/binding-win32-ia32-msvc': 1.58.0
'@oxlint/binding-win32-x64-msvc': 1.58.0
oxlint-tsgolint: 0.18.1
[email protected]:
dependencies:
yocto-queue: 0.1.0
@@ -2621,6 +3127,8 @@ snapshots:
fdir: 6.5.0([email protected])
picomatch: 4.0.4
[email protected]: {}
[email protected]:
dependencies:
is-number: 7.0.0
test/at-rule.test.ts
+2 -2
View File
@@ -49,9 +49,9 @@ test('clone spaces from another at-rule', () => {
})
test('at-rule without body has no nodes property', () => {
let root = parse('@layer a, b, c;');
let root = parse('@layer a, b, c;')
let layer = root.first as AtRule
type(layer.nodes, 'undefined')
});
})
test.run()
test/node.test.ts
+33 -15
View File
@@ -748,18 +748,18 @@ test('rangeBy() returns range for word even after AST mutations when offsets are
if (two.source?.end) delete two.source.end.offset
equal(a.rangeBy({ word: 'two' }), {
end: { column: 5, line: 3, offset: 17, },
end: { column: 5, line: 3, offset: 17 },
start: { column: 2, line: 3, offset: 14 }
})
equal(two.rangeBy({ word: 'two' }), {
end: { column: 5, line: 3, offset: 17, },
end: { column: 5, line: 3, offset: 17 },
start: { column: 2, line: 3, offset: 14 }
})
one.remove()
equal(a.rangeBy({ word: 'two' }), {
end: { column: 5, line: 3, offset: 17, },
end: { column: 5, line: 3, offset: 17 },
start: { column: 2, line: 3, offset: 14 }
})
equal(two.rangeBy({ word: 'two' }), {
@@ -772,10 +772,13 @@ test('rangeBy() returns range for start and end', () => {
let css = parse('a { one: X }')
let a = css.first as Rule
let one = a.first as Declaration
equal(one.rangeBy({ end: { column: 9, line: 1 }, start: { column: 7, line: 1 } }), {
equal(
one.rangeBy({ end: { column: 9, line: 1 }, start: { column: 7, line: 1 } }),
{
end: { column: 9, line: 1, offset: 8 },
start: { column: 7, line: 1, offset: 6 }
})
}
)
})
test('rangeBy() returns range for start and end when offsets are missing', () => {
@@ -788,10 +791,13 @@ test('rangeBy() returns range for start and end when offsets are missing', () =>
// @ts-expect-error Testing non-standard AST
if (one.source?.end) delete one.source.end.offset
equal(one.rangeBy({ end: { column: 9, line: 1 }, start: { column: 7, line: 1 } }), {
equal(
one.rangeBy({ end: { column: 9, line: 1 }, start: { column: 7, line: 1 } }),
{
end: { column: 9, line: 1, offset: 8 },
start: { column: 7, line: 1, offset: 6 }
})
}
)
})
test('rangeBy() returns range for start and end after AST mutations', () => {
@@ -800,25 +806,37 @@ test('rangeBy() returns range for start and end after AST mutations', () => {
let one = a.first as Declaration
let two = one.next() as Declaration
equal(a.rangeBy({ end: { column: 5, line: 3 }, start: { column: 3, line: 3 } }), {
equal(
a.rangeBy({ end: { column: 5, line: 3 }, start: { column: 3, line: 3 } }),
{
end: { column: 5, line: 3, offset: 17 },
start: { column: 3, line: 3, offset: 15 }
})
equal(two.rangeBy({ end: { column: 5, line: 3 }, start: { column: 3, line: 3 } }), {
}
)
equal(
two.rangeBy({ end: { column: 5, line: 3 }, start: { column: 3, line: 3 } }),
{
end: { column: 5, line: 3, offset: 17 },
start: { column: 3, line: 3, offset: 15 }
})
}
)
one.remove()
equal(a.rangeBy({ end: { column: 5, line: 3 }, start: { column: 3, line: 3 } }), {
equal(
a.rangeBy({ end: { column: 5, line: 3 }, start: { column: 3, line: 3 } }),
{
end: { column: 5, line: 3, offset: 17 },
start: { column: 3, line: 3, offset: 15 }
})
equal(two.rangeBy({ end: { column: 5, line: 3 }, start: { column: 3, line: 3 } }), {
}
)
equal(
two.rangeBy({ end: { column: 5, line: 3 }, start: { column: 3, line: 3 } }),
{
end: { column: 5, line: 3, offset: 17 },
start: { column: 3, line: 3, offset: 15 }
})
}
)
})
test('rangeBy() returns range for index and endIndex', () => {