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
+23 -26
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,55 +13,53 @@ 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.
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.
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].
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.
Make sure your pull request description contains a link to the plugin
you want to add.
[`docs/plugins`]: https://github.com/postcss/postcss/blob/main/docs/plugins.md
[guidelines]: https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md
[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.
Be sure that your changes match TypeScript styling rules defined in typings file.
- We use classes for existing JS classes like `Stringifier`.
- Namespaces used for separating functions related to the same subject.
- Interfaces used for defining custom types.
Make sure you read through declaration file writing [best practices]
by the TypeScript team.
Make sure you read through declaration file writing [best practices]
by the TypeScript team.
[best practices]: https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html
## Core Development
If you want to add new features or fix existing issues
- **Become familiar with PostCSS architecture**
For a gentle intro to PostCSS architecture look through our [guide].
For a gentle intro to PostCSS architecture look through our [guide].
[guide]: https://github.com/postcss/postcss/blob/main/docs/architecture.md
CHANGELOG.md
+801 -529
View File
File diff suppressed because it is too large Load Diff
README.md
+142 -178
View File
@@ -14,16 +14,15 @@ 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
[Autoprefixer]: https://github.com/postcss/autoprefixer
[Stylelint]: https://stylelint.io/
[plugins]: https://github.com/postcss/postcss#plugins
[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
@@ -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,88 +51,83 @@ 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
[`postcss-preset-env`]: https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
[`react-css-modules`]: https://github.com/gajus/react-css-modules
[`postcss-autoreset`]: https://github.com/maximkoretskiy/postcss-autoreset
[`postcss-write-svg`]: https://github.com/csstools/postcss-write-svg
[`postcss-utilities`]: https://github.com/ismamz/postcss-utilities
[`postcss-initial`]: https://github.com/maximkoretskiy/postcss-initial
[`postcss-sprites`]: https://github.com/2createStudio/postcss-sprites
[`postcss-modules`]: https://github.com/outpunk/postcss-modules
[`postcss-sorting`]: https://github.com/hudochenkov/postcss-sorting
[`font-magician`]: https://github.com/csstools/postcss-font-magician
[`autoprefixer`]: https://github.com/postcss/autoprefixer
[`cq-prolyfill`]: https://github.com/ausi/cq-prolyfill
[`postcss-url`]: https://github.com/postcss/postcss-url
[`postcss-use`]: https://github.com/postcss/postcss-use
[`css-modules`]: https://github.com/css-modules/css-modules
[`webp-in-css`]: https://github.com/ai/webp-in-css
[`avif-in-css`]: https://github.com/nucliweb/avif-in-css
[`colorguard`]: https://github.com/SlexAxton/css-colorguard
[`stylelint`]: https://github.com/stylelint/stylelint
[`stylefmt`]: https://github.com/morishitter/stylefmt
[`cssnano`]: https://cssnano.github.io/cssnano/
[`postcss-nested`]: https://github.com/postcss/postcss-nested
[`doiuse`]: https://github.com/anandthakker/doiuse
[`rtlcss`]: https://github.com/MohammadYounes/rtlcss
[`short`]: https://github.com/csstools/postcss-short
[`lost`]: https://github.com/peterramsing/lost
[PostCSS plugin development]: https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
[`postcss-inline-svg`]: https://github.com/TrySound/postcss-inline-svg
[`postcss-preset-env`]: https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
[`react-css-modules`]: https://github.com/gajus/react-css-modules
[`postcss-autoreset`]: https://github.com/maximkoretskiy/postcss-autoreset
[`postcss-write-svg`]: https://github.com/csstools/postcss-write-svg
[`postcss-utilities`]: https://github.com/ismamz/postcss-utilities
[`postcss-initial`]: https://github.com/maximkoretskiy/postcss-initial
[`postcss-sprites`]: https://github.com/2createStudio/postcss-sprites
[`postcss-modules`]: https://github.com/outpunk/postcss-modules
[`postcss-sorting`]: https://github.com/hudochenkov/postcss-sorting
[`font-magician`]: https://github.com/csstools/postcss-font-magician
[`autoprefixer`]: https://github.com/postcss/autoprefixer
[`cq-prolyfill`]: https://github.com/ausi/cq-prolyfill
[`postcss-url`]: https://github.com/postcss/postcss-url
[`postcss-use`]: https://github.com/postcss/postcss-use
[`css-modules`]: https://github.com/css-modules/css-modules
[`webp-in-css`]: https://github.com/ai/webp-in-css
[`avif-in-css`]: https://github.com/nucliweb/avif-in-css
[`colorguard`]: https://github.com/SlexAxton/css-colorguard
[`stylelint`]: https://github.com/stylelint/stylelint
[`stylefmt`]: https://github.com/morishitter/stylefmt
[`cssnano`]: https://cssnano.github.io/cssnano/
[`postcss-nested`]: https://github.com/postcss/postcss-nested
[`doiuse`]: https://github.com/anandthakker/doiuse
[`rtlcss`]: https://github.com/MohammadYounes/rtlcss
[`short`]: https://github.com/csstools/postcss-short
[`lost`]: https://github.com/peterramsing/lost
## Syntaxes
@@ -142,56 +135,53 @@ 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
[`postcss-safe-parser`]: https://github.com/postcss/postcss-safe-parser
[`postcss-syntax`]: https://github.com/gucong3000/postcss-syntax
[`postcss-html`]: https://github.com/ota-meshi/postcss-html
[`postcss-markdown`]: https://github.com/ota-meshi/postcss-markdown
[`postcss-jsx`]: https://github.com/gucong3000/postcss-jsx
[`postcss-styled`]: https://github.com/gucong3000/postcss-styled
[`postcss-scss`]: https://github.com/postcss/postcss-scss
[`postcss-sass`]: https://github.com/AleshaOleg/postcss-sass
[`postcss-less`]: https://github.com/webschik/postcss-less
[`postcss-js`]: https://github.com/postcss/postcss-js
[`sugarss`]: https://github.com/postcss/sugarss
[`midas`]: https://github.com/ben-eb/midas
[`postcss-less-engine`]: https://github.com/Crunch/postcss-less
[`postcss-safe-parser`]: https://github.com/postcss/postcss-safe-parser
[`postcss-syntax`]: https://github.com/gucong3000/postcss-syntax
[`postcss-html`]: https://github.com/ota-meshi/postcss-html
[`postcss-markdown`]: https://github.com/ota-meshi/postcss-markdown
[`postcss-jsx`]: https://github.com/gucong3000/postcss-jsx
[`postcss-styled`]: https://github.com/gucong3000/postcss-styled
[`postcss-scss`]: https://github.com/postcss/postcss-scss
[`postcss-sass`]: https://github.com/AleshaOleg/postcss-sass
[`postcss-less`]: https://github.com/webschik/postcss-less
[`postcss-js`]: https://github.com/postcss/postcss-js
[`sugarss`]: https://github.com/postcss/sugarss
[`midas`]: https://github.com/ben-eb/midas
## Articles
* [Some things you may think about PostCSS… and you might be wrong](https://www.julian.io/articles/postcss.html)
* [What PostCSS Really Is; What It Really Does](https://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/)
* [PostCSS Guides](https://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889)
- [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,27 +292,26 @@ module.exports = config
[`postcss-loader`]: https://github.com/postcss/postcss-loader
### Gulp
Use [`gulp-postcss`] and [`gulp-sourcemaps`].
```js
gulp.task('css', () => {
const postcss = require('gulp-postcss')
const 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
[`gulp-postcss`]: https://github.com/postcss/gulp-postcss
### 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
@@ -358,33 +334,31 @@ To apply PostCSS plugins to React Inline Styles, JSS, Radium
and other [CSS-in-JS], you can use [`postcss-js`] and transforms style objects.
```js
const postcss = require('postcss-js')
const prefixer = postcss.sync([ require('autoprefixer') ])
const postcss = require('postcss-js')
const prefixer = postcss.sync([require('autoprefixer')])
prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
```
[`postcss-js`]: https://github.com/postcss/postcss-js
[Browserify]: https://browserify.org/
[CSS-in-JS]: https://github.com/MicheleBertoli/css-in-js
[webpack]: https://webpack.github.io/
[Browserify]: https://browserify.org/
[CSS-in-JS]: https://github.com/MicheleBertoli/css-in-js
[webpack]: https://webpack.github.io/
### Runners
* **Grunt**: [`@lodder/grunt-postcss`](https://github.com/C-Lodder/grunt-postcss)
* **HTML**: [`posthtml-postcss`](https://github.com/posthtml/posthtml-postcss)
* **Stylus**: [`poststylus`](https://github.com/seaneking/poststylus)
* **Rollup**: [`rollup-plugin-postcss`](https://github.com/egoist/rollup-plugin-postcss)
* **Brunch**: [`postcss-brunch`](https://github.com/brunch/postcss-brunch)
* **Broccoli**: [`broccoli-postcss`](https://github.com/jeffjewiss/broccoli-postcss)
* **Meteor**: [`postcss`](https://atmospherejs.com/juliancwirko/postcss)
* **ENB**: [`enb-postcss`](https://github.com/awinogradov/enb-postcss)
* **Taskr**: [`taskr-postcss`](https://github.com/lukeed/taskr/tree/master/packages/postcss)
* **Start**: [`start-postcss`](https://github.com/start-runner/postcss)
* **Connect/Express**: [`postcss-middleware`](https://github.com/jedmao/postcss-middleware)
* **Svelte Preprocessor**: [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/preprocessing.md#postcss-sugarss)
- **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,27 +389,25 @@ 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
[Midas]: https://github.com/ben-eb/midas
[SCSS]: https://github.com/postcss/postcss-scss
### Treat Warnings as Errors
@@ -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
+129 -137
View File
@@ -19,9 +19,9 @@ PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的
PostCSS 插件），请联系 [Evil Martians](https://evilmartians.com/?utm_source=postcss)
邮箱 <surrender@evilmartians.com>。
[抽象语法树]: https://zh.wikipedia.org/wiki/%E6%8A%BD%E8%B1%A1%E8%AA%9E%E6%B3%95%E6%A8%B9
[抽象语法树]: https://zh.wikipedia.org/wiki/%E6%8A%BD%E8%B1%A1%E8%AA%9E%E6%B3%95%E6%A8%B9
[Autoprefixer]: https://github.com/postcss/autoprefixer
[插件]: https://github.com/postcss/postcss/blob/main/README-cn.md#%E6%8F%92%E4%BB%B6
[插件]: https://github.com/postcss/postcss/blob/main/README-cn.md#%E6%8F%92%E4%BB%B6
<a href="https://evilmartians.com/?utm_source=postcss">
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
@@ -39,116 +39,116 @@ 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
[`react-css-modules`]: https://github.com/gajus/react-css-modules
[`postcss-autoreset`]: https://github.com/maximkoretskiy/postcss-autoreset
[`postcss-write-svg`]: https://github.com/jonathantneal/postcss-write-svg
[`postcss-utilities`]: https://github.com/ismamz/postcss-utilities
[`postcss-initial`]: https://github.com/maximkoretskiy/postcss-initial
[`postcss-sprites`]: https://github.com/2createStudio/postcss-sprites
[`postcss-modules`]: https://github.com/outpunk/postcss-modules
[`postcss-sorting`]: https://github.com/hudochenkov/postcss-sorting
[`postcss-assets`]: https://github.com/assetsjs/postcss-assets
[开发 PostCSS 插件]: https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
[`font-magician`]: https://github.com/jonathantneal/postcss-font-magician
[`autoprefixer`]: https://github.com/postcss/autoprefixer
[`cq-prolyfill`]: https://github.com/ausi/cq-prolyfill
[`postcss-rtl`]: https://github.com/vkalinichev/postcss-rtl
[`postcss-use`]: https://github.com/postcss/postcss-use
[`css-modules`]: https://github.com/css-modules/css-modules
[`colorguard`]: https://github.com/SlexAxton/css-colorguard
[`stylelint`]: https://github.com/stylelint/stylelint
[`stylefmt`]: https://github.com/morishitter/stylefmt
[`cssnano`]: https://cssnano.github.io/cssnano/
[`doiuse`]: https://github.com/anandthakker/doiuse
[`rtlcss`]: https://github.com/MohammadYounes/rtlcss
[`short`]: https://github.com/jonathantneal/postcss-short
[`lost`]: https://github.com/peterramsing/lost
[`postcss-inline-svg`]: https://github.com/TrySound/postcss-inline-svg
[`postcss-preset-env`]: https://github.com/jonathantneal/postcss-preset-env
[`react-css-modules`]: https://github.com/gajus/react-css-modules
[`postcss-autoreset`]: https://github.com/maximkoretskiy/postcss-autoreset
[`postcss-write-svg`]: https://github.com/jonathantneal/postcss-write-svg
[`postcss-utilities`]: https://github.com/ismamz/postcss-utilities
[`postcss-initial`]: https://github.com/maximkoretskiy/postcss-initial
[`postcss-sprites`]: https://github.com/2createStudio/postcss-sprites
[`postcss-modules`]: https://github.com/outpunk/postcss-modules
[`postcss-sorting`]: https://github.com/hudochenkov/postcss-sorting
[`postcss-assets`]: https://github.com/assetsjs/postcss-assets
[开发 PostCSS 插件]: https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md
[`font-magician`]: https://github.com/jonathantneal/postcss-font-magician
[`autoprefixer`]: https://github.com/postcss/autoprefixer
[`cq-prolyfill`]: https://github.com/ausi/cq-prolyfill
[`postcss-rtl`]: https://github.com/vkalinichev/postcss-rtl
[`postcss-use`]: https://github.com/postcss/postcss-use
[`css-modules`]: https://github.com/css-modules/css-modules
[`colorguard`]: https://github.com/SlexAxton/css-colorguard
[`stylelint`]: https://github.com/stylelint/stylelint
[`stylefmt`]: https://github.com/morishitter/stylefmt
[`cssnano`]: https://cssnano.github.io/cssnano/
[`doiuse`]: https://github.com/anandthakker/doiuse
[`rtlcss`]: https://github.com/MohammadYounes/rtlcss
[`short`]: https://github.com/jonathantneal/postcss-short
[`lost`]: https://github.com/peterramsing/lost
## 语法
PostCSS 可以转化样式到任意语法，不仅仅是 CSS。
如果还没有支持你最喜欢的语法，你可以编写一个解释器以及（或者）一个 stringifier 来拓展 PostCSS。
* [`sugarss`] 是一个以缩进为基础的语法，类似于 Sass 和 Stylus。
* [`postcss-syntax`] 通过文件扩展名自动切换语法。
* [`postcss-html`] 解析类 HTML 文件里`<style>`标签中的样式。
* [`postcss-markdown`] 解析 Markdown 文件里代码块中的样式。
* [`postcss-jsx`] 解析源文件里模板或对象字面量中的CSS。
* [`postcss-styled`] 解析源文件里模板字面量中的CSS。
* [`postcss-scss`] 允许你使用 SCSS *(但并没有将 SCSS 编译到 CSS)*。
* [`postcss-sass`] 允许你使用 Sass *(但并没有将 Sass 编译到 CSS)*。
* [`postcss-less`] 允许你使用 Less *(但并没有将 LESS 编译到 CSS)*。
* [`postcss-less-engine`] 允许你使用 Less *(并且使用真正的 Less.js 把 LESS 编译到 CSS)*。
* [`postcss-js`] 允许你在 JS 里编写样式，或者转换成 React 的内联样式／Radium／JSS。
* [`postcss-safe-parser`] 查找并修复 CSS 语法错误。
* [`midas`] 将 CSS 字符串转化成高亮的 HTML。
- [`sugarss`] 是一个以缩进为基础的语法，类似于 Sass 和 Stylus。
- [`postcss-syntax`] 通过文件扩展名自动切换语法。
- [`postcss-html`] 解析类 HTML 文件里`<style>`标签中的样式。
- [`postcss-markdown`] 解析 Markdown 文件里代码块中的样式。
- [`postcss-jsx`] 解析源文件里模板或对象字面量中的CSS。
- [`postcss-styled`] 解析源文件里模板字面量中的CSS。
- [`postcss-scss`] 允许你使用 SCSS _(但并没有将 SCSS 编译到 CSS)_。
- [`postcss-sass`] 允许你使用 Sass _(但并没有将 Sass 编译到 CSS)_。
- [`postcss-less`] 允许你使用 Less _(但并没有将 LESS 编译到 CSS)_。
- [`postcss-less-engine`] 允许你使用 Less _(并且使用真正的 Less.js 把 LESS 编译到 CSS)_。
- [`postcss-js`] 允许你在 JS 里编写样式，或者转换成 React 的内联样式／Radium／JSS。
- [`postcss-safe-parser`] 查找并修复 CSS 语法错误。
- [`midas`] 将 CSS 字符串转化成高亮的 HTML。
[`postcss-less-engine`]: https://github.com/Crunch/postcss-less
[`postcss-safe-parser`]: https://github.com/postcss/postcss-safe-parser
[`postcss-syntax`]: https://github.com/gucong3000/postcss-syntax
[`postcss-html`]: https://github.com/gucong3000/postcss-html
[`postcss-markdown`]: https://github.com/gucong3000/postcss-markdown
[`postcss-jsx`]: https://github.com/gucong3000/postcss-jsx
[`postcss-styled`]: https://github.com/gucong3000/postcss-styled
[`postcss-scss`]: https://github.com/postcss/postcss-scss
[`postcss-sass`]: https://github.com/AleshaOleg/postcss-sass
[`postcss-less`]: https://github.com/webschik/postcss-less
[`postcss-js`]: https://github.com/postcss/postcss-js
[`sugarss`]: https://github.com/postcss/sugarss
[`midas`]: https://github.com/ben-eb/midas
[`postcss-syntax`]: https://github.com/gucong3000/postcss-syntax
[`postcss-html`]: https://github.com/gucong3000/postcss-html
[`postcss-markdown`]: https://github.com/gucong3000/postcss-markdown
[`postcss-jsx`]: https://github.com/gucong3000/postcss-jsx
[`postcss-styled`]: https://github.com/gucong3000/postcss-styled
[`postcss-scss`]: https://github.com/postcss/postcss-scss
[`postcss-sass`]: https://github.com/AleshaOleg/postcss-sass
[`postcss-less`]: https://github.com/webschik/postcss-less
[`postcss-js`]: https://github.com/postcss/postcss-js
[`sugarss`]: https://github.com/postcss/sugarss
[`midas`]: https://github.com/ben-eb/midas
## 文章
* [一些你对 PostCSS 可能产生的误解](http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong)
* [PostCSS 究竟是什么，是做什么的](http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss)
* [PostCSS 指南](http://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889)
- [一些你对 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')]
}
```
@@ -258,19 +249,20 @@ module.exports = {
```js
gulp.task('css', () => {
const postcss = require('gulp-postcss')
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/'))
})
```
[`gulp-sourcemaps`]: https://github.com/floridoo/gulp-sourcemaps
[`gulp-postcss`]: https://github.com/postcss/gulp-postcss
[`gulp-postcss`]: https://github.com/postcss/gulp-postcss
### npm run / CLI
@@ -285,36 +277,36 @@ postcss --use autoprefixer -c options.json -o main.css css/*.css
### 浏览器
如果你想编译浏览器里的 CSS 字符串（例如像 CodePen 一样的在线编辑器），
只需使用 [Browserify] 或 [webpack]。它们会把 PostCSS 和插件文件打包进一个独立文件。
只需使用 [Browserify] 或 [webpack]。它们会把 PostCSS 和插件文件打包进一个独立文件。
如果想要在 React 内联样式／JSS／Radium／其它 [CSS-in-JS] 里使用 PostCSS，
你可以用 [`postcss-js`] 然后转换样式对象。
```js
var postcss = require('postcss-js')
var prefixer = postcss.sync([ require('autoprefixer') ])
var postcss = require('postcss-js')
var prefixer = postcss.sync([require('autoprefixer')])
prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
```
[`postcss-js`]: https://github.com/postcss/postcss-js
[Browserify]: http://browserify.org/
[CSS-in-JS]: https://github.com/MicheleBertoli/css-in-js
[webpack]: https://webpack.github.io/
[Browserify]: http://browserify.org/
[CSS-in-JS]: https://github.com/MicheleBertoli/css-in-js
[webpack]: https://webpack.github.io/
### 运行器
* **Grunt**: [`grunt-postcss`](https://github.com/nDmitry/grunt-postcss)
* **HTML**: [`posthtml-postcss`](https://github.com/posthtml/posthtml-postcss)
* **Stylus**: [`poststylus`](https://github.com/seaneking/poststylus)
* **Rollup**: [`rollup-plugin-postcss`](https://github.com/egoist/rollup-plugin-postcss)
* **Brunch**: [`postcss-brunch`](https://github.com/brunch/postcss-brunch)
* **Broccoli**: [`broccoli-postcss`](https://github.com/jeffjewiss/broccoli-postcss)
* **Meteor**: [`postcss`](https://atmospherejs.com/juliancwirko/postcss)
* **ENB**: [`enb-postcss`](https://github.com/awinogradov/enb-postcss)
* **Taskr**: [`taskr-postcss`](https://github.com/lukeed/taskr/tree/master/packages/postcss)
* **Start**: [`start-postcss`](https://github.com/start-runner/postcss)
* **Connect/Express**: [`postcss-middleware`](https://github.com/jedmao/postcss-middleware)
- **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)
})
})
```
@@ -341,46 +333,46 @@ fs.readFile('src/app.css', (err, css) => {
所有的 PostCSS 运行器应当通过 [PostCSS 运行器指南]。
[PostCSS 运行器指南]: https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md
[PostCSS API 文档]: https://postcss.org/api/
[PostCSS API 文档]: https://postcss.org/api/
### 配置选项
绝大多数 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
[SCSS]: https://github.com/postcss/postcss-scss
[Midas]: https://github.com/ben-eb/midas
[SCSS]: https://github.com/postcss/postcss-scss
### 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
[`language-postcss`]: https://atom.io/packages/language-postcss
[`source-preview-postcss`]: https://atom.io/packages/source-preview-postcss
[`language-postcss`]: https://atom.io/packages/language-postcss
### Vim
* [`postcss.vim`] 添加了 PostCSS 代码高亮。
- [`postcss.vim`] 添加了 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
+71 -74
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,19 +18,18 @@ 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.
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.
It allows you to define custom CSS like syntax that could be understandable and transformed by plugins. That being said PostCSS is not strictly about CSS spec but about syntax definition manner of CSS. In such a way you can define custom syntax constructs like at-rule, that could be very helpful for tools build around PostCSS. PostCSS plays the role of a framework for building outstanding tools for CSS manipulations.
- *is a big player in CSS ecosystem*
A Large amount of lovely tools like `Autoprefixer`, `Stylelint`, `CSSnano` were built on PostCSS ecosystem. There is a big chance that you already use it implicitly, just check your `node_modules` :smiley:
- _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
@@ -40,19 +39,19 @@ 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.
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.
The main reasons to separate tokenization from parsing steps are performance and abstracting complexity.
This is the way of how we do it in PostCSS and also the most popular one.
A lot of parsers like [`@babel/parser` (parser behind Babel)](https://github.com/babel/babel/tree/master/packages/babel-parser), [`CSSTree`](https://github.com/csstree/csstree) were written in such way.
The main reasons to separate tokenization from parsing steps are performance and abstracting complexity.
Let's think about why the second way is better for our needs.
@@ -64,91 +63,89 @@ 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.
Tokenizer (aka Lexer) plays important role in syntax analysis.
It accepts CSS string and returns a list of tokens.
It accepts CSS string and returns a list of tokens.
Token is a simple structure that describes some part of syntax like `at-rule`, `comment` or `word`. It can also contain positional information for more descriptive errors.
Token is a simple structure that describes some part of syntax like `at-rule`, `comment` or `word`. It can also contain positional information for more descriptive errors.
For example, if we consider following CSS
For example, if we consider following CSS
```css
.className { color: #FFF; }
```
```css
.className {
color: #fff;
}
```
corresponding tokens from PostCSS will be
```js
[
["word", ".className", 1, 1, 1, 10]
["space", " "]
["{", "{", 1, 12]
["space", " "]
["word", "color", 1, 14, 1, 18]
[":", ":", 1, 19]
["space", " "]
["word", "#FFF" , 1, 21, 1, 23]
[";", ";", 1, 24]
["space", " "]
["}", "}", 1, 26]
]
```
corresponding tokens from PostCSS will be
As you can see from the example above a single token represented as a list and also `space` token doesn't have positional information.
```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)]
]
```
Let's look more closely on single token like `word`. As it was said each token represented as a list and follow such pattern.
As you can see from the example above a single token represented as a list and also `space` token doesn't have positional information.
```js
const token = [
// represents token type
'word',
Let's look more closely on single token like `word`. As it was said each token represented as a list and follow such pattern.
// represents matched word
'.className',
```js
const token = [
// represents token type
'word',
// This two numbers represent start position of token.
// It is optional value as we saw in the example above,
// tokens like `space` don't have such information.
// represents matched word
'.className',
// Here the first number is line number and the second one is corresponding column.
1, 1,
// This two numbers represent start position of token.
// It is optional value as we saw in the example above,
// tokens like `space` don't have such information.
// Next two numbers also optional and represent end position for multichar tokens like this one. Numbers follow same rule as was described above
1, 10
]
```
There are many patterns how tokenization could be done, PostCSS motto is performance and simplicity. Tokenization is a complex computing operation and takes a large amount of syntax analysis time ( ~90% ), that why PostCSS' Tokenizer looks dirty but it was optimized for speed. Any high-level constructs like classes could dramatically slow down tokenizer.
// Here the first number is line number and the second one is corresponding column.
1,
1,
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.
// Next two numbers also optional and represent end position for multichar tokens like this one. Numbers follow same rule as was described above
1,
10
]
```
There are many patterns how tokenization could be done, PostCSS motto is performance and simplicity. Tokenization is a complex computing operation and takes a large amount of syntax analysis time ( ~90% ), that why PostCSS' Tokenizer looks dirty but it was optimized for speed. Any high-level constructs like classes could dramatically slow down tokenizer.
PostCSS' Tokenizer uses some sort of streaming/chaining API where you expose [`nextToken()`](https://github.com/postcss/postcss/blob/main/lib/tokenize.js#L48-L308) method to Parser. In this manner, we provide a clean interface for Parser and reduce memory usage by storing only a few tokens and not the whole list of tokens.
- #### Parser [`lib/parse.js`](https://github.com/postcss/postcss/blob/main/lib/parse.js), [`lib/parser.js`](https://github.com/postcss/postcss/blob/main/lib/parser.js)
Parser is the main structure responsible for [syntax analysis](https://en.wikipedia.org/wiki/Parsing) of incoming CSS. Parser produces a structure called [Abstract Syntax Tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree) that could then be transformed by plugins later on.
Parser is the main structure responsible for [syntax analysis](https://en.wikipedia.org/wiki/Parsing) of incoming CSS. Parser produces a structure called [Abstract Syntax Tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree) that could then be transformed by plugins later on.
Parser works in common with Tokenizer and operates over tokens, not source string, as it would be a very inefficient operation.
Parser works in common with Tokenizer and operates over tokens, not source string, as it would be a very inefficient operation.
It uses mostly `nextToken` and `back` methods provided by Tokenizer for obtaining single or multiple tokens and then construct part of AST called `Node`.
It uses mostly `nextToken` and `back` methods provided by Tokenizer for obtaining single or multiple tokens and then construct part of AST called `Node`.
There are multiple Node types that PostCSS could produce but all of them inherit from base Node [class](https://github.com/postcss/postcss/blob/main/lib/node.js#L34).
There are multiple Node types that PostCSS could produce but all of them inherit from base Node [class](https://github.com/postcss/postcss/blob/main/lib/node.js#L34).
- #### Processor [`lib/processor.js`](https://github.com/postcss/postcss/blob/main/lib/processor.js)
Processor is a very plain structure that initializes plugins and runs syntax transformations
Processor is a very plain structure that initializes plugins and runs syntax transformations
It exposes only a few public API methods. Description of them could be found on [API](https://postcss.org/api/#processor)
It exposes only a few public API methods. Description of them could be found on [API](https://postcss.org/api/#processor)
- #### Stringifier [`lib/stringify.js`](https://github.com/postcss/postcss/blob/main/lib/stringify.js), [`lib/stringifier.js`](https://github.com/postcss/postcss/blob/main/lib/stringifier.js)
Stringifier is a base class that translates modified AST to pure CSS string. Stringifier traverses AST starting from provided Node and generates a raw string representation of it calling corresponding methods.
The most essential method is [`Stringifier.stringify`](https://github.com/postcss/postcss/blob/main/lib/stringifier.js#L25-L27)
that accepts initial Node and semicolon indicator.
You can learn more by checking [stringifier.js](https://github.com/postcss/postcss/blob/main/lib/stringifier.js)
Stringifier is a base class that translates modified AST to pure CSS string. Stringifier traverses AST starting from provided Node and generates a raw string representation of it calling corresponding methods.
The most essential method is [`Stringifier.stringify`](https://github.com/postcss/postcss/blob/main/lib/stringifier.js#L25-L27)
that accepts initial Node and semicolon indicator.
You can learn more by checking [stringifier.js](https://github.com/postcss/postcss/blob/main/lib/stringifier.js)
### API Reference
docs/guidelines/plugin.md
+29 -44
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
@@ -50,8 +50,7 @@ without the user necessarily knowing that it is powered by
PostCSS — for example, [RTLCSS] and [Autoprefixer].
[Autoprefixer]: https://github.com/postcss/autoprefixer
[RTLCSS]: https://rtlcss.com/
[RTLCSS]: https://rtlcss.com/
### 1.2. Do one thing, and do it well
@@ -63,8 +62,7 @@ one for each W3C specification. And [`cssnano`] contains a separate plugin
for each of its optimization.
[`postcss-preset-env`]: https://preset-env.cssdb.org/
[`cssnano`]: https://github.com/cssnano/cssnano
[`cssnano`]: https://github.com/cssnano/cssnano
### 1.3. Do not use 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
@@ -325,9 +311,8 @@ Visit [Keep A Changelog] for more information about how to write one of these.
Of course, you should be using [SemVer].
[Keep A Changelog]: https://keepachangelog.com/
[GitHub Releases]: https://help.github.com/articles/creating-releases/
[SemVer]: https://semver.org/
[GitHub Releases]: https://help.github.com/articles/creating-releases/
[SemVer]: https://semver.org/
### 5.4. Include `postcss-plugin` keyword in `package.json`
docs/guidelines/runner.md
+22 -33
View File
@@ -11,27 +11,27 @@ See also [ClojureWerkz’s recommendations] for open source projects.
[ClojureWerkz’s recommendations]: http://blog.clojurewerkz.org/blog/2013/04/20/how-to-make-your-open-source-project-really-awesome/
[`gulp-autoprefixer`]: https://github.com/sindresorhus/gulp-autoprefixer
[`gulp‑postcss`]: https://github.com/w0rm/gulp-postcss
[`postcss-cli`]: https://github.com/postcss/postcss-cli
[`gulp‑postcss`]: https://github.com/w0rm/gulp-postcss
[`postcss-cli`]: https://github.com/postcss/postcss-cli
**Table of Contents**
* [API](#1-api)
* [1.1. Accept functions in plugin parameters](#11-accept-functions-in-plugin-parameters)
* [Processing](#21-set-from-and-to-processing-options)
* [2.1. Set `from` and `to` processing options](#21-set-from-and-to-processing-options)
* [2.2. Use only the asynchronous API](#22-use-only-the-asynchronous-api)
* [2.3. Use only the public PostCSS API](#23-use-only-the-public-postcss-api)
* [3.1. Rebuild when dependencies change](#31-rebuild-when-dependencies-change)
* [Output](#4-output)
* [4.1. Don’t show JS stack for `CssSyntaxError`](#41-dont-show-js-stack-for-csssyntaxerror)
* [4.2. Display `result.warnings()`](#42-display-resultwarnings)
* [4.3. Allow the user to write source maps to different files](#43-allow-the-user-to-write-source-maps-to-different-files)
* [Documentation](#5-output)
* [5.1. Document your runner in English](#51-document-your-runner-in-english)
* [5.2. Maintain a changelog](#52-maintain-a-changelog)
* [5.3. `postcss-runner` keyword in `package.json`](#53-postcss-runner-keyword-in-packagejson)
* [5.4. Keep postcss to peerDependencies](#54-keep-postcss-to-peerdependencies)
- [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()`:
@@ -148,8 +142,7 @@ result.warnings().forEach(warn => {
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
[postcss-messages]: https://github.com/postcss/postcss-messages
### 4.3. Allow the user to write source maps to different files
@@ -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,
@@ -184,9 +175,8 @@ Visit [Keep A Changelog] for more information on how to write one of these.
Of course, you should use [SemVer].
[Keep A Changelog]: https://keepachangelog.com/
[GitHub Releases]: https://help.github.com/articles/creating-releases/
[SemVer]: https://semver.org/
[GitHub Releases]: https://help.github.com/articles/creating-releases/
[SemVer]: https://semver.org/
### 5.3. `postcss-runner` keyword in `package.json`
@@ -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
+735 -747
View File
File diff suppressed because it is too large Load Diff
docs/syntax.md
+28 -39
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
@@ -39,14 +39,13 @@ functions:
```js
module.exports = {
parse: require('./parse'),
parse: require('./parse'),
stringify: require('./stringify')
}
```
[SCSS]: https://github.com/postcss/postcss-scss
## Parser
A good example of a parser is [Safe Parser], which parses malformed/broken CSS.
@@ -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
@@ -71,9 +70,8 @@ For open source parser npm package must have `postcss` in `peerDependencies`,
not in direct `dependencies`.
[Safe Parser]: https://github.com/postcss/postcss-safe-parser
[`Root`]: https://postcss.org/api/#root
[`Document`]: https://postcss.org/api/#document
[`Root`]: https://postcss.org/api/#root
[`Document`]: https://postcss.org/api/#document
### Main Theory
@@ -84,14 +82,13 @@ parser.
The default PostCSS parser contains two steps:
1. [Tokenizer] which reads input string character by character and builds a
tokens array. For example, it joins space symbols to a `['space', '\n ']`
token, and detects strings to a `['string', '"\"{"']` token.
tokens array. For example, it joins space symbols to a `['space', '\n ']`
token, and detects strings to a `['string', '"\"{"']` token.
2. [Parser] which reads the tokens array, creates node instances and
builds a tree.
builds a tree.
[Tokenizer]: https://github.com/postcss/postcss/blob/main/lib/tokenize.js
[Parser]: https://github.com/postcss/postcss/blob/main/lib/parser.js
[Parser]: https://github.com/postcss/postcss/blob/main/lib/parser.js
### Performance
@@ -135,9 +132,8 @@ The parser can be a well written class. There is no need in copy-paste and
hardcore optimization there. You can extend the default [PostCSS parser].
[PostCSS benchmarks]: https://github.com/postcss/benchmark
[PostCSS tokenizer]: https://github.com/postcss/postcss/blob/main/lib/tokenize.js
[PostCSS parser]: https://github.com/postcss/postcss/blob/main/lib/parser.js
[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
@@ -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
@@ -211,8 +203,7 @@ In most cases it will be enough just to extend this class,
like in [SCSS stringifier].
[default stringifier]: https://github.com/postcss/postcss/blob/main/lib/stringifier.js
[SCSS stringifier]: https://github.com/postcss/postcss-scss/blob/main/lib/scss-stringifier.js
[SCSS stringifier]: https://github.com/postcss/postcss-scss/blob/main/lib/scss-stringifier.js
### Builder Function
@@ -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
+12 -12
View File
@@ -44,19 +44,19 @@ declare namespace Rule {
/** Information used to generate byte-to-byte equal node string as it was in the origin input. */
raws?: RuleRaws
} & (
| {
/** Selector or selectors of the rule. */
selector: string
selectors?: never
}
| {
selector?: never
/** Selectors of the rule represented as an array of strings. */
selectors: readonly string[]
}
) & ContainerProps
| {
/** Selector or selectors of the rule. */
selector: string
selectors?: never
}
| {
selector?: never
/** Selectors of the rule represented as an array of strings. */
selectors: readonly string[]
}
) &
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
+45 -27
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 } }), {
end: { column: 9, line: 1, offset: 8 },
start: { column: 7, line: 1, offset: 6 }
})
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 } }), {
end: { column: 9, line: 1, offset: 8 },
start: { column: 7, line: 1, offset: 6 }
})
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 } }), {
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 } }), {
end: { column: 5, line: 3, offset: 17 },
start: { column: 3, line: 3, offset: 15 }
})
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 } }),
{
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 } }), {
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 } }), {
end: { column: 5, line: 3, offset: 17 },
start: { column: 3, line: 3, offset: 15 }
})
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 } }),
{
end: { column: 5, line: 3, offset: 17 },
start: { column: 3, line: 3, offset: 15 }
}
)
})
test('rangeBy() returns range for index and endIndex', () => {