From a1fe846ba64d6235b27ff0b557f7bdf6265a1a6c Mon Sep 17 00:00:00 2001 From: Romain Menke <11521496+romainmenke@users.noreply.github.com> Date: Wed, 2 Mar 2022 07:23:02 +0100 Subject: [PATCH] readme templating (#280) * readme templating * cleanup * fix * fix * more readme * more readme * fix --- .editorconfig | 2 +- .github/bin/fail-on-changes.sh | 11 ++ .github/bin/generate-docs/install-template.md | 104 ++++++++--------- .github/bin/generate-docs/readme.mjs | 89 +++++++++++++++ .github/bin/install-and-test-all-packages.sh | 2 + .github/bin/new-plugin.mjs | 1 + package.json | 4 +- plugins/css-blank-pseudo/INSTALL.md | 104 ++++++++--------- plugins/css-has-pseudo/INSTALL.md | 104 ++++++++--------- plugins/css-prefers-color-scheme/INSTALL.md | 104 ++++++++--------- plugins/postcss-base-plugin/.tape.mjs | 10 +- plugins/postcss-base-plugin/INSTALL.md | 104 ++++++++--------- plugins/postcss-base-plugin/README.md | 96 +++++++++++++++- plugins/postcss-base-plugin/docs/README.md | 51 +++++++++ plugins/postcss-base-plugin/package.json | 6 +- plugins/postcss-base-plugin/src/cli.ts | 3 +- plugins/postcss-base-plugin/src/index.ts | 41 ++++++- .../test/{ => examples}/example.css | 0 .../test/{ => examples}/example.expect.css | 0 .../examples/example.preserve-true.expect.css | 8 ++ plugins/postcss-color-function/.tape.mjs | 16 +++ plugins/postcss-color-function/INSTALL.md | 104 ++++++++--------- plugins/postcss-color-function/README.md | 52 +++++++-- plugins/postcss-color-function/docs/README.md | 107 ++++++++++++++++++ plugins/postcss-color-function/package.json | 6 +- .../test/examples/example.css | 7 ++ .../test/examples/example.expect.css | 7 ++ .../examples/example.preserve-true.expect.css | 14 +++ ...preserve-true.progressive-false.expect.css | 9 ++ plugins/postcss-color-function/tsconfig.json | 2 +- .../INSTALL.md | 104 ++++++++--------- plugins/postcss-color-hex-alpha/INSTALL.md | 104 ++++++++--------- .../postcss-color-rebeccapurple/INSTALL.md | 104 ++++++++--------- plugins/postcss-custom-properties/INSTALL.md | 104 ++++++++--------- plugins/postcss-dir-pseudo-class/INSTALL.md | 104 ++++++++--------- .../INSTALL.md | 104 ++++++++--------- plugins/postcss-env-function/INSTALL.md | 104 ++++++++--------- plugins/postcss-focus-visible/INSTALL.md | 104 ++++++++--------- plugins/postcss-focus-within/INSTALL.md | 104 ++++++++--------- .../postcss-font-format-keywords/INSTALL.md | 104 ++++++++--------- plugins/postcss-gap-properties/INSTALL.md | 104 ++++++++--------- plugins/postcss-hwb-function/INSTALL.md | 104 ++++++++--------- plugins/postcss-ic-unit/INSTALL.md | 104 ++++++++--------- plugins/postcss-image-set-function/INSTALL.md | 104 ++++++++--------- plugins/postcss-is-pseudo-class/INSTALL.md | 104 ++++++++--------- plugins/postcss-lab-function/INSTALL.md | 104 ++++++++--------- plugins/postcss-logical/INSTALL.md | 104 ++++++++--------- plugins/postcss-nesting/INSTALL.md | 104 ++++++++--------- .../INSTALL.md | 104 ++++++++--------- plugins/postcss-oklab-function/INSTALL.md | 104 ++++++++--------- plugins/postcss-overflow-shorthand/INSTALL.md | 104 ++++++++--------- plugins/postcss-place/INSTALL.md | 104 ++++++++--------- .../INSTALL.md | 104 ++++++++--------- .../postcss-pseudo-class-any-link/INSTALL.md | 104 ++++++++--------- plugins/postcss-unset-value/INSTALL.md | 104 ++++++++--------- 55 files changed, 2129 insertions(+), 1639 deletions(-) create mode 100644 .github/bin/fail-on-changes.sh create mode 100644 .github/bin/generate-docs/readme.mjs create mode 100644 plugins/postcss-base-plugin/docs/README.md rename plugins/postcss-base-plugin/test/{ => examples}/example.css (100%) rename plugins/postcss-base-plugin/test/{ => examples}/example.expect.css (100%) create mode 100644 plugins/postcss-base-plugin/test/examples/example.preserve-true.expect.css create mode 100644 plugins/postcss-color-function/docs/README.md create mode 100644 plugins/postcss-color-function/test/examples/example.css create mode 100644 plugins/postcss-color-function/test/examples/example.expect.css create mode 100644 plugins/postcss-color-function/test/examples/example.preserve-true.expect.css create mode 100644 plugins/postcss-color-function/test/examples/example.preserve-true.progressive-false.expect.css diff --git a/.editorconfig b/.editorconfig index e06d7982b..5a4011985 100644 --- a/.editorconfig +++ b/.editorconfig @@ -10,6 +10,6 @@ trim_trailing_whitespace = true [*.md] trim_trailing_whitespace = false -[*.{json,md,yml}] +[*.{json,yml}] indent_size = 2 indent_style = space diff --git a/.github/bin/fail-on-changes.sh b/.github/bin/fail-on-changes.sh new file mode 100644 index 000000000..60a892526 --- /dev/null +++ b/.github/bin/fail-on-changes.sh @@ -0,0 +1,11 @@ +#!/usr/bin/env bash + +set -e + +if [ -n "$(git status --porcelain)" ]; then + git status; + + echo "\n!!! Repo is not clean, check changes before continuing. !!!"; +else + echo "Repo is clean"; +fi diff --git a/.github/bin/generate-docs/install-template.md b/.github/bin/generate-docs/install-template.md index 9e1c706ee..922297510 100644 --- a/.github/bin/generate-docs/install-template.md +++ b/.github/bin/generate-docs/install-template.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const = require(''); postcss([ - (/* pluginOptions */) + (/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [] in your `postcss.config.js` configuration file: const = require(''); module.exports = { - plugins: [ - (/* pluginOptions */) - ] + plugins: [ + (/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const = require(''); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - (/* pluginOptions */) - ] + plugins: () => [ + (/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const = require(''); gulp.task('css', function () { - var plugins = [ - (/* pluginOptions */) - ]; + var plugins = [ + (/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const = require(''); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - (/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + (/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/.github/bin/generate-docs/readme.mjs b/.github/bin/generate-docs/readme.mjs new file mode 100644 index 000000000..6d9ccb73d --- /dev/null +++ b/.github/bin/generate-docs/readme.mjs @@ -0,0 +1,89 @@ +import { promises as fsp } from 'fs'; +import path from 'path'; + +const template = await fsp.readFile(path.join('docs', './README.md'), 'utf8'); +const packageJSONInfo = JSON.parse(await fsp.readFile('./package.json', 'utf8')); + +const exampleFilePaths = await fsp.readdir(path.join('test', 'examples')); + +let installDoc = template.toString(); + +// Cleanup docs instructions +installDoc = installDoc.replace(` + + + + + + + + + + + + + +`, ''); + +// Insert "Header" section +installDoc = installDoc.replace('
', `# [PostCSS Logo][postcss] + +[npm version][npm-url] +[CSS Standard Status][css-url] +[Build Status][cli-url] +[Discord][discord]`); + +// Insert "Usage" section +installDoc = installDoc.replace('', `## Usage + +Add [] to your project: + +\`\`\`bash +npm install postcss --save-dev +\`\`\` + +Use it as a [PostCSS] plugin: + +\`\`\`js +const postcss = require('postcss'); +const = require(''); + +postcss([ + (/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +\`\`\``); + +// Insert "Env Support" section +installDoc = installDoc.replace('', `[] runs in all Node environments, with special +instructions for: + +| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | +| --- | --- | --- | --- | --- | --- |`); + +// Insert "Link List" section +installDoc = installDoc.replace('', `[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[css-url]: https://cssdb.org/# +[discord]: https://discord.gg/bUadyRwkJS +[npm-url]: https://www.npmjs.com/package/ + +[Gulp PostCSS]: https://github.com/postcss/gulp-postcss +[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss +[PostCSS]: https://github.com/postcss/postcss +[PostCSS Loader]: https://github.com/postcss/postcss-loader +[]: https://github.com/csstools/postcss-plugins/tree/main/`); + +installDoc = installDoc.replaceAll('', packageJSONInfo.csstools.cssdbId); +installDoc = installDoc.replaceAll('', packageJSONInfo.csstools.exportName); +installDoc = installDoc.replaceAll('', packageJSONInfo.csstools.humanReadableName); +installDoc = installDoc.replaceAll('', packageJSONInfo.name); +installDoc = installDoc.replaceAll('', path.join(path.basename(path.dirname(process.cwd())), path.basename(process.cwd()))); +installDoc = installDoc.replaceAll('', packageJSONInfo.csstools.specUrl); + +for (const exampleFilePath of exampleFilePaths) { + installDoc = installDoc.replaceAll( + `<${exampleFilePath}>`, + (await fsp.readFile(path.join('test', 'examples', exampleFilePath), 'utf8')).toString().slice(0, -1) // trim final newline + ); +} + +await fsp.writeFile('./README.md', installDoc); diff --git a/.github/bin/install-and-test-all-packages.sh b/.github/bin/install-and-test-all-packages.sh index 168815aca..bddcc0cab 100644 --- a/.github/bin/install-and-test-all-packages.sh +++ b/.github/bin/install-and-test-all-packages.sh @@ -1,3 +1,5 @@ +#!/usr/bin/env bash + # REMOVE this file after node 20 is released and update the test.yml workflow set -e diff --git a/.github/bin/new-plugin.mjs b/.github/bin/new-plugin.mjs index 9282bef23..3707f55a6 100644 --- a/.github/bin/new-plugin.mjs +++ b/.github/bin/new-plugin.mjs @@ -101,6 +101,7 @@ console.log('\nDone! 🎉'); console.log('\nYour next steps:'); console.log('- Run : "npm install" from the root directory'); console.log(`- Run : "cd plugins/${pluginSlug}"`); + console.log('- Run : "npm run docs" to generate documentation'); console.log('- Run : "npm run build" to build your plugin'); console.log('- Run : "npm run test" to test your plugin'); console.log('- Run : "npm run test:rewrite-expects" to update test expects'); diff --git a/package.json b/package.json index 2a5dc8ed2..eb9ae5cf0 100644 --- a/package.json +++ b/package.json @@ -31,12 +31,14 @@ "typescript": "^4.5.5" }, "scripts": { - "get-me-going": "npm run clean && npm ci && npm run build && npm run test", "build": "npm run build --workspaces --if-present", "clean": "git clean -dfx", + "get-me-going": "npm run clean && npm ci && npm run build && npm run test", + "docs": "npm run docs --workspaces --if-present", "lint": "npm run lint --workspaces --if-present && npm run lint:rollup-config", "lint:rollup-config": "eslint ./rollup --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", "new-plugin": "node ./.github/bin/new-plugin.mjs", + "prepare-repo-for-releases": "npm run clean && npm ci && npm run docs && npm run lint && npm run build && npm run test && bash ./.github/bin/fail-on-changes.sh", "test": "npm run test --workspaces --if-present" }, "volta": { diff --git a/plugins/css-blank-pseudo/INSTALL.md b/plugins/css-blank-pseudo/INSTALL.md index 46902acf1..c70e413e2 100644 --- a/plugins/css-blank-pseudo/INSTALL.md +++ b/plugins/css-blank-pseudo/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssBlankPseudo = require('css-blank-pseudo'); postcss([ - postcssBlankPseudo(/* pluginOptions */) + postcssBlankPseudo(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [CSS Blank Pseudo] in your `postcss.config.js` configuration file: const postcssBlankPseudo = require('css-blank-pseudo'); module.exports = { - plugins: [ - postcssBlankPseudo(/* pluginOptions */) - ] + plugins: [ + postcssBlankPseudo(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [CSS Blank Pseudo] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "css-blank-pseudo", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "css-blank-pseudo", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssBlankPseudo = require('css-blank-pseudo'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssBlankPseudo(/* pluginOptions */) - ] + plugins: () => [ + postcssBlankPseudo(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssBlankPseudo = require('css-blank-pseudo'); gulp.task('css', function () { - var plugins = [ - postcssBlankPseudo(/* pluginOptions */) - ]; + var plugins = [ + postcssBlankPseudo(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssBlankPseudo = require('css-blank-pseudo'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssBlankPseudo(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssBlankPseudo(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/css-has-pseudo/INSTALL.md b/plugins/css-has-pseudo/INSTALL.md index f5e5a0699..9ad5c6227 100644 --- a/plugins/css-has-pseudo/INSTALL.md +++ b/plugins/css-has-pseudo/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssHasPseudo = require('css-has-pseudo'); postcss([ - postcssHasPseudo(/* pluginOptions */) + postcssHasPseudo(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [CSS Has Pseudo] in your `postcss.config.js` configuration file: const postcssHasPseudo = require('css-has-pseudo'); module.exports = { - plugins: [ - postcssHasPseudo(/* pluginOptions */) - ] + plugins: [ + postcssHasPseudo(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [CSS Has Pseudo] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "css-has-pseudo", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "css-has-pseudo", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssHasPseudo = require('css-has-pseudo'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssHasPseudo(/* pluginOptions */) - ] + plugins: () => [ + postcssHasPseudo(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssHasPseudo = require('css-has-pseudo'); gulp.task('css', function () { - var plugins = [ - postcssHasPseudo(/* pluginOptions */) - ]; + var plugins = [ + postcssHasPseudo(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssHasPseudo = require('css-has-pseudo'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssHasPseudo(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssHasPseudo(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/css-prefers-color-scheme/INSTALL.md b/plugins/css-prefers-color-scheme/INSTALL.md index ea7e8be15..7385c685b 100644 --- a/plugins/css-prefers-color-scheme/INSTALL.md +++ b/plugins/css-prefers-color-scheme/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const prefersColorScheme = require('css-prefers-color-scheme'); postcss([ - prefersColorScheme(/* pluginOptions */) + prefersColorScheme(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [Prefers Color Scheme] in your `postcss.config.js` configuration file: const prefersColorScheme = require('css-prefers-color-scheme'); module.exports = { - plugins: [ - prefersColorScheme(/* pluginOptions */) - ] + plugins: [ + prefersColorScheme(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [Prefers Color Scheme] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "css-prefers-color-scheme", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "css-prefers-color-scheme", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const prefersColorScheme = require('css-prefers-color-scheme'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - prefersColorScheme(/* pluginOptions */) - ] + plugins: () => [ + prefersColorScheme(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const prefersColorScheme = require('css-prefers-color-scheme'); gulp.task('css', function () { - var plugins = [ - prefersColorScheme(/* pluginOptions */) - ]; + var plugins = [ + prefersColorScheme(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const prefersColorScheme = require('css-prefers-color-scheme'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - prefersColorScheme(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + prefersColorScheme(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-base-plugin/.tape.mjs b/plugins/postcss-base-plugin/.tape.mjs index 044270894..a6514757d 100644 --- a/plugins/postcss-base-plugin/.tape.mjs +++ b/plugins/postcss-base-plugin/.tape.mjs @@ -11,7 +11,13 @@ postcssTape(plugin)({ color: 'purple' } }, - example: { - message: "minimal example", + 'examples/example': { + message: 'minimal example', + }, + 'examples/example:preserve-true': { + message: 'minimal example', + options: { + preserve: true + } }, }); diff --git a/plugins/postcss-base-plugin/INSTALL.md b/plugins/postcss-base-plugin/INSTALL.md index fc51f7a1d..c0725182c 100644 --- a/plugins/postcss-base-plugin/INSTALL.md +++ b/plugins/postcss-base-plugin/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssBasePlugin = require('@csstools/postcss-base-plugin'); postcss([ - postcssBasePlugin(/* pluginOptions */) + postcssBasePlugin(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Base Plugin] in your `postcss.config.js` configuration file: const postcssBasePlugin = require('@csstools/postcss-base-plugin'); module.exports = { - plugins: [ - postcssBasePlugin(/* pluginOptions */) - ] + plugins: [ + postcssBasePlugin(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Base Plugin] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "@csstools/postcss-base-plugin", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "@csstools/postcss-base-plugin", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssBasePlugin = require('@csstools/postcss-base-plugin'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssBasePlugin(/* pluginOptions */) - ] + plugins: () => [ + postcssBasePlugin(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssBasePlugin = require('@csstools/postcss-base-plugin'); gulp.task('css', function () { - var plugins = [ - postcssBasePlugin(/* pluginOptions */) - ]; + var plugins = [ + postcssBasePlugin(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssBasePlugin = require('@csstools/postcss-base-plugin'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssBasePlugin(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssBasePlugin(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-base-plugin/README.md b/plugins/postcss-base-plugin/README.md index a631e79c7..1e8c6b7e0 100644 --- a/plugins/postcss-base-plugin/README.md +++ b/plugins/postcss-base-plugin/README.md @@ -1,5 +1,97 @@ # PostCSS Base Plugin [PostCSS Logo][postcss] - +[npm version][npm-url] +[CSS Standard Status][css-url] +[Build Status][cli-url] +[Discord][discord] -[postcss]: https://github.com/postcss/postcss +[PostCSS Base Plugin] lets easily create new plugins following some [CSS Specification]. + +```pcss +.foo { + color: red; +} + +.baz { + color: green; +} + +/* becomes */ + +.foo { + color: blue; +} + +.baz { + color: green; +} +``` + +## Usage + +Add [PostCSS Base Plugin] to your project: + +```bash +npm install postcss @csstools/postcss-base-plugin --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +const postcss = require('postcss'); +const postcssBasePlugin = require('@csstools/postcss-base-plugin'); + +postcss([ + postcssBasePlugin(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +[PostCSS Base Plugin] runs in all Node environments, with special +instructions for: + +| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | +| --- | --- | --- | --- | --- | --- | + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is not preserved. + +```js +postcssBasePlugin({ preserve: true }) +``` + +```pcss +.foo { + color: red; +} + +.baz { + color: green; +} + +/* becomes */ + +.foo { + color: blue; + color: red; +} + +.baz { + color: green; +} +``` + +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[css-url]: https://cssdb.org/#TODO +[discord]: https://discord.gg/bUadyRwkJS +[npm-url]: https://www.npmjs.com/package/@csstools/postcss-base-plugin + +[Gulp PostCSS]: https://github.com/postcss/gulp-postcss +[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss +[PostCSS]: https://github.com/postcss/postcss +[PostCSS Loader]: https://github.com/postcss/postcss-loader +[PostCSS Base Plugin]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-base-plugin +[CSS Specification]: #TODO diff --git a/plugins/postcss-base-plugin/docs/README.md b/plugins/postcss-base-plugin/docs/README.md new file mode 100644 index 000000000..3bc455892 --- /dev/null +++ b/plugins/postcss-base-plugin/docs/README.md @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + +
+ +[] lets easily create new plugins following some [CSS Specification]. + +```pcss + + +/* becomes */ + + +``` + + + + + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is not preserved. + +```js +({ preserve: true }) +``` + +```pcss + + +/* becomes */ + + +``` + + +[CSS Specification]: diff --git a/plugins/postcss-base-plugin/package.json b/plugins/postcss-base-plugin/package.json index bf8007cc1..d1c36448c 100644 --- a/plugins/postcss-base-plugin/package.json +++ b/plugins/postcss-base-plugin/package.json @@ -33,7 +33,7 @@ "scripts": { "build": "rollup -c ../../rollup/default.js", "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", - "docs": "node ../../.github/bin/generate-docs/install.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", "lint": "npm run lint:eslint && npm run lint:package-json", "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", "lint:package-json": "node ../../.github/bin/format-package-json.mjs", @@ -53,8 +53,10 @@ "postcss-plugin" ], "csstools": { + "cssdbId": "TODO", "exportName": "postcssBasePlugin", - "humanReadableName": "PostCSS Base Plugin" + "humanReadableName": "PostCSS Base Plugin", + "specUrl": "#TODO" }, "volta": { "extends": "../../package.json" diff --git a/plugins/postcss-base-plugin/src/cli.ts b/plugins/postcss-base-plugin/src/cli.ts index 81b1c8b44..83e751356 100644 --- a/plugins/postcss-base-plugin/src/cli.ts +++ b/plugins/postcss-base-plugin/src/cli.ts @@ -3,7 +3,7 @@ import { cli, helpTextLogger } from '@csstools/base-cli'; cli( plugin, - ['color', 'another_option'], + ['color', 'another_option', 'preserve'], helpTextLogger( 'postcss-base-plugin-cli', 'Base Plugin', @@ -11,6 +11,7 @@ cli( { color: 'A CSS color', another_option: true, + preserve: true, }, ), ); diff --git a/plugins/postcss-base-plugin/src/index.ts b/plugins/postcss-base-plugin/src/index.ts index ee1f96bc0..a6920b80d 100644 --- a/plugins/postcss-base-plugin/src/index.ts +++ b/plugins/postcss-base-plugin/src/index.ts @@ -1,15 +1,46 @@ import type { PluginCreator } from 'postcss'; -const creator: PluginCreator<{ color: string }> = (opts?: { color: string }) => { +type pluginOptions = { color?: string, preserve?: boolean }; + +const creator: PluginCreator = (opts?: pluginOptions) => { + const options = Object.assign( + // Default options + { + color: null, + preserve: false, + }, + // Provided options + opts, + ); + return { postcssPlugin: 'postcss-base-plugin', Declaration(decl) { if (decl.value === 'red') { - if (opts && opts.color) { - decl.value = opts.color; - } else { - decl.value = 'blue'; + // Determine the new value. + let newValue = 'blue'; + if (options.color) { + newValue = options.color; + } + + // Check if it is different from the current value. + if (newValue === decl.value) { + return; } + + // Insert the new value before the current value. + decl.cloneBefore({ + prop: 'color', + value: newValue, + }); + + // If the current value is preserved we are done and return here. + if (options.preserve) { + return; + } + + // If the current value is not preserved we remove it. + decl.remove(); } }, }; diff --git a/plugins/postcss-base-plugin/test/example.css b/plugins/postcss-base-plugin/test/examples/example.css similarity index 100% rename from plugins/postcss-base-plugin/test/example.css rename to plugins/postcss-base-plugin/test/examples/example.css diff --git a/plugins/postcss-base-plugin/test/example.expect.css b/plugins/postcss-base-plugin/test/examples/example.expect.css similarity index 100% rename from plugins/postcss-base-plugin/test/example.expect.css rename to plugins/postcss-base-plugin/test/examples/example.expect.css diff --git a/plugins/postcss-base-plugin/test/examples/example.preserve-true.expect.css b/plugins/postcss-base-plugin/test/examples/example.preserve-true.expect.css new file mode 100644 index 000000000..8b020470a --- /dev/null +++ b/plugins/postcss-base-plugin/test/examples/example.preserve-true.expect.css @@ -0,0 +1,8 @@ +.foo { + color: blue; + color: red; +} + +.baz { + color: green; +} diff --git a/plugins/postcss-color-function/.tape.mjs b/plugins/postcss-color-function/.tape.mjs index c7d0ded6e..cd8e6cdc5 100644 --- a/plugins/postcss-color-function/.tape.mjs +++ b/plugins/postcss-color-function/.tape.mjs @@ -43,4 +43,20 @@ postcssTape(plugin)({ enableProgressiveCustomProperties: false, } }, + 'examples/example': { + message: 'minimal example', + }, + 'examples/example:preserve-true': { + message: 'minimal example', + options: { + preserve: true + } + }, + 'examples/example:preserve-true:progressive-false': { + message: 'minimal example', + options: { + preserve: true, + enableProgressiveCustomProperties: false, + } + } }); diff --git a/plugins/postcss-color-function/INSTALL.md b/plugins/postcss-color-function/INSTALL.md index 9123e7689..23d5c2325 100644 --- a/plugins/postcss-color-function/INSTALL.md +++ b/plugins/postcss-color-function/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssColorFunction = require('@csstools/postcss-color-function'); postcss([ - postcssColorFunction(/* pluginOptions */) + postcssColorFunction(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Color Function] in your `postcss.config.js` configuration file: const postcssColorFunction = require('@csstools/postcss-color-function'); module.exports = { - plugins: [ - postcssColorFunction(/* pluginOptions */) - ] + plugins: [ + postcssColorFunction(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Color Function] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "@csstools/postcss-color-function", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "@csstools/postcss-color-function", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssColorFunction = require('@csstools/postcss-color-function'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssColorFunction(/* pluginOptions */) - ] + plugins: () => [ + postcssColorFunction(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssColorFunction = require('@csstools/postcss-color-function'); gulp.task('css', function () { - var plugins = [ - postcssColorFunction(/* pluginOptions */) - ]; + var plugins = [ + postcssColorFunction(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssColorFunction = require('@csstools/postcss-color-function'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssColorFunction(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssColorFunction(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-color-function/README.md b/plugins/postcss-color-function/README.md index 0a9641cba..9ca9948a2 100644 --- a/plugins/postcss-color-function/README.md +++ b/plugins/postcss-color-function/README.md @@ -5,19 +5,26 @@ [Build Status][cli-url] [Discord][discord] - [PostCSS Color Function] lets you use the `color` function in CSS, following the [CSS Color] specification. ```pcss .color { - color: color(display-p3 0.64331 0.19245 0.16771); + color: color(display-p3 0.64331 0.19245 0.16771); +} + +:root { + --a-color: color(srgb 0.64331 0.19245 0.16771); } /* becomes */ .color { - color: rgb(179,35,35); + color: rgb(179,35,35); +} + +:root { + --a-color: rgb(164,49,43); } ``` @@ -59,14 +66,28 @@ postcssColorFunction({ preserve: true }) ```pcss .color { - color: color(display-p3 0.64331 0.19245 0.16771); + color: color(display-p3 0.64331 0.19245 0.16771); +} + +:root { + --a-color: color(srgb 0.64331 0.19245 0.16771); } /* becomes */ .color { - color: rgb(179,35,35); - color: color(display-p3 0.64331 0.19245 0.16771); + color: rgb(179,35,35); + color: color(display-p3 0.64331 0.19245 0.16771); +} + +:root { + --a-color: rgb(164,49,43); +} + +@supports (color: color(srgb 0 0 0)) { +:root { + --a-color: color(srgb 0.64331 0.19245 0.16771); +} } ``` @@ -82,18 +103,29 @@ postcssColorFunction({ enableProgressiveCustomProperties: false }) ``` ```pcss +.color { + color: color(display-p3 0.64331 0.19245 0.16771); +} + :root { - --one: color(srgb 0.64331 0.19245 0.16771); + --a-color: color(srgb 0.64331 0.19245 0.16771); } /* becomes */ +.color { + color: rgb(179,35,35); + color: color(display-p3 0.64331 0.19245 0.16771); +} + :root { - --one: rgb(164,49,43); /* will never be used, not even in older browser */ - --one: color(srgb 0.64331 0.19245 0.16771); + --a-color: rgb(164,49,43); + --a-color: color(srgb 0.64331 0.19245 0.16771); } ``` +_Custom properties do not fallback to the previous declaration_ + ## Supported Color Spaces ```css @@ -133,9 +165,9 @@ This software or document includes material copied from or derived from https:// [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-color-function -[CSS Color]: https://www.w3.org/TR/css-color-4/#funcdef-color [Gulp PostCSS]: https://github.com/postcss/gulp-postcss [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss [PostCSS Loader]: https://github.com/postcss/postcss-loader [PostCSS Color Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function +[CSS Color]: https://www.w3.org/TR/css-color-4/#funcdef-color diff --git a/plugins/postcss-color-function/docs/README.md b/plugins/postcss-color-function/docs/README.md new file mode 100644 index 000000000..a9b60cd9e --- /dev/null +++ b/plugins/postcss-color-function/docs/README.md @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + +
+ +[] lets you use the `color` function in +CSS, following the [CSS Color] specification. + +```pcss + + +/* becomes */ + + +``` + + + + + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is not preserved. + +```js +({ preserve: true }) +``` + +```pcss + + +/* becomes */ + + +``` + +### enableProgressiveCustomProperties + +The `enableProgressiveCustomProperties` option determines whether the original notation +is wrapped with `@supports` when used in Custom Properties. By default, it is enabled. + +⚠️ We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme). + +```js +({ enableProgressiveCustomProperties: false }) +``` + +```pcss + + +/* becomes */ + + +``` + +_Custom properties do not fallback to the previous declaration_ + +## Supported Color Spaces + +```css +.color-spaces { + color: color(a98-rgb 0.803 0.484 0.944); + color: color(display-p3 0.8434 0.509 0.934); + color: color(prophoto-rgb 0.759 0.493 0.898); + color: color(rec2020 0.772 0.491 0.920); + color: color(srgb 0.897 0.488 0.959); + color: color(srgb-linear 0.783 0.203 0.910); + color: color(xyz 0.560 0.377 0.904); + color: color(xyz-d50 0.550 0.375 0.680); + color: color(xyz-d65 0.560 0.377 0.904); +} +``` + +## Out of gamut colors + +Depending on the browser implementation out of gamut colors may be clipped, resulting in a different color.
+Fallback values generated by [] are always mapped to a close alternative in sRGB. + +When setting `preserve` to `true` the original values will be used by some browsers and these may be clipped.
+Certain browsers will have an incorrect color if this occurs. + +If the plugin detects out of gamut colors it will emit a warning : + +> "color(srgb-linear -0.01656 0.23079 0.25298)" is out of gamut for "srgb-linear". When "preserve: true" is set this will lead to unexpected results in some browsers. + +To resolve this warning pick a larger color space when declaring the original value. + +## Copyright : color conversions + +This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/tree/main/css-color-4. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang). + + +[CSS Color]: diff --git a/plugins/postcss-color-function/package.json b/plugins/postcss-color-function/package.json index 7f927ce47..30ecf540a 100644 --- a/plugins/postcss-color-function/package.json +++ b/plugins/postcss-color-function/package.json @@ -36,7 +36,7 @@ "scripts": { "build": "rollup -c ../../rollup/default.js", "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", - "docs": "node ../../.github/bin/generate-docs/install.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", "lint": "npm run lint:eslint && npm run lint:package-json", "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", "lint:package-json": "node ../../.github/bin/format-package-json.mjs", @@ -70,8 +70,10 @@ "xyz" ], "csstools": { + "cssdbId": "color-function", "exportName": "postcssColorFunction", - "humanReadableName": "PostCSS Color Function" + "humanReadableName": "PostCSS Color Function", + "specUrl": "https://www.w3.org/TR/css-color-4/#funcdef-color" }, "volta": { "extends": "../../package.json" diff --git a/plugins/postcss-color-function/test/examples/example.css b/plugins/postcss-color-function/test/examples/example.css new file mode 100644 index 000000000..4702c705c --- /dev/null +++ b/plugins/postcss-color-function/test/examples/example.css @@ -0,0 +1,7 @@ +.color { + color: color(display-p3 0.64331 0.19245 0.16771); +} + +:root { + --a-color: color(srgb 0.64331 0.19245 0.16771); +} diff --git a/plugins/postcss-color-function/test/examples/example.expect.css b/plugins/postcss-color-function/test/examples/example.expect.css new file mode 100644 index 000000000..c1d484de1 --- /dev/null +++ b/plugins/postcss-color-function/test/examples/example.expect.css @@ -0,0 +1,7 @@ +.color { + color: rgb(179,35,35); +} + +:root { + --a-color: rgb(164,49,43); +} diff --git a/plugins/postcss-color-function/test/examples/example.preserve-true.expect.css b/plugins/postcss-color-function/test/examples/example.preserve-true.expect.css new file mode 100644 index 000000000..7a8fbad54 --- /dev/null +++ b/plugins/postcss-color-function/test/examples/example.preserve-true.expect.css @@ -0,0 +1,14 @@ +.color { + color: rgb(179,35,35); + color: color(display-p3 0.64331 0.19245 0.16771); +} + +:root { + --a-color: rgb(164,49,43); +} + +@supports (color: color(srgb 0 0 0)) { +:root { + --a-color: color(srgb 0.64331 0.19245 0.16771); +} +} diff --git a/plugins/postcss-color-function/test/examples/example.preserve-true.progressive-false.expect.css b/plugins/postcss-color-function/test/examples/example.preserve-true.progressive-false.expect.css new file mode 100644 index 000000000..d155dd3a7 --- /dev/null +++ b/plugins/postcss-color-function/test/examples/example.preserve-true.progressive-false.expect.css @@ -0,0 +1,9 @@ +.color { + color: rgb(179,35,35); + color: color(display-p3 0.64331 0.19245 0.16771); +} + +:root { + --a-color: rgb(164,49,43); + --a-color: color(srgb 0.64331 0.19245 0.16771); +} diff --git a/plugins/postcss-color-function/tsconfig.json b/plugins/postcss-color-function/tsconfig.json index 68a2606f6..01b4b4618 100644 --- a/plugins/postcss-color-function/tsconfig.json +++ b/plugins/postcss-color-function/tsconfig.json @@ -5,5 +5,5 @@ "declarationDir": "." }, "include": ["./src/**/*"], - "exclude": ["dist"], + "exclude": ["dist"] } diff --git a/plugins/postcss-color-functional-notation/INSTALL.md b/plugins/postcss-color-functional-notation/INSTALL.md index abafd0f3d..199416041 100644 --- a/plugins/postcss-color-functional-notation/INSTALL.md +++ b/plugins/postcss-color-functional-notation/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssColorFunctionalNotation = require('postcss-color-functional-notation'); postcss([ - postcssColorFunctionalNotation(/* pluginOptions */) + postcssColorFunctionalNotation(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Color Functional Notation] in your `postcss.config.js` configuratio const postcssColorFunctionalNotation = require('postcss-color-functional-notation'); module.exports = { - plugins: [ - postcssColorFunctionalNotation(/* pluginOptions */) - ] + plugins: [ + postcssColorFunctionalNotation(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Color Functional Notation] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-color-functional-notation", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-color-functional-notation", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssColorFunctionalNotation = require('postcss-color-functional-notation'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssColorFunctionalNotation(/* pluginOptions */) - ] + plugins: () => [ + postcssColorFunctionalNotation(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssColorFunctionalNotation = require('postcss-color-functional-notation'); gulp.task('css', function () { - var plugins = [ - postcssColorFunctionalNotation(/* pluginOptions */) - ]; + var plugins = [ + postcssColorFunctionalNotation(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssColorFunctionalNotation = require('postcss-color-functional-notatio grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssColorFunctionalNotation(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssColorFunctionalNotation(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-color-hex-alpha/INSTALL.md b/plugins/postcss-color-hex-alpha/INSTALL.md index d8aad46db..78b34de40 100644 --- a/plugins/postcss-color-hex-alpha/INSTALL.md +++ b/plugins/postcss-color-hex-alpha/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssColorHexAlpha = require('postcss-color-hex-alpha'); postcss([ - postcssColorHexAlpha(/* pluginOptions */) + postcssColorHexAlpha(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Color Hex Alpha] in your `postcss.config.js` configuration file: const postcssColorHexAlpha = require('postcss-color-hex-alpha'); module.exports = { - plugins: [ - postcssColorHexAlpha(/* pluginOptions */) - ] + plugins: [ + postcssColorHexAlpha(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Color Hex Alpha] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-color-hex-alpha", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-color-hex-alpha", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssColorHexAlpha = require('postcss-color-hex-alpha'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssColorHexAlpha(/* pluginOptions */) - ] + plugins: () => [ + postcssColorHexAlpha(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssColorHexAlpha = require('postcss-color-hex-alpha'); gulp.task('css', function () { - var plugins = [ - postcssColorHexAlpha(/* pluginOptions */) - ]; + var plugins = [ + postcssColorHexAlpha(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssColorHexAlpha = require('postcss-color-hex-alpha'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssColorHexAlpha(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssColorHexAlpha(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-color-rebeccapurple/INSTALL.md b/plugins/postcss-color-rebeccapurple/INSTALL.md index 67d32a841..8c298cb02 100644 --- a/plugins/postcss-color-rebeccapurple/INSTALL.md +++ b/plugins/postcss-color-rebeccapurple/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssRebeccapurple = require('postcss-color-rebeccapurple'); postcss([ - postcssRebeccapurple(/* pluginOptions */) + postcssRebeccapurple(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS RebeccaPurple] in your `postcss.config.js` configuration file: const postcssRebeccapurple = require('postcss-color-rebeccapurple'); module.exports = { - plugins: [ - postcssRebeccapurple(/* pluginOptions */) - ] + plugins: [ + postcssRebeccapurple(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS RebeccaPurple] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-color-rebeccapurple", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-color-rebeccapurple", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssRebeccapurple = require('postcss-color-rebeccapurple'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssRebeccapurple(/* pluginOptions */) - ] + plugins: () => [ + postcssRebeccapurple(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssRebeccapurple = require('postcss-color-rebeccapurple'); gulp.task('css', function () { - var plugins = [ - postcssRebeccapurple(/* pluginOptions */) - ]; + var plugins = [ + postcssRebeccapurple(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssRebeccapurple = require('postcss-color-rebeccapurple'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssRebeccapurple(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssRebeccapurple(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-custom-properties/INSTALL.md b/plugins/postcss-custom-properties/INSTALL.md index 330b8f9c0..1ae8a1952 100644 --- a/plugins/postcss-custom-properties/INSTALL.md +++ b/plugins/postcss-custom-properties/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssCustomProperties = require('postcss-custom-properties'); postcss([ - postcssCustomProperties(/* pluginOptions */) + postcssCustomProperties(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Custom Properties] in your `postcss.config.js` configuration file: const postcssCustomProperties = require('postcss-custom-properties'); module.exports = { - plugins: [ - postcssCustomProperties(/* pluginOptions */) - ] + plugins: [ + postcssCustomProperties(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Custom Properties] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-custom-properties", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-custom-properties", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssCustomProperties = require('postcss-custom-properties'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssCustomProperties(/* pluginOptions */) - ] + plugins: () => [ + postcssCustomProperties(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssCustomProperties = require('postcss-custom-properties'); gulp.task('css', function () { - var plugins = [ - postcssCustomProperties(/* pluginOptions */) - ]; + var plugins = [ + postcssCustomProperties(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssCustomProperties = require('postcss-custom-properties'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssCustomProperties(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssCustomProperties(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-dir-pseudo-class/INSTALL.md b/plugins/postcss-dir-pseudo-class/INSTALL.md index c02786263..f13ec733d 100644 --- a/plugins/postcss-dir-pseudo-class/INSTALL.md +++ b/plugins/postcss-dir-pseudo-class/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssDirPseudoClass = require('postcss-dir-pseudo-class'); postcss([ - postcssDirPseudoClass(/* pluginOptions */) + postcssDirPseudoClass(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Dir Pseudo Class] in your `postcss.config.js` configuration file: const postcssDirPseudoClass = require('postcss-dir-pseudo-class'); module.exports = { - plugins: [ - postcssDirPseudoClass(/* pluginOptions */) - ] + plugins: [ + postcssDirPseudoClass(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Dir Pseudo Class] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-dir-pseudo-class", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-dir-pseudo-class", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssDirPseudoClass = require('postcss-dir-pseudo-class'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssDirPseudoClass(/* pluginOptions */) - ] + plugins: () => [ + postcssDirPseudoClass(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssDirPseudoClass = require('postcss-dir-pseudo-class'); gulp.task('css', function () { - var plugins = [ - postcssDirPseudoClass(/* pluginOptions */) - ]; + var plugins = [ + postcssDirPseudoClass(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssDirPseudoClass = require('postcss-dir-pseudo-class'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssDirPseudoClass(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssDirPseudoClass(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-double-position-gradients/INSTALL.md b/plugins/postcss-double-position-gradients/INSTALL.md index 665e3dd1a..fd6db64e8 100644 --- a/plugins/postcss-double-position-gradients/INSTALL.md +++ b/plugins/postcss-double-position-gradients/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssDoublePositionGradients = require('postcss-double-position-gradients'); postcss([ - postcssDoublePositionGradients(/* pluginOptions */) + postcssDoublePositionGradients(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Double Position Gradients] in your `postcss.config.js` configuratio const postcssDoublePositionGradients = require('postcss-double-position-gradients'); module.exports = { - plugins: [ - postcssDoublePositionGradients(/* pluginOptions */) - ] + plugins: [ + postcssDoublePositionGradients(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Double Position Gradients] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-double-position-gradients", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-double-position-gradients", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssDoublePositionGradients = require('postcss-double-position-gradients'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssDoublePositionGradients(/* pluginOptions */) - ] + plugins: () => [ + postcssDoublePositionGradients(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssDoublePositionGradients = require('postcss-double-position-gradients'); gulp.task('css', function () { - var plugins = [ - postcssDoublePositionGradients(/* pluginOptions */) - ]; + var plugins = [ + postcssDoublePositionGradients(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssDoublePositionGradients = require('postcss-double-position-gradient grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssDoublePositionGradients(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssDoublePositionGradients(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-env-function/INSTALL.md b/plugins/postcss-env-function/INSTALL.md index d452a3f40..170dbaac4 100644 --- a/plugins/postcss-env-function/INSTALL.md +++ b/plugins/postcss-env-function/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssEnvFunction = require('postcss-env-function'); postcss([ - postcssEnvFunction(/* pluginOptions */) + postcssEnvFunction(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Environment Variables] in your `postcss.config.js` configuration fi const postcssEnvFunction = require('postcss-env-function'); module.exports = { - plugins: [ - postcssEnvFunction(/* pluginOptions */) - ] + plugins: [ + postcssEnvFunction(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Environment Variables] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-env-function", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-env-function", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssEnvFunction = require('postcss-env-function'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssEnvFunction(/* pluginOptions */) - ] + plugins: () => [ + postcssEnvFunction(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssEnvFunction = require('postcss-env-function'); gulp.task('css', function () { - var plugins = [ - postcssEnvFunction(/* pluginOptions */) - ]; + var plugins = [ + postcssEnvFunction(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssEnvFunction = require('postcss-env-function'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssEnvFunction(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssEnvFunction(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-focus-visible/INSTALL.md b/plugins/postcss-focus-visible/INSTALL.md index 25691de23..e300986e5 100644 --- a/plugins/postcss-focus-visible/INSTALL.md +++ b/plugins/postcss-focus-visible/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssFocusVisible = require('postcss-focus-visible'); postcss([ - postcssFocusVisible(/* pluginOptions */) + postcssFocusVisible(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Focus Visible] in your `postcss.config.js` configuration file: const postcssFocusVisible = require('postcss-focus-visible'); module.exports = { - plugins: [ - postcssFocusVisible(/* pluginOptions */) - ] + plugins: [ + postcssFocusVisible(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Focus Visible] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-focus-visible", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-focus-visible", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssFocusVisible = require('postcss-focus-visible'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssFocusVisible(/* pluginOptions */) - ] + plugins: () => [ + postcssFocusVisible(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssFocusVisible = require('postcss-focus-visible'); gulp.task('css', function () { - var plugins = [ - postcssFocusVisible(/* pluginOptions */) - ]; + var plugins = [ + postcssFocusVisible(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssFocusVisible = require('postcss-focus-visible'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssFocusVisible(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssFocusVisible(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-focus-within/INSTALL.md b/plugins/postcss-focus-within/INSTALL.md index e6c4defbc..6b203079a 100644 --- a/plugins/postcss-focus-within/INSTALL.md +++ b/plugins/postcss-focus-within/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssFocusWithin = require('postcss-focus-within'); postcss([ - postcssFocusWithin(/* pluginOptions */) + postcssFocusWithin(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Focus Within] in your `postcss.config.js` configuration file: const postcssFocusWithin = require('postcss-focus-within'); module.exports = { - plugins: [ - postcssFocusWithin(/* pluginOptions */) - ] + plugins: [ + postcssFocusWithin(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Focus Within] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-focus-within", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-focus-within", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssFocusWithin = require('postcss-focus-within'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssFocusWithin(/* pluginOptions */) - ] + plugins: () => [ + postcssFocusWithin(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssFocusWithin = require('postcss-focus-within'); gulp.task('css', function () { - var plugins = [ - postcssFocusWithin(/* pluginOptions */) - ]; + var plugins = [ + postcssFocusWithin(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssFocusWithin = require('postcss-focus-within'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssFocusWithin(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssFocusWithin(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-font-format-keywords/INSTALL.md b/plugins/postcss-font-format-keywords/INSTALL.md index c8e153868..a4f21e18e 100644 --- a/plugins/postcss-font-format-keywords/INSTALL.md +++ b/plugins/postcss-font-format-keywords/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssFontFormatKeywords = require('@csstools/postcss-font-format-keywords'); postcss([ - postcssFontFormatKeywords(/* pluginOptions */) + postcssFontFormatKeywords(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Font Format Keywords] in your `postcss.config.js` configuration fil const postcssFontFormatKeywords = require('@csstools/postcss-font-format-keywords'); module.exports = { - plugins: [ - postcssFontFormatKeywords(/* pluginOptions */) - ] + plugins: [ + postcssFontFormatKeywords(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Font Format Keywords] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "@csstools/postcss-font-format-keywords", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "@csstools/postcss-font-format-keywords", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssFontFormatKeywords = require('@csstools/postcss-font-format-keywords'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssFontFormatKeywords(/* pluginOptions */) - ] + plugins: () => [ + postcssFontFormatKeywords(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssFontFormatKeywords = require('@csstools/postcss-font-format-keywords'); gulp.task('css', function () { - var plugins = [ - postcssFontFormatKeywords(/* pluginOptions */) - ]; + var plugins = [ + postcssFontFormatKeywords(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssFontFormatKeywords = require('@csstools/postcss-font-format-keyword grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssFontFormatKeywords(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssFontFormatKeywords(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-gap-properties/INSTALL.md b/plugins/postcss-gap-properties/INSTALL.md index 04397b260..bbb8548f9 100644 --- a/plugins/postcss-gap-properties/INSTALL.md +++ b/plugins/postcss-gap-properties/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssGapProperties = require('postcss-gap-properties'); postcss([ - postcssGapProperties(/* pluginOptions */) + postcssGapProperties(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Gap Properties] in your `postcss.config.js` configuration file: const postcssGapProperties = require('postcss-gap-properties'); module.exports = { - plugins: [ - postcssGapProperties(/* pluginOptions */) - ] + plugins: [ + postcssGapProperties(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Gap Properties] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-gap-properties", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-gap-properties", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssGapProperties = require('postcss-gap-properties'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssGapProperties(/* pluginOptions */) - ] + plugins: () => [ + postcssGapProperties(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssGapProperties = require('postcss-gap-properties'); gulp.task('css', function () { - var plugins = [ - postcssGapProperties(/* pluginOptions */) - ]; + var plugins = [ + postcssGapProperties(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssGapProperties = require('postcss-gap-properties'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssGapProperties(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssGapProperties(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-hwb-function/INSTALL.md b/plugins/postcss-hwb-function/INSTALL.md index 7616078c9..162914430 100644 --- a/plugins/postcss-hwb-function/INSTALL.md +++ b/plugins/postcss-hwb-function/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssHWBFunction = require('@csstools/postcss-hwb-function'); postcss([ - postcssHWBFunction(/* pluginOptions */) + postcssHWBFunction(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS HWB Function] in your `postcss.config.js` configuration file: const postcssHWBFunction = require('@csstools/postcss-hwb-function'); module.exports = { - plugins: [ - postcssHWBFunction(/* pluginOptions */) - ] + plugins: [ + postcssHWBFunction(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS HWB Function] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "@csstools/postcss-hwb-function", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "@csstools/postcss-hwb-function", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssHWBFunction = require('@csstools/postcss-hwb-function'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssHWBFunction(/* pluginOptions */) - ] + plugins: () => [ + postcssHWBFunction(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssHWBFunction = require('@csstools/postcss-hwb-function'); gulp.task('css', function () { - var plugins = [ - postcssHWBFunction(/* pluginOptions */) - ]; + var plugins = [ + postcssHWBFunction(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssHWBFunction = require('@csstools/postcss-hwb-function'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssHWBFunction(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssHWBFunction(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-ic-unit/INSTALL.md b/plugins/postcss-ic-unit/INSTALL.md index 3261d0ac6..b53de7442 100644 --- a/plugins/postcss-ic-unit/INSTALL.md +++ b/plugins/postcss-ic-unit/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssIcUnit = require('@csstools/postcss-ic-unit'); postcss([ - postcssIcUnit(/* pluginOptions */) + postcssIcUnit(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS IC Unit] in your `postcss.config.js` configuration file: const postcssIcUnit = require('@csstools/postcss-ic-unit'); module.exports = { - plugins: [ - postcssIcUnit(/* pluginOptions */) - ] + plugins: [ + postcssIcUnit(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS IC Unit] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "@csstools/postcss-ic-unit", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "@csstools/postcss-ic-unit", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssIcUnit = require('@csstools/postcss-ic-unit'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssIcUnit(/* pluginOptions */) - ] + plugins: () => [ + postcssIcUnit(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssIcUnit = require('@csstools/postcss-ic-unit'); gulp.task('css', function () { - var plugins = [ - postcssIcUnit(/* pluginOptions */) - ]; + var plugins = [ + postcssIcUnit(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssIcUnit = require('@csstools/postcss-ic-unit'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssIcUnit(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssIcUnit(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-image-set-function/INSTALL.md b/plugins/postcss-image-set-function/INSTALL.md index 9d586f7ca..1ff17f792 100644 --- a/plugins/postcss-image-set-function/INSTALL.md +++ b/plugins/postcss-image-set-function/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssImageSetFunction = require('postcss-image-set-function'); postcss([ - postcssImageSetFunction(/* pluginOptions */) + postcssImageSetFunction(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS image-set() Function] in your `postcss.config.js` configuration fil const postcssImageSetFunction = require('postcss-image-set-function'); module.exports = { - plugins: [ - postcssImageSetFunction(/* pluginOptions */) - ] + plugins: [ + postcssImageSetFunction(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS image-set() Function] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-image-set-function", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-image-set-function", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssImageSetFunction = require('postcss-image-set-function'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssImageSetFunction(/* pluginOptions */) - ] + plugins: () => [ + postcssImageSetFunction(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssImageSetFunction = require('postcss-image-set-function'); gulp.task('css', function () { - var plugins = [ - postcssImageSetFunction(/* pluginOptions */) - ]; + var plugins = [ + postcssImageSetFunction(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssImageSetFunction = require('postcss-image-set-function'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssImageSetFunction(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssImageSetFunction(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-is-pseudo-class/INSTALL.md b/plugins/postcss-is-pseudo-class/INSTALL.md index f7dd048a9..53e51772e 100644 --- a/plugins/postcss-is-pseudo-class/INSTALL.md +++ b/plugins/postcss-is-pseudo-class/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssIsPseudoClass = require('@csstools/postcss-is-pseudo-class'); postcss([ - postcssIsPseudoClass(/* pluginOptions */) + postcssIsPseudoClass(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Is Pseudo] in your `postcss.config.js` configuration file: const postcssIsPseudoClass = require('@csstools/postcss-is-pseudo-class'); module.exports = { - plugins: [ - postcssIsPseudoClass(/* pluginOptions */) - ] + plugins: [ + postcssIsPseudoClass(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Is Pseudo] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "@csstools/postcss-is-pseudo-class", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "@csstools/postcss-is-pseudo-class", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssIsPseudoClass = require('@csstools/postcss-is-pseudo-class'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssIsPseudoClass(/* pluginOptions */) - ] + plugins: () => [ + postcssIsPseudoClass(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssIsPseudoClass = require('@csstools/postcss-is-pseudo-class'); gulp.task('css', function () { - var plugins = [ - postcssIsPseudoClass(/* pluginOptions */) - ]; + var plugins = [ + postcssIsPseudoClass(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssIsPseudoClass = require('@csstools/postcss-is-pseudo-class'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssIsPseudoClass(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssIsPseudoClass(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-lab-function/INSTALL.md b/plugins/postcss-lab-function/INSTALL.md index 9f63b771a..7eae5d2ec 100644 --- a/plugins/postcss-lab-function/INSTALL.md +++ b/plugins/postcss-lab-function/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssLabFunction = require('postcss-lab-function'); postcss([ - postcssLabFunction(/* pluginOptions */) + postcssLabFunction(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Lab Function] in your `postcss.config.js` configuration file: const postcssLabFunction = require('postcss-lab-function'); module.exports = { - plugins: [ - postcssLabFunction(/* pluginOptions */) - ] + plugins: [ + postcssLabFunction(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Lab Function] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-lab-function", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-lab-function", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssLabFunction = require('postcss-lab-function'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssLabFunction(/* pluginOptions */) - ] + plugins: () => [ + postcssLabFunction(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssLabFunction = require('postcss-lab-function'); gulp.task('css', function () { - var plugins = [ - postcssLabFunction(/* pluginOptions */) - ]; + var plugins = [ + postcssLabFunction(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssLabFunction = require('postcss-lab-function'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssLabFunction(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssLabFunction(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-logical/INSTALL.md b/plugins/postcss-logical/INSTALL.md index 17520cf1b..b16167ac9 100644 --- a/plugins/postcss-logical/INSTALL.md +++ b/plugins/postcss-logical/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssLogical = require('postcss-logical'); postcss([ - postcssLogical(/* pluginOptions */) + postcssLogical(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Logical Properties and Values] in your `postcss.config.js` configur const postcssLogical = require('postcss-logical'); module.exports = { - plugins: [ - postcssLogical(/* pluginOptions */) - ] + plugins: [ + postcssLogical(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Logical Properties and Values] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-logical", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-logical", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssLogical = require('postcss-logical'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssLogical(/* pluginOptions */) - ] + plugins: () => [ + postcssLogical(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssLogical = require('postcss-logical'); gulp.task('css', function () { - var plugins = [ - postcssLogical(/* pluginOptions */) - ]; + var plugins = [ + postcssLogical(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssLogical = require('postcss-logical'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssLogical(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssLogical(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-nesting/INSTALL.md b/plugins/postcss-nesting/INSTALL.md index 9a8a1f026..4f7b24973 100644 --- a/plugins/postcss-nesting/INSTALL.md +++ b/plugins/postcss-nesting/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssNesting = require('postcss-nesting'); postcss([ - postcssNesting(/* pluginOptions */) + postcssNesting(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Nesting] in your `postcss.config.js` configuration file: const postcssNesting = require('postcss-nesting'); module.exports = { - plugins: [ - postcssNesting(/* pluginOptions */) - ] + plugins: [ + postcssNesting(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Nesting] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-nesting", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-nesting", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssNesting = require('postcss-nesting'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssNesting(/* pluginOptions */) - ] + plugins: () => [ + postcssNesting(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssNesting = require('postcss-nesting'); gulp.task('css', function () { - var plugins = [ - postcssNesting(/* pluginOptions */) - ]; + var plugins = [ + postcssNesting(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssNesting = require('postcss-nesting'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssNesting(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssNesting(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-normalize-display-values/INSTALL.md b/plugins/postcss-normalize-display-values/INSTALL.md index 3604c5104..f6f2197f9 100644 --- a/plugins/postcss-normalize-display-values/INSTALL.md +++ b/plugins/postcss-normalize-display-values/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-display-values'); postcss([ - postcssNormalizeDisplayValues(/* pluginOptions */) + postcssNormalizeDisplayValues(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Normalize Display Values] in your `postcss.config.js` configuration const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-display-values'); module.exports = { - plugins: [ - postcssNormalizeDisplayValues(/* pluginOptions */) - ] + plugins: [ + postcssNormalizeDisplayValues(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Normalize Display Values] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "@csstools/postcss-normalize-display-values", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "@csstools/postcss-normalize-display-values", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-display-values'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssNormalizeDisplayValues(/* pluginOptions */) - ] + plugins: () => [ + postcssNormalizeDisplayValues(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-display-values'); gulp.task('css', function () { - var plugins = [ - postcssNormalizeDisplayValues(/* pluginOptions */) - ]; + var plugins = [ + postcssNormalizeDisplayValues(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssNormalizeDisplayValues = require('@csstools/postcss-normalize-displ grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssNormalizeDisplayValues(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssNormalizeDisplayValues(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-oklab-function/INSTALL.md b/plugins/postcss-oklab-function/INSTALL.md index 1394afc22..afa88f800 100644 --- a/plugins/postcss-oklab-function/INSTALL.md +++ b/plugins/postcss-oklab-function/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssOKLabFunction = require('@csstools/postcss-oklab-function'); postcss([ - postcssOKLabFunction(/* pluginOptions */) + postcssOKLabFunction(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS OKLab Function] in your `postcss.config.js` configuration file: const postcssOKLabFunction = require('@csstools/postcss-oklab-function'); module.exports = { - plugins: [ - postcssOKLabFunction(/* pluginOptions */) - ] + plugins: [ + postcssOKLabFunction(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS OKLab Function] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "@csstools/postcss-oklab-function", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "@csstools/postcss-oklab-function", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssOKLabFunction = require('@csstools/postcss-oklab-function'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssOKLabFunction(/* pluginOptions */) - ] + plugins: () => [ + postcssOKLabFunction(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssOKLabFunction = require('@csstools/postcss-oklab-function'); gulp.task('css', function () { - var plugins = [ - postcssOKLabFunction(/* pluginOptions */) - ]; + var plugins = [ + postcssOKLabFunction(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssOKLabFunction = require('@csstools/postcss-oklab-function'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssOKLabFunction(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssOKLabFunction(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-overflow-shorthand/INSTALL.md b/plugins/postcss-overflow-shorthand/INSTALL.md index e3f1b41a7..71edd96f4 100644 --- a/plugins/postcss-overflow-shorthand/INSTALL.md +++ b/plugins/postcss-overflow-shorthand/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssOverflowShorthand = require('postcss-overflow-shorthand'); postcss([ - postcssOverflowShorthand(/* pluginOptions */) + postcssOverflowShorthand(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Overflow Shorthand] in your `postcss.config.js` configuration file: const postcssOverflowShorthand = require('postcss-overflow-shorthand'); module.exports = { - plugins: [ - postcssOverflowShorthand(/* pluginOptions */) - ] + plugins: [ + postcssOverflowShorthand(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Overflow Shorthand] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-overflow-shorthand", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-overflow-shorthand", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssOverflowShorthand = require('postcss-overflow-shorthand'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssOverflowShorthand(/* pluginOptions */) - ] + plugins: () => [ + postcssOverflowShorthand(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssOverflowShorthand = require('postcss-overflow-shorthand'); gulp.task('css', function () { - var plugins = [ - postcssOverflowShorthand(/* pluginOptions */) - ]; + var plugins = [ + postcssOverflowShorthand(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssOverflowShorthand = require('postcss-overflow-shorthand'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssOverflowShorthand(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssOverflowShorthand(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-place/INSTALL.md b/plugins/postcss-place/INSTALL.md index 139c1b674..92d44d820 100644 --- a/plugins/postcss-place/INSTALL.md +++ b/plugins/postcss-place/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssPlace = require('postcss-place'); postcss([ - postcssPlace(/* pluginOptions */) + postcssPlace(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Place Properties] in your `postcss.config.js` configuration file: const postcssPlace = require('postcss-place'); module.exports = { - plugins: [ - postcssPlace(/* pluginOptions */) - ] + plugins: [ + postcssPlace(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Place Properties] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-place", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-place", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssPlace = require('postcss-place'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssPlace(/* pluginOptions */) - ] + plugins: () => [ + postcssPlace(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssPlace = require('postcss-place'); gulp.task('css', function () { - var plugins = [ - postcssPlace(/* pluginOptions */) - ]; + var plugins = [ + postcssPlace(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssPlace = require('postcss-place'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssPlace(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssPlace(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-progressive-custom-properties/INSTALL.md b/plugins/postcss-progressive-custom-properties/INSTALL.md index ef43569de..c7d39c07b 100644 --- a/plugins/postcss-progressive-custom-properties/INSTALL.md +++ b/plugins/postcss-progressive-custom-properties/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssProgressiveCustomProperties = require('@csstools/postcss-progressive-custom-properties'); postcss([ - postcssProgressiveCustomProperties(/* pluginOptions */) + postcssProgressiveCustomProperties(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Progressive Custom Properties] in your `postcss.config.js` configur const postcssProgressiveCustomProperties = require('@csstools/postcss-progressive-custom-properties'); module.exports = { - plugins: [ - postcssProgressiveCustomProperties(/* pluginOptions */) - ] + plugins: [ + postcssProgressiveCustomProperties(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Progressive Custom Properties] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "@csstools/postcss-progressive-custom-properties", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "@csstools/postcss-progressive-custom-properties", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssProgressiveCustomProperties = require('@csstools/postcss-progressive-custom-properties'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssProgressiveCustomProperties(/* pluginOptions */) - ] + plugins: () => [ + postcssProgressiveCustomProperties(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssProgressiveCustomProperties = require('@csstools/postcss-progressive-custom-properties'); gulp.task('css', function () { - var plugins = [ - postcssProgressiveCustomProperties(/* pluginOptions */) - ]; + var plugins = [ + postcssProgressiveCustomProperties(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssProgressiveCustomProperties = require('@csstools/postcss-progressiv grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssProgressiveCustomProperties(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssProgressiveCustomProperties(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-pseudo-class-any-link/INSTALL.md b/plugins/postcss-pseudo-class-any-link/INSTALL.md index 505598635..a68e4acda 100644 --- a/plugins/postcss-pseudo-class-any-link/INSTALL.md +++ b/plugins/postcss-pseudo-class-any-link/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssPseudoClassAnyLink = require('postcss-pseudo-class-any-link'); postcss([ - postcssPseudoClassAnyLink(/* pluginOptions */) + postcssPseudoClassAnyLink(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Pseudo Class Any Link] in your `postcss.config.js` configuration fi const postcssPseudoClassAnyLink = require('postcss-pseudo-class-any-link'); module.exports = { - plugins: [ - postcssPseudoClassAnyLink(/* pluginOptions */) - ] + plugins: [ + postcssPseudoClassAnyLink(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Pseudo Class Any Link] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "postcss-pseudo-class-any-link", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "postcss-pseudo-class-any-link", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssPseudoClassAnyLink = require('postcss-pseudo-class-any-link'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssPseudoClassAnyLink(/* pluginOptions */) - ] + plugins: () => [ + postcssPseudoClassAnyLink(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssPseudoClassAnyLink = require('postcss-pseudo-class-any-link'); gulp.task('css', function () { - var plugins = [ - postcssPseudoClassAnyLink(/* pluginOptions */) - ]; + var plugins = [ + postcssPseudoClassAnyLink(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssPseudoClassAnyLink = require('postcss-pseudo-class-any-link'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssPseudoClassAnyLink(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssPseudoClassAnyLink(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ``` diff --git a/plugins/postcss-unset-value/INSTALL.md b/plugins/postcss-unset-value/INSTALL.md index 534cecfc8..8071b959a 100644 --- a/plugins/postcss-unset-value/INSTALL.md +++ b/plugins/postcss-unset-value/INSTALL.md @@ -20,7 +20,7 @@ const postcss = require('postcss'); const postcssUnsetValue = require('@csstools/postcss-unset-value'); postcss([ - postcssUnsetValue(/* pluginOptions */) + postcssUnsetValue(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` @@ -38,9 +38,9 @@ Use [PostCSS Unset Value] in your `postcss.config.js` configuration file: const postcssUnsetValue = require('@csstools/postcss-unset-value'); module.exports = { - plugins: [ - postcssUnsetValue(/* pluginOptions */) - ] + plugins: [ + postcssUnsetValue(/* pluginOptions */) + ] } ``` @@ -58,35 +58,35 @@ Use [PostCSS Unset Value] in your Webpack configuration: ```js module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - { - loader: "css-loader", - options: { importLoaders: 1 }, - }, - { - loader: "postcss-loader", - options: { - postcssOptions: { - plugins: [ - [ - "@csstools/postcss-unset-value", - { - // Options - }, - ], - ], - }, - }, - }, - ], - }, - ], - }, + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + [ + "@csstools/postcss-unset-value", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, }; ``` @@ -106,9 +106,9 @@ const reactAppRewirePostcss = require('react-app-rewire-postcss'); const postcssUnsetValue = require('@csstools/postcss-unset-value'); module.exports = config => reactAppRewirePostcss(config, { - plugins: () => [ - postcssUnsetValue(/* pluginOptions */) - ] + plugins: () => [ + postcssUnsetValue(/* pluginOptions */) + ] }); ``` @@ -127,13 +127,13 @@ const postcss = require('gulp-postcss'); const postcssUnsetValue = require('@csstools/postcss-unset-value'); gulp.task('css', function () { - var plugins = [ - postcssUnsetValue(/* pluginOptions */) - ]; + var plugins = [ + postcssUnsetValue(/* pluginOptions */) + ]; - return gulp.src('./src/*.css') - .pipe(postcss(plugins)) - .pipe(gulp.dest('.')); + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); }); ``` @@ -153,16 +153,16 @@ const postcssUnsetValue = require('@csstools/postcss-unset-value'); grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ - postcss: { - options: { - processors: [ - postcssUnsetValue(/* pluginOptions */) - ] - }, - dist: { - src: '*.css' - } - } + postcss: { + options: { + processors: [ + postcssUnsetValue(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } }); ```