From 64c2d2233c103e6f06812e1bb586635eedaf3887 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Thu, 17 Nov 2022 18:50:01 +0100 Subject: [PATCH 1/5] next.js install instructions --- .github/bin/generate-docs/install-template.md | 37 ++++++++++++++++++- .github/bin/generate-docs/readme.mjs | 9 ++++- experimental/postcss-nesting/INSTALL.md | 37 ++++++++++++++++++- plugins/css-blank-pseudo/INSTALL.md | 37 ++++++++++++++++++- plugins/css-has-pseudo/INSTALL.md | 37 ++++++++++++++++++- plugins/css-prefers-color-scheme/INSTALL.md | 37 ++++++++++++++++++- .../INSTALL.md | 37 ++++++++++++++++++- .../README.md | 9 ++++- plugins/postcss-base-plugin/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-base-plugin/README.md | 9 ++++- plugins/postcss-cascade-layers/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-cascade-layers/README.md | 9 ++++- plugins/postcss-color-function/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-color-function/README.md | 9 ++++- .../INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-color-hex-alpha/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-color-hex-alpha/README.md | 9 ++++- .../postcss-color-rebeccapurple/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-color-rebeccapurple/README.md | 9 ++++- plugins/postcss-conditional-values/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-conditional-values/README.md | 9 ++++- plugins/postcss-custom-media/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-custom-media/README.md | 9 ++++- plugins/postcss-custom-properties/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-custom-selectors/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-custom-selectors/README.md | 9 ++++- plugins/postcss-design-tokens/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-design-tokens/README.md | 9 ++++- plugins/postcss-dir-pseudo-class/INSTALL.md | 37 ++++++++++++++++++- .../INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-env-function/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-extract/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-extract/README.md | 9 ++++- plugins/postcss-focus-visible/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-focus-within/INSTALL.md | 37 ++++++++++++++++++- .../postcss-font-format-keywords/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-gap-properties/INSTALL.md | 37 ++++++++++++++++++- .../INSTALL.md | 37 ++++++++++++++++++- .../README.md | 9 ++++- plugins/postcss-hwb-function/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-ic-unit/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-image-set-function/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-is-pseudo-class/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-lab-function/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-logical/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-nested-calc/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-nested-calc/README.md | 9 ++++- plugins/postcss-nesting/INSTALL.md | 37 ++++++++++++++++++- .../INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-oklab-function/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-overflow-shorthand/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-place/INSTALL.md | 37 ++++++++++++++++++- .../INSTALL.md | 37 ++++++++++++++++++- .../postcss-pseudo-class-any-link/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-scope-pseudo-class/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-scope-pseudo-class/README.md | 9 ++++- plugins/postcss-selector-not/INSTALL.md | 37 ++++++++++++++++++- plugins/postcss-selector-not/README.md | 9 ++++- .../INSTALL.md | 37 ++++++++++++++++++- .../postcss-stepped-value-functions/README.md | 9 ++++- .../INSTALL.md | 37 ++++++++++++++++++- .../README.md | 9 ++++- .../INSTALL.md | 37 ++++++++++++++++++- .../postcss-trigonometric-functions/README.md | 9 ++++- plugins/postcss-unset-value/INSTALL.md | 37 ++++++++++++++++++- 65 files changed, 1743 insertions(+), 130 deletions(-) diff --git a/.github/bin/generate-docs/install-template.md b/.github/bin/generate-docs/install-template.md index 2bba0606d..54999f977 100644 --- a/.github/bin/generate-docs/install-template.md +++ b/.github/bin/generate-docs/install-template.md @@ -2,8 +2,13 @@ [] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "" + ] +} +``` + +```json +{ + "plugins": [ + [ + "", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ []: https://github.com/csstools/postcss-plugins/tree/main/ [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/.github/bin/generate-docs/readme.mjs b/.github/bin/generate-docs/readme.mjs index 2ccc22adc..dd7234def 100644 --- a/.github/bin/generate-docs/readme.mjs +++ b/.github/bin/generate-docs/readme.mjs @@ -68,8 +68,13 @@ postcss([ readmeDoc = readmeDoc.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) | -| --- | --- | --- | --- | --- | --- |`); +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt)`); // Insert "Link List" section readmeDoc = readmeDoc.replace('', `[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test diff --git a/experimental/postcss-nesting/INSTALL.md b/experimental/postcss-nesting/INSTALL.md index 161019274..c0d990b62 100644 --- a/experimental/postcss-nesting/INSTALL.md +++ b/experimental/postcss-nesting/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Nesting] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Nesting] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-nesting-experimental" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-nesting-experimental", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Nesting]: https://github.com/csstools/postcss-plugins/tree/main/experimental/postcss-nesting [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/css-blank-pseudo/INSTALL.md b/plugins/css-blank-pseudo/INSTALL.md index 79d87e3c5..7831b1917 100644 --- a/plugins/css-blank-pseudo/INSTALL.md +++ b/plugins/css-blank-pseudo/INSTALL.md @@ -2,8 +2,13 @@ [CSS Blank Pseudo] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [CSS Blank Pseudo] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "css-blank-pseudo" + ] +} +``` + +```json +{ + "plugins": [ + [ + "css-blank-pseudo", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [CSS Blank Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/css-has-pseudo/INSTALL.md b/plugins/css-has-pseudo/INSTALL.md index 49780082c..f6975ed51 100644 --- a/plugins/css-has-pseudo/INSTALL.md +++ b/plugins/css-has-pseudo/INSTALL.md @@ -2,8 +2,13 @@ [CSS Has Pseudo] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [CSS Has Pseudo] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "css-has-pseudo" + ] +} +``` + +```json +{ + "plugins": [ + [ + "css-has-pseudo", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [CSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/css-prefers-color-scheme/INSTALL.md b/plugins/css-prefers-color-scheme/INSTALL.md index 896c02af5..da6374a51 100644 --- a/plugins/css-prefers-color-scheme/INSTALL.md +++ b/plugins/css-prefers-color-scheme/INSTALL.md @@ -2,8 +2,13 @@ [Prefers Color Scheme] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [Prefers Color Scheme] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "css-prefers-color-scheme" + ] +} +``` + +```json +{ + "plugins": [ + [ + "css-prefers-color-scheme", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [Prefers Color Scheme]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-attribute-case-insensitive/INSTALL.md b/plugins/postcss-attribute-case-insensitive/INSTALL.md index d0bd8eafa..73a316071 100644 --- a/plugins/postcss-attribute-case-insensitive/INSTALL.md +++ b/plugins/postcss-attribute-case-insensitive/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Attribute Case Insensitive] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Attribute Case Insensitive] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-attribute-case-insensitive" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-attribute-case-insensitive", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Attribute Case Insensitive]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-attribute-case-insensitive [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-attribute-case-insensitive/README.md b/plugins/postcss-attribute-case-insensitive/README.md index f3e5e0cfb..ca4532ec5 100644 --- a/plugins/postcss-attribute-case-insensitive/README.md +++ b/plugins/postcss-attribute-case-insensitive/README.md @@ -38,8 +38,13 @@ postcss([ [PostCSS Attribute Case Insensitive] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [css-url]: https://cssdb.org/#case-insensitive-attributes diff --git a/plugins/postcss-base-plugin/INSTALL.md b/plugins/postcss-base-plugin/INSTALL.md index d92452caa..941a6db71 100644 --- a/plugins/postcss-base-plugin/INSTALL.md +++ b/plugins/postcss-base-plugin/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Base Plugin] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Base Plugin] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-base-plugin" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-base-plugin", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Base Plugin]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-base-plugin [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-base-plugin/README.md b/plugins/postcss-base-plugin/README.md index 9fa7056e9..fdcafc1ac 100644 --- a/plugins/postcss-base-plugin/README.md +++ b/plugins/postcss-base-plugin/README.md @@ -46,8 +46,13 @@ postcss([ [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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-cascade-layers/INSTALL.md b/plugins/postcss-cascade-layers/INSTALL.md index 7ff70288f..29adca6e8 100644 --- a/plugins/postcss-cascade-layers/INSTALL.md +++ b/plugins/postcss-cascade-layers/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Cascade Layers] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Cascade Layers] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-cascade-layers" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-cascade-layers", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Cascade Layers]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-cascade-layers/README.md b/plugins/postcss-cascade-layers/README.md index e02aff973..aa50e81c0 100644 --- a/plugins/postcss-cascade-layers/README.md +++ b/plugins/postcss-cascade-layers/README.md @@ -106,8 +106,13 @@ postcss([ [PostCSS Cascade Layers] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-color-function/INSTALL.md b/plugins/postcss-color-function/INSTALL.md index 53384a4d8..f01a0b776 100644 --- a/plugins/postcss-color-function/INSTALL.md +++ b/plugins/postcss-color-function/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Color Function] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Color Function] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-color-function" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-color-function", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Color Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-color-function/README.md b/plugins/postcss-color-function/README.md index 62d6b294d..fe8637bc0 100644 --- a/plugins/postcss-color-function/README.md +++ b/plugins/postcss-color-function/README.md @@ -47,8 +47,13 @@ postcss([ [PostCSS Color Function] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-color-functional-notation/INSTALL.md b/plugins/postcss-color-functional-notation/INSTALL.md index 2b02d20c5..fecf458c8 100644 --- a/plugins/postcss-color-functional-notation/INSTALL.md +++ b/plugins/postcss-color-functional-notation/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Color Functional Notation] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Color Functional Notation] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-color-functional-notation" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-color-functional-notation", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Color Functional Notation]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-color-hex-alpha/INSTALL.md b/plugins/postcss-color-hex-alpha/INSTALL.md index 7f920610e..7ce917c84 100644 --- a/plugins/postcss-color-hex-alpha/INSTALL.md +++ b/plugins/postcss-color-hex-alpha/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Color Hex Alpha] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Color Hex Alpha] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-color-hex-alpha" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-color-hex-alpha", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Color Hex Alpha]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-hex-alpha [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-color-hex-alpha/README.md b/plugins/postcss-color-hex-alpha/README.md index 2b7db6b00..b04d0107b 100644 --- a/plugins/postcss-color-hex-alpha/README.md +++ b/plugins/postcss-color-hex-alpha/README.md @@ -39,8 +39,13 @@ postcss([ [PostCSS Color Hex Alpha] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-color-rebeccapurple/INSTALL.md b/plugins/postcss-color-rebeccapurple/INSTALL.md index a34275bb6..4d7cc1884 100644 --- a/plugins/postcss-color-rebeccapurple/INSTALL.md +++ b/plugins/postcss-color-rebeccapurple/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS RebeccaPurple] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS RebeccaPurple] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-color-rebeccapurple" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-color-rebeccapurple", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS RebeccaPurple]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-rebeccapurple [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-color-rebeccapurple/README.md b/plugins/postcss-color-rebeccapurple/README.md index fa73c26d2..ff1171773 100644 --- a/plugins/postcss-color-rebeccapurple/README.md +++ b/plugins/postcss-color-rebeccapurple/README.md @@ -44,8 +44,13 @@ postcss([ [PostCSS RebeccaPurple] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-conditional-values/INSTALL.md b/plugins/postcss-conditional-values/INSTALL.md index 18cc926f1..0df0a7505 100644 --- a/plugins/postcss-conditional-values/INSTALL.md +++ b/plugins/postcss-conditional-values/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Conditional Values] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Conditional Values] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-conditional-values" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-conditional-values", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Conditional Values]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-conditional-values [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-conditional-values/README.md b/plugins/postcss-conditional-values/README.md index 74d15436e..add96096b 100644 --- a/plugins/postcss-conditional-values/README.md +++ b/plugins/postcss-conditional-values/README.md @@ -62,8 +62,13 @@ postcss([ [PostCSS Conditional Values] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-custom-media/INSTALL.md b/plugins/postcss-custom-media/INSTALL.md index 5d2697d54..3f3ee0fe1 100644 --- a/plugins/postcss-custom-media/INSTALL.md +++ b/plugins/postcss-custom-media/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Custom Media] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Custom Media] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-custom-media" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-custom-media", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Custom Media]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-custom-media/README.md b/plugins/postcss-custom-media/README.md index 73437387f..61714971e 100644 --- a/plugins/postcss-custom-media/README.md +++ b/plugins/postcss-custom-media/README.md @@ -40,8 +40,13 @@ postcss([ [PostCSS Custom Media] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-custom-properties/INSTALL.md b/plugins/postcss-custom-properties/INSTALL.md index a3fa4bb1a..af6118848 100644 --- a/plugins/postcss-custom-properties/INSTALL.md +++ b/plugins/postcss-custom-properties/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Custom Properties] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Custom Properties] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-custom-properties" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-custom-properties", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Custom Properties]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-custom-selectors/INSTALL.md b/plugins/postcss-custom-selectors/INSTALL.md index 08d0775f8..bcd304169 100644 --- a/plugins/postcss-custom-selectors/INSTALL.md +++ b/plugins/postcss-custom-selectors/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Custom Selectors] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Custom Selectors] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-custom-selectors" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-custom-selectors", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Custom Selectors]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-selectors [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-custom-selectors/README.md b/plugins/postcss-custom-selectors/README.md index 5b57aeeb0..091491fcf 100644 --- a/plugins/postcss-custom-selectors/README.md +++ b/plugins/postcss-custom-selectors/README.md @@ -40,8 +40,13 @@ postcss([ [PostCSS Custom Selectors] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-design-tokens/INSTALL.md b/plugins/postcss-design-tokens/INSTALL.md index a6635e80b..b8f7064b1 100644 --- a/plugins/postcss-design-tokens/INSTALL.md +++ b/plugins/postcss-design-tokens/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Design Tokens] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Design Tokens] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-design-tokens" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-design-tokens", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Design Tokens]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-design-tokens [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-design-tokens/README.md b/plugins/postcss-design-tokens/README.md index 717921edc..8bdf0d63a 100644 --- a/plugins/postcss-design-tokens/README.md +++ b/plugins/postcss-design-tokens/README.md @@ -61,8 +61,13 @@ postcss([ [PostCSS Design Tokens] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Formats diff --git a/plugins/postcss-dir-pseudo-class/INSTALL.md b/plugins/postcss-dir-pseudo-class/INSTALL.md index 4b6e035b3..1e50059c2 100644 --- a/plugins/postcss-dir-pseudo-class/INSTALL.md +++ b/plugins/postcss-dir-pseudo-class/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Dir Pseudo Class] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Dir Pseudo Class] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-dir-pseudo-class" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-dir-pseudo-class", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Dir Pseudo Class]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-double-position-gradients/INSTALL.md b/plugins/postcss-double-position-gradients/INSTALL.md index 123e1ab81..426930fb6 100644 --- a/plugins/postcss-double-position-gradients/INSTALL.md +++ b/plugins/postcss-double-position-gradients/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Double Position Gradients] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Double Position Gradients] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-double-position-gradients" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-double-position-gradients", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Double Position Gradients]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-env-function/INSTALL.md b/plugins/postcss-env-function/INSTALL.md index cb8a361a8..3463f0dbe 100644 --- a/plugins/postcss-env-function/INSTALL.md +++ b/plugins/postcss-env-function/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Environment Variables] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Environment Variables] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-env-function" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-env-function", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Environment Variables]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-env-function [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-extract/INSTALL.md b/plugins/postcss-extract/INSTALL.md index 640f9784b..6bd3e61fd 100644 --- a/plugins/postcss-extract/INSTALL.md +++ b/plugins/postcss-extract/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Extract] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Extract] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-extract" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-extract", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Extract]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-extract [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-extract/README.md b/plugins/postcss-extract/README.md index ab47c54ac..6f67e53ee 100644 --- a/plugins/postcss-extract/README.md +++ b/plugins/postcss-extract/README.md @@ -65,8 +65,13 @@ postcss([ [PostCSS Extract] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-focus-visible/INSTALL.md b/plugins/postcss-focus-visible/INSTALL.md index 5989e6484..6ed547742 100644 --- a/plugins/postcss-focus-visible/INSTALL.md +++ b/plugins/postcss-focus-visible/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Focus Visible] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Focus Visible] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-focus-visible" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-focus-visible", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Focus Visible]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-focus-within/INSTALL.md b/plugins/postcss-focus-within/INSTALL.md index c8528ac02..47e2c6316 100644 --- a/plugins/postcss-focus-within/INSTALL.md +++ b/plugins/postcss-focus-within/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Focus Within] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Focus Within] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-focus-within" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-focus-within", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Focus Within]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-font-format-keywords/INSTALL.md b/plugins/postcss-font-format-keywords/INSTALL.md index a2a7deb53..0ea21c5c4 100644 --- a/plugins/postcss-font-format-keywords/INSTALL.md +++ b/plugins/postcss-font-format-keywords/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Font Format Keywords] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Font Format Keywords] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-font-format-keywords" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-font-format-keywords", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Font Format Keywords]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-font-format-keywords [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-gap-properties/INSTALL.md b/plugins/postcss-gap-properties/INSTALL.md index 2dd671c2d..6cb775508 100644 --- a/plugins/postcss-gap-properties/INSTALL.md +++ b/plugins/postcss-gap-properties/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Gap Properties] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Gap Properties] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-gap-properties" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-gap-properties", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Gap Properties]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-gradients-interpolation-method/INSTALL.md b/plugins/postcss-gradients-interpolation-method/INSTALL.md index a384e7cbd..12e59a683 100644 --- a/plugins/postcss-gradients-interpolation-method/INSTALL.md +++ b/plugins/postcss-gradients-interpolation-method/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Gradients Interpolation Method] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Gradients Interpolation Method] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-gradients-interpolation-method" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-gradients-interpolation-method", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Gradients Interpolation Method]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-gradients-interpolation-method/README.md b/plugins/postcss-gradients-interpolation-method/README.md index 690e33012..6021b4c81 100644 --- a/plugins/postcss-gradients-interpolation-method/README.md +++ b/plugins/postcss-gradients-interpolation-method/README.md @@ -72,8 +72,13 @@ postcss([ [PostCSS Gradients Interpolation Method] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-hwb-function/INSTALL.md b/plugins/postcss-hwb-function/INSTALL.md index 248b056c5..4899d75e5 100644 --- a/plugins/postcss-hwb-function/INSTALL.md +++ b/plugins/postcss-hwb-function/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS HWB Function] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS HWB Function] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-hwb-function" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-hwb-function", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS HWB Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-ic-unit/INSTALL.md b/plugins/postcss-ic-unit/INSTALL.md index 91e2f78cc..410d12acc 100644 --- a/plugins/postcss-ic-unit/INSTALL.md +++ b/plugins/postcss-ic-unit/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS IC Unit] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS IC Unit] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-ic-unit" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-ic-unit", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS IC Unit]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-ic-unit [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-image-set-function/INSTALL.md b/plugins/postcss-image-set-function/INSTALL.md index 23254abfb..078ddeeb2 100644 --- a/plugins/postcss-image-set-function/INSTALL.md +++ b/plugins/postcss-image-set-function/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS image-set() Function] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS image-set() Function] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-image-set-function" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-image-set-function", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS image-set() Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-image-set-function [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-is-pseudo-class/INSTALL.md b/plugins/postcss-is-pseudo-class/INSTALL.md index 0df59f58d..a80a39cad 100644 --- a/plugins/postcss-is-pseudo-class/INSTALL.md +++ b/plugins/postcss-is-pseudo-class/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Is Pseudo] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Is Pseudo] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-is-pseudo-class" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-is-pseudo-class", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Is Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-lab-function/INSTALL.md b/plugins/postcss-lab-function/INSTALL.md index 112d1eef2..4975ed6e1 100644 --- a/plugins/postcss-lab-function/INSTALL.md +++ b/plugins/postcss-lab-function/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Lab Function] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Lab Function] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-lab-function" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-lab-function", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Lab Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-logical/INSTALL.md b/plugins/postcss-logical/INSTALL.md index 259d0de97..7d27ad9f4 100644 --- a/plugins/postcss-logical/INSTALL.md +++ b/plugins/postcss-logical/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Logical Properties and Values] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Logical Properties and Values] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-logical" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-logical", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Logical Properties and Values]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-nested-calc/INSTALL.md b/plugins/postcss-nested-calc/INSTALL.md index 63a8fa61c..6a9c9b9bd 100644 --- a/plugins/postcss-nested-calc/INSTALL.md +++ b/plugins/postcss-nested-calc/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Nested Calc] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Nested Calc] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-nested-calc" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-nested-calc", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Nested Calc]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nested-calc [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-nested-calc/README.md b/plugins/postcss-nested-calc/README.md index 2a1f41a77..de8fe1817 100644 --- a/plugins/postcss-nested-calc/README.md +++ b/plugins/postcss-nested-calc/README.md @@ -39,8 +39,13 @@ postcss([ [PostCSS Nested Calc] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-nesting/INSTALL.md b/plugins/postcss-nesting/INSTALL.md index 347b9e286..63db3383d 100644 --- a/plugins/postcss-nesting/INSTALL.md +++ b/plugins/postcss-nesting/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Nesting] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Nesting] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-nesting" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-nesting", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Nesting]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-normalize-display-values/INSTALL.md b/plugins/postcss-normalize-display-values/INSTALL.md index c1d7db62d..1b8caa03c 100644 --- a/plugins/postcss-normalize-display-values/INSTALL.md +++ b/plugins/postcss-normalize-display-values/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Normalize Display Values] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Normalize Display Values] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-normalize-display-values" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-normalize-display-values", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Normalize Display Values]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-oklab-function/INSTALL.md b/plugins/postcss-oklab-function/INSTALL.md index 0c362fdd2..173f7c0b5 100644 --- a/plugins/postcss-oklab-function/INSTALL.md +++ b/plugins/postcss-oklab-function/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS OKLab Function] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS OKLab Function] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-oklab-function" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-oklab-function", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS OKLab Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-oklab-function [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-overflow-shorthand/INSTALL.md b/plugins/postcss-overflow-shorthand/INSTALL.md index 6127bfad7..ae5ace769 100644 --- a/plugins/postcss-overflow-shorthand/INSTALL.md +++ b/plugins/postcss-overflow-shorthand/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Overflow Shorthand] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Overflow Shorthand] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-overflow-shorthand" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-overflow-shorthand", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Overflow Shorthand]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-overflow-shorthand [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-place/INSTALL.md b/plugins/postcss-place/INSTALL.md index 204b66eb3..48a7e2185 100644 --- a/plugins/postcss-place/INSTALL.md +++ b/plugins/postcss-place/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Place Properties] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Place Properties] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-place" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-place", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Place Properties]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-place [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-progressive-custom-properties/INSTALL.md b/plugins/postcss-progressive-custom-properties/INSTALL.md index 00002105e..814268ad0 100644 --- a/plugins/postcss-progressive-custom-properties/INSTALL.md +++ b/plugins/postcss-progressive-custom-properties/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Progressive Custom Properties] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Progressive Custom Properties] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-progressive-custom-properties" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-progressive-custom-properties", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Progressive Custom Properties]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-pseudo-class-any-link/INSTALL.md b/plugins/postcss-pseudo-class-any-link/INSTALL.md index b05d86bc3..9e14aa546 100644 --- a/plugins/postcss-pseudo-class-any-link/INSTALL.md +++ b/plugins/postcss-pseudo-class-any-link/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Pseudo Class Any Link] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Pseudo Class Any Link] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-pseudo-class-any-link" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-pseudo-class-any-link", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Pseudo Class Any Link]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-pseudo-class-any-link [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-scope-pseudo-class/INSTALL.md b/plugins/postcss-scope-pseudo-class/INSTALL.md index 2dde05fcb..ec4352c4b 100644 --- a/plugins/postcss-scope-pseudo-class/INSTALL.md +++ b/plugins/postcss-scope-pseudo-class/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Scope Pseudo Class] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Scope Pseudo Class] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-scope-pseudo-class" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-scope-pseudo-class", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Scope Pseudo Class]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-scope-pseudo-class [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-scope-pseudo-class/README.md b/plugins/postcss-scope-pseudo-class/README.md index d2310f398..92551b5af 100644 --- a/plugins/postcss-scope-pseudo-class/README.md +++ b/plugins/postcss-scope-pseudo-class/README.md @@ -38,8 +38,13 @@ postcss([ [PostCSS Scope Pseudo Class] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-selector-not/INSTALL.md b/plugins/postcss-selector-not/INSTALL.md index 0faec6d0c..266305dac 100644 --- a/plugins/postcss-selector-not/INSTALL.md +++ b/plugins/postcss-selector-not/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Selector Not] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Selector Not] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "postcss-selector-not" + ] +} +``` + +```json +{ + "plugins": [ + [ + "postcss-selector-not", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Selector Not]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-selector-not [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-selector-not/README.md b/plugins/postcss-selector-not/README.md index 57e5c4ade..0ec2b28d3 100644 --- a/plugins/postcss-selector-not/README.md +++ b/plugins/postcss-selector-not/README.md @@ -41,8 +41,13 @@ postcss([ [PostCSS Selector Not] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [css-url]: https://cssdb.org/#not-pseudo-class diff --git a/plugins/postcss-stepped-value-functions/INSTALL.md b/plugins/postcss-stepped-value-functions/INSTALL.md index 45ebb8a68..ec2108335 100644 --- a/plugins/postcss-stepped-value-functions/INSTALL.md +++ b/plugins/postcss-stepped-value-functions/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Stepped Value Functions] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Stepped Value Functions] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-stepped-value-functions" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-stepped-value-functions", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Stepped Value Functions]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-stepped-value-functions [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-stepped-value-functions/README.md b/plugins/postcss-stepped-value-functions/README.md index 3cd235169..10eeae51d 100644 --- a/plugins/postcss-stepped-value-functions/README.md +++ b/plugins/postcss-stepped-value-functions/README.md @@ -50,8 +50,13 @@ postcss([ [PostCSS Stepped Value Functions] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## ⚠️ About custom properties diff --git a/plugins/postcss-text-decoration-shorthand/INSTALL.md b/plugins/postcss-text-decoration-shorthand/INSTALL.md index aaebd6921..27b37465a 100644 --- a/plugins/postcss-text-decoration-shorthand/INSTALL.md +++ b/plugins/postcss-text-decoration-shorthand/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Text Decoration Shorthand] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Text Decoration Shorthand] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-text-decoration-shorthand" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-text-decoration-shorthand", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Text Decoration Shorthand]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-text-decoration-shorthand [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-text-decoration-shorthand/README.md b/plugins/postcss-text-decoration-shorthand/README.md index 17998c00b..4a10f17ca 100644 --- a/plugins/postcss-text-decoration-shorthand/README.md +++ b/plugins/postcss-text-decoration-shorthand/README.md @@ -40,8 +40,13 @@ postcss([ [PostCSS Text Decoration Shorthand] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## Options diff --git a/plugins/postcss-trigonometric-functions/INSTALL.md b/plugins/postcss-trigonometric-functions/INSTALL.md index d07645d54..b2ceb5eaf 100644 --- a/plugins/postcss-trigonometric-functions/INSTALL.md +++ b/plugins/postcss-trigonometric-functions/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Trigonometric Functions] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Trigonometric Functions] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-trigonometric-functions" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-trigonometric-functions", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Trigonometric Functions]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-trigonometric-functions [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-trigonometric-functions/README.md b/plugins/postcss-trigonometric-functions/README.md index d52d95fc7..ce340582f 100644 --- a/plugins/postcss-trigonometric-functions/README.md +++ b/plugins/postcss-trigonometric-functions/README.md @@ -62,8 +62,13 @@ postcss([ [PostCSS Trigonometric Functions] 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) | -| --- | --- | --- | --- | --- | --- | +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [Webpack](INSTALL.md#webpack) +- [Create React App](INSTALL.md#create-react-app) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) ## ⚠️ About custom properties diff --git a/plugins/postcss-unset-value/INSTALL.md b/plugins/postcss-unset-value/INSTALL.md index 8f19700aa..0f5a085fe 100644 --- a/plugins/postcss-unset-value/INSTALL.md +++ b/plugins/postcss-unset-value/INSTALL.md @@ -2,8 +2,13 @@ [PostCSS Unset Value] runs in all Node environments, with special instructions for: -| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | -| --- | --- | --- | --- | --- | --- | +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [Webpack](#webpack) +- [Create React App](#create-react-app) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) ## Node @@ -112,6 +117,33 @@ module.exports = config => reactAppRewirePostcss(config, { }); ``` +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +Use [PostCSS Unset Value] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-unset-value" + ] +} +``` + +```json +{ + "plugins": [ + [ + "@csstools/postcss-unset-value", + { + // Optionally add plugin options + } + ] + ] +} +``` + ## Gulp Add [Gulp PostCSS] to your project: @@ -174,3 +206,4 @@ grunt.initConfig({ [PostCSS Unset Value]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-unset-value [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired +[Next.js]: https://nextjs.org From 69b5e62f13fff3e0b90a88a1363f2773961d066d Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Thu, 17 Nov 2022 18:52:31 +0100 Subject: [PATCH 2/5] fix --- .github/bin/generate-docs/install-template.md | 2 +- experimental/postcss-nesting/INSTALL.md | 2 +- plugins/css-blank-pseudo/INSTALL.md | 2 +- plugins/css-has-pseudo/INSTALL.md | 2 +- plugins/css-prefers-color-scheme/INSTALL.md | 2 +- plugins/postcss-attribute-case-insensitive/INSTALL.md | 2 +- plugins/postcss-base-plugin/INSTALL.md | 2 +- plugins/postcss-cascade-layers/INSTALL.md | 2 +- plugins/postcss-color-function/INSTALL.md | 2 +- plugins/postcss-color-functional-notation/INSTALL.md | 2 +- plugins/postcss-color-hex-alpha/INSTALL.md | 2 +- plugins/postcss-color-rebeccapurple/INSTALL.md | 2 +- plugins/postcss-conditional-values/INSTALL.md | 2 +- plugins/postcss-custom-media/INSTALL.md | 2 +- plugins/postcss-custom-properties/INSTALL.md | 2 +- plugins/postcss-custom-selectors/INSTALL.md | 2 +- plugins/postcss-design-tokens/INSTALL.md | 2 +- plugins/postcss-dir-pseudo-class/INSTALL.md | 2 +- plugins/postcss-double-position-gradients/INSTALL.md | 2 +- plugins/postcss-env-function/INSTALL.md | 2 +- plugins/postcss-extract/INSTALL.md | 2 +- plugins/postcss-focus-visible/INSTALL.md | 2 +- plugins/postcss-focus-within/INSTALL.md | 2 +- plugins/postcss-font-format-keywords/INSTALL.md | 2 +- plugins/postcss-gap-properties/INSTALL.md | 2 +- plugins/postcss-gradients-interpolation-method/INSTALL.md | 2 +- plugins/postcss-hwb-function/INSTALL.md | 2 +- plugins/postcss-ic-unit/INSTALL.md | 2 +- plugins/postcss-image-set-function/INSTALL.md | 2 +- plugins/postcss-is-pseudo-class/INSTALL.md | 2 +- plugins/postcss-lab-function/INSTALL.md | 2 +- plugins/postcss-logical/INSTALL.md | 2 +- plugins/postcss-nested-calc/INSTALL.md | 2 +- plugins/postcss-nesting/INSTALL.md | 2 +- plugins/postcss-normalize-display-values/INSTALL.md | 2 +- plugins/postcss-oklab-function/INSTALL.md | 2 +- plugins/postcss-overflow-shorthand/INSTALL.md | 2 +- plugins/postcss-place/INSTALL.md | 2 +- plugins/postcss-progressive-custom-properties/INSTALL.md | 2 +- plugins/postcss-pseudo-class-any-link/INSTALL.md | 2 +- plugins/postcss-scope-pseudo-class/INSTALL.md | 2 +- plugins/postcss-selector-not/INSTALL.md | 2 +- plugins/postcss-stepped-value-functions/INSTALL.md | 2 +- plugins/postcss-text-decoration-shorthand/INSTALL.md | 2 +- plugins/postcss-trigonometric-functions/INSTALL.md | 2 +- plugins/postcss-unset-value/INSTALL.md | 2 +- 46 files changed, 46 insertions(+), 46 deletions(-) diff --git a/.github/bin/generate-docs/install-template.md b/.github/bin/generate-docs/install-template.md index 54999f977..28f48365e 100644 --- a/.github/bin/generate-docs/install-template.md +++ b/.github/bin/generate-docs/install-template.md @@ -131,7 +131,7 @@ Use [] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/experimental/postcss-nesting/INSTALL.md b/experimental/postcss-nesting/INSTALL.md index c0d990b62..a4c136442 100644 --- a/experimental/postcss-nesting/INSTALL.md +++ b/experimental/postcss-nesting/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Nesting] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/css-blank-pseudo/INSTALL.md b/plugins/css-blank-pseudo/INSTALL.md index 7831b1917..c0103e3c2 100644 --- a/plugins/css-blank-pseudo/INSTALL.md +++ b/plugins/css-blank-pseudo/INSTALL.md @@ -131,7 +131,7 @@ Use [CSS Blank Pseudo] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/css-has-pseudo/INSTALL.md b/plugins/css-has-pseudo/INSTALL.md index f6975ed51..fb86b971f 100644 --- a/plugins/css-has-pseudo/INSTALL.md +++ b/plugins/css-has-pseudo/INSTALL.md @@ -131,7 +131,7 @@ Use [CSS Has Pseudo] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/css-prefers-color-scheme/INSTALL.md b/plugins/css-prefers-color-scheme/INSTALL.md index da6374a51..0143ee444 100644 --- a/plugins/css-prefers-color-scheme/INSTALL.md +++ b/plugins/css-prefers-color-scheme/INSTALL.md @@ -131,7 +131,7 @@ Use [Prefers Color Scheme] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-attribute-case-insensitive/INSTALL.md b/plugins/postcss-attribute-case-insensitive/INSTALL.md index 73a316071..0147781a8 100644 --- a/plugins/postcss-attribute-case-insensitive/INSTALL.md +++ b/plugins/postcss-attribute-case-insensitive/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Attribute Case Insensitive] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-base-plugin/INSTALL.md b/plugins/postcss-base-plugin/INSTALL.md index 941a6db71..45d406f66 100644 --- a/plugins/postcss-base-plugin/INSTALL.md +++ b/plugins/postcss-base-plugin/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Base Plugin] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-cascade-layers/INSTALL.md b/plugins/postcss-cascade-layers/INSTALL.md index 29adca6e8..3dcb8a2b3 100644 --- a/plugins/postcss-cascade-layers/INSTALL.md +++ b/plugins/postcss-cascade-layers/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Cascade Layers] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-color-function/INSTALL.md b/plugins/postcss-color-function/INSTALL.md index f01a0b776..3a38d021c 100644 --- a/plugins/postcss-color-function/INSTALL.md +++ b/plugins/postcss-color-function/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Color Function] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-color-functional-notation/INSTALL.md b/plugins/postcss-color-functional-notation/INSTALL.md index fecf458c8..90f1fe65a 100644 --- a/plugins/postcss-color-functional-notation/INSTALL.md +++ b/plugins/postcss-color-functional-notation/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Color Functional Notation] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-color-hex-alpha/INSTALL.md b/plugins/postcss-color-hex-alpha/INSTALL.md index 7ce917c84..9ad372fd8 100644 --- a/plugins/postcss-color-hex-alpha/INSTALL.md +++ b/plugins/postcss-color-hex-alpha/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Color Hex Alpha] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-color-rebeccapurple/INSTALL.md b/plugins/postcss-color-rebeccapurple/INSTALL.md index 4d7cc1884..740744585 100644 --- a/plugins/postcss-color-rebeccapurple/INSTALL.md +++ b/plugins/postcss-color-rebeccapurple/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS RebeccaPurple] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-conditional-values/INSTALL.md b/plugins/postcss-conditional-values/INSTALL.md index 0df0a7505..95159e98e 100644 --- a/plugins/postcss-conditional-values/INSTALL.md +++ b/plugins/postcss-conditional-values/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Conditional Values] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-custom-media/INSTALL.md b/plugins/postcss-custom-media/INSTALL.md index 3f3ee0fe1..a9389b9a3 100644 --- a/plugins/postcss-custom-media/INSTALL.md +++ b/plugins/postcss-custom-media/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Custom Media] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-custom-properties/INSTALL.md b/plugins/postcss-custom-properties/INSTALL.md index af6118848..8480128a3 100644 --- a/plugins/postcss-custom-properties/INSTALL.md +++ b/plugins/postcss-custom-properties/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Custom Properties] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-custom-selectors/INSTALL.md b/plugins/postcss-custom-selectors/INSTALL.md index bcd304169..b7e699e1f 100644 --- a/plugins/postcss-custom-selectors/INSTALL.md +++ b/plugins/postcss-custom-selectors/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Custom Selectors] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-design-tokens/INSTALL.md b/plugins/postcss-design-tokens/INSTALL.md index b8f7064b1..7a49b31b3 100644 --- a/plugins/postcss-design-tokens/INSTALL.md +++ b/plugins/postcss-design-tokens/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Design Tokens] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-dir-pseudo-class/INSTALL.md b/plugins/postcss-dir-pseudo-class/INSTALL.md index 1e50059c2..9d396b427 100644 --- a/plugins/postcss-dir-pseudo-class/INSTALL.md +++ b/plugins/postcss-dir-pseudo-class/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Dir Pseudo Class] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-double-position-gradients/INSTALL.md b/plugins/postcss-double-position-gradients/INSTALL.md index 426930fb6..f17630e0b 100644 --- a/plugins/postcss-double-position-gradients/INSTALL.md +++ b/plugins/postcss-double-position-gradients/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Double Position Gradients] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-env-function/INSTALL.md b/plugins/postcss-env-function/INSTALL.md index 3463f0dbe..2f153d526 100644 --- a/plugins/postcss-env-function/INSTALL.md +++ b/plugins/postcss-env-function/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Environment Variables] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-extract/INSTALL.md b/plugins/postcss-extract/INSTALL.md index 6bd3e61fd..3bb976173 100644 --- a/plugins/postcss-extract/INSTALL.md +++ b/plugins/postcss-extract/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Extract] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-focus-visible/INSTALL.md b/plugins/postcss-focus-visible/INSTALL.md index 6ed547742..0ba28ca7a 100644 --- a/plugins/postcss-focus-visible/INSTALL.md +++ b/plugins/postcss-focus-visible/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Focus Visible] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-focus-within/INSTALL.md b/plugins/postcss-focus-within/INSTALL.md index 47e2c6316..492e9e1af 100644 --- a/plugins/postcss-focus-within/INSTALL.md +++ b/plugins/postcss-focus-within/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Focus Within] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-font-format-keywords/INSTALL.md b/plugins/postcss-font-format-keywords/INSTALL.md index 0ea21c5c4..6ecf23e35 100644 --- a/plugins/postcss-font-format-keywords/INSTALL.md +++ b/plugins/postcss-font-format-keywords/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Font Format Keywords] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-gap-properties/INSTALL.md b/plugins/postcss-gap-properties/INSTALL.md index 6cb775508..a5b51c304 100644 --- a/plugins/postcss-gap-properties/INSTALL.md +++ b/plugins/postcss-gap-properties/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Gap Properties] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-gradients-interpolation-method/INSTALL.md b/plugins/postcss-gradients-interpolation-method/INSTALL.md index 12e59a683..9b5153ad9 100644 --- a/plugins/postcss-gradients-interpolation-method/INSTALL.md +++ b/plugins/postcss-gradients-interpolation-method/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Gradients Interpolation Method] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-hwb-function/INSTALL.md b/plugins/postcss-hwb-function/INSTALL.md index 4899d75e5..51af51522 100644 --- a/plugins/postcss-hwb-function/INSTALL.md +++ b/plugins/postcss-hwb-function/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS HWB Function] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-ic-unit/INSTALL.md b/plugins/postcss-ic-unit/INSTALL.md index 410d12acc..a571f3467 100644 --- a/plugins/postcss-ic-unit/INSTALL.md +++ b/plugins/postcss-ic-unit/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS IC Unit] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-image-set-function/INSTALL.md b/plugins/postcss-image-set-function/INSTALL.md index 078ddeeb2..d5232879a 100644 --- a/plugins/postcss-image-set-function/INSTALL.md +++ b/plugins/postcss-image-set-function/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS image-set() Function] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-is-pseudo-class/INSTALL.md b/plugins/postcss-is-pseudo-class/INSTALL.md index a80a39cad..99debb058 100644 --- a/plugins/postcss-is-pseudo-class/INSTALL.md +++ b/plugins/postcss-is-pseudo-class/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Is Pseudo] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-lab-function/INSTALL.md b/plugins/postcss-lab-function/INSTALL.md index 4975ed6e1..85c55ab62 100644 --- a/plugins/postcss-lab-function/INSTALL.md +++ b/plugins/postcss-lab-function/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Lab Function] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-logical/INSTALL.md b/plugins/postcss-logical/INSTALL.md index 7d27ad9f4..dd37b444f 100644 --- a/plugins/postcss-logical/INSTALL.md +++ b/plugins/postcss-logical/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Logical Properties and Values] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-nested-calc/INSTALL.md b/plugins/postcss-nested-calc/INSTALL.md index 6a9c9b9bd..609ad19fd 100644 --- a/plugins/postcss-nested-calc/INSTALL.md +++ b/plugins/postcss-nested-calc/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Nested Calc] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-nesting/INSTALL.md b/plugins/postcss-nesting/INSTALL.md index 63db3383d..a37016469 100644 --- a/plugins/postcss-nesting/INSTALL.md +++ b/plugins/postcss-nesting/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Nesting] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-normalize-display-values/INSTALL.md b/plugins/postcss-normalize-display-values/INSTALL.md index 1b8caa03c..b8c7c8482 100644 --- a/plugins/postcss-normalize-display-values/INSTALL.md +++ b/plugins/postcss-normalize-display-values/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Normalize Display Values] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-oklab-function/INSTALL.md b/plugins/postcss-oklab-function/INSTALL.md index 173f7c0b5..d6f822cc4 100644 --- a/plugins/postcss-oklab-function/INSTALL.md +++ b/plugins/postcss-oklab-function/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS OKLab Function] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-overflow-shorthand/INSTALL.md b/plugins/postcss-overflow-shorthand/INSTALL.md index ae5ace769..f1fc59825 100644 --- a/plugins/postcss-overflow-shorthand/INSTALL.md +++ b/plugins/postcss-overflow-shorthand/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Overflow Shorthand] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-place/INSTALL.md b/plugins/postcss-place/INSTALL.md index 48a7e2185..17da23b54 100644 --- a/plugins/postcss-place/INSTALL.md +++ b/plugins/postcss-place/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Place Properties] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-progressive-custom-properties/INSTALL.md b/plugins/postcss-progressive-custom-properties/INSTALL.md index 814268ad0..5c6b46861 100644 --- a/plugins/postcss-progressive-custom-properties/INSTALL.md +++ b/plugins/postcss-progressive-custom-properties/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Progressive Custom Properties] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-pseudo-class-any-link/INSTALL.md b/plugins/postcss-pseudo-class-any-link/INSTALL.md index 9e14aa546..c32f1e3b5 100644 --- a/plugins/postcss-pseudo-class-any-link/INSTALL.md +++ b/plugins/postcss-pseudo-class-any-link/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Pseudo Class Any Link] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-scope-pseudo-class/INSTALL.md b/plugins/postcss-scope-pseudo-class/INSTALL.md index ec4352c4b..c19849565 100644 --- a/plugins/postcss-scope-pseudo-class/INSTALL.md +++ b/plugins/postcss-scope-pseudo-class/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Scope Pseudo Class] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-selector-not/INSTALL.md b/plugins/postcss-selector-not/INSTALL.md index 266305dac..3295cbcb7 100644 --- a/plugins/postcss-selector-not/INSTALL.md +++ b/plugins/postcss-selector-not/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Selector Not] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-stepped-value-functions/INSTALL.md b/plugins/postcss-stepped-value-functions/INSTALL.md index ec2108335..3ecd596da 100644 --- a/plugins/postcss-stepped-value-functions/INSTALL.md +++ b/plugins/postcss-stepped-value-functions/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Stepped Value Functions] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-text-decoration-shorthand/INSTALL.md b/plugins/postcss-text-decoration-shorthand/INSTALL.md index 27b37465a..b892ac604 100644 --- a/plugins/postcss-text-decoration-shorthand/INSTALL.md +++ b/plugins/postcss-text-decoration-shorthand/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Text Decoration Shorthand] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-trigonometric-functions/INSTALL.md b/plugins/postcss-trigonometric-functions/INSTALL.md index b2ceb5eaf..5bdee3ea3 100644 --- a/plugins/postcss-trigonometric-functions/INSTALL.md +++ b/plugins/postcss-trigonometric-functions/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Trigonometric Functions] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ diff --git a/plugins/postcss-unset-value/INSTALL.md b/plugins/postcss-unset-value/INSTALL.md index 0f5a085fe..97359c647 100644 --- a/plugins/postcss-unset-value/INSTALL.md +++ b/plugins/postcss-unset-value/INSTALL.md @@ -131,7 +131,7 @@ Use [PostCSS Unset Value] in your `postcss.config.json` file: } ``` -```json +```json5 { "plugins": [ [ From e37f711890c4f6345756196e66783787b8507ca0 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Thu, 17 Nov 2022 19:12:26 +0100 Subject: [PATCH 3/5] postcss-load-config --- .github/bin/generate-docs/install-template.md | 33 +++++++++++++++++++ .github/bin/generate-docs/readme.mjs | 1 + experimental/postcss-nesting/INSTALL.md | 33 +++++++++++++++++++ plugins/css-blank-pseudo/INSTALL.md | 33 +++++++++++++++++++ plugins/css-has-pseudo/INSTALL.md | 33 +++++++++++++++++++ plugins/css-prefers-color-scheme/INSTALL.md | 33 +++++++++++++++++++ .../INSTALL.md | 33 +++++++++++++++++++ .../README.md | 1 + plugins/postcss-base-plugin/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-base-plugin/README.md | 1 + plugins/postcss-cascade-layers/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-cascade-layers/README.md | 1 + plugins/postcss-color-function/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-color-function/README.md | 1 + .../INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-color-hex-alpha/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-color-hex-alpha/README.md | 1 + .../postcss-color-rebeccapurple/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-color-rebeccapurple/README.md | 1 + plugins/postcss-conditional-values/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-conditional-values/README.md | 1 + plugins/postcss-custom-media/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-custom-media/README.md | 1 + plugins/postcss-custom-properties/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-custom-selectors/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-custom-selectors/README.md | 1 + plugins/postcss-design-tokens/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-design-tokens/README.md | 1 + plugins/postcss-dir-pseudo-class/INSTALL.md | 33 +++++++++++++++++++ .../INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-env-function/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-extract/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-extract/README.md | 1 + plugins/postcss-focus-visible/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-focus-within/INSTALL.md | 33 +++++++++++++++++++ .../postcss-font-format-keywords/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-gap-properties/INSTALL.md | 33 +++++++++++++++++++ .../INSTALL.md | 33 +++++++++++++++++++ .../README.md | 1 + plugins/postcss-hwb-function/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-ic-unit/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-image-set-function/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-is-pseudo-class/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-lab-function/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-logical/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-nested-calc/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-nested-calc/README.md | 1 + plugins/postcss-nesting/INSTALL.md | 33 +++++++++++++++++++ .../INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-oklab-function/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-overflow-shorthand/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-place/INSTALL.md | 33 +++++++++++++++++++ .../INSTALL.md | 33 +++++++++++++++++++ .../postcss-pseudo-class-any-link/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-scope-pseudo-class/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-scope-pseudo-class/README.md | 1 + plugins/postcss-selector-not/INSTALL.md | 33 +++++++++++++++++++ plugins/postcss-selector-not/README.md | 1 + .../INSTALL.md | 33 +++++++++++++++++++ .../postcss-stepped-value-functions/README.md | 1 + .../INSTALL.md | 33 +++++++++++++++++++ .../README.md | 1 + .../INSTALL.md | 33 +++++++++++++++++++ .../postcss-trigonometric-functions/README.md | 1 + plugins/postcss-unset-value/INSTALL.md | 33 +++++++++++++++++++ 65 files changed, 1537 insertions(+) diff --git a/.github/bin/generate-docs/install-template.md b/.github/bin/generate-docs/install-template.md index 28f48365e..98380f1f1 100644 --- a/.github/bin/generate-docs/install-template.md +++ b/.github/bin/generate-docs/install-template.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install --save-dev +``` + Use [] in your `postcss.config.json` file: ```json diff --git a/.github/bin/generate-docs/readme.mjs b/.github/bin/generate-docs/readme.mjs index dd7234def..9d3759b4b 100644 --- a/.github/bin/generate-docs/readme.mjs +++ b/.github/bin/generate-docs/readme.mjs @@ -70,6 +70,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/experimental/postcss-nesting/INSTALL.md b/experimental/postcss-nesting/INSTALL.md index a4c136442..a16fae611 100644 --- a/experimental/postcss-nesting/INSTALL.md +++ b/experimental/postcss-nesting/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-nesting-experimental": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-nesting-experimental": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-nesting-experimental --save-dev +``` + Use [PostCSS Nesting] in your `postcss.config.json` file: ```json diff --git a/plugins/css-blank-pseudo/INSTALL.md b/plugins/css-blank-pseudo/INSTALL.md index c0103e3c2..320bbb7fd 100644 --- a/plugins/css-blank-pseudo/INSTALL.md +++ b/plugins/css-blank-pseudo/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "css-blank-pseudo": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "css-blank-pseudo": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install css-blank-pseudo --save-dev +``` + Use [CSS Blank Pseudo] in your `postcss.config.json` file: ```json diff --git a/plugins/css-has-pseudo/INSTALL.md b/plugins/css-has-pseudo/INSTALL.md index fb86b971f..b98b4fffb 100644 --- a/plugins/css-has-pseudo/INSTALL.md +++ b/plugins/css-has-pseudo/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "css-has-pseudo": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "css-has-pseudo": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install css-has-pseudo --save-dev +``` + Use [CSS Has Pseudo] in your `postcss.config.json` file: ```json diff --git a/plugins/css-prefers-color-scheme/INSTALL.md b/plugins/css-prefers-color-scheme/INSTALL.md index 0143ee444..9e480b59b 100644 --- a/plugins/css-prefers-color-scheme/INSTALL.md +++ b/plugins/css-prefers-color-scheme/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "css-prefers-color-scheme": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "css-prefers-color-scheme": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install css-prefers-color-scheme --save-dev +``` + Use [Prefers Color Scheme] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-attribute-case-insensitive/INSTALL.md b/plugins/postcss-attribute-case-insensitive/INSTALL.md index 0147781a8..2293fe8ef 100644 --- a/plugins/postcss-attribute-case-insensitive/INSTALL.md +++ b/plugins/postcss-attribute-case-insensitive/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-attribute-case-insensitive": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-attribute-case-insensitive": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-attribute-case-insensitive --save-dev +``` + Use [PostCSS Attribute Case Insensitive] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-attribute-case-insensitive/README.md b/plugins/postcss-attribute-case-insensitive/README.md index ca4532ec5..6ad388cc1 100644 --- a/plugins/postcss-attribute-case-insensitive/README.md +++ b/plugins/postcss-attribute-case-insensitive/README.md @@ -40,6 +40,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-base-plugin/INSTALL.md b/plugins/postcss-base-plugin/INSTALL.md index 45d406f66..991f68408 100644 --- a/plugins/postcss-base-plugin/INSTALL.md +++ b/plugins/postcss-base-plugin/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-base-plugin": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-base-plugin": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-base-plugin --save-dev +``` + Use [PostCSS Base Plugin] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-base-plugin/README.md b/plugins/postcss-base-plugin/README.md index fdcafc1ac..a15f2b4e1 100644 --- a/plugins/postcss-base-plugin/README.md +++ b/plugins/postcss-base-plugin/README.md @@ -48,6 +48,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-cascade-layers/INSTALL.md b/plugins/postcss-cascade-layers/INSTALL.md index 3dcb8a2b3..0619bae77 100644 --- a/plugins/postcss-cascade-layers/INSTALL.md +++ b/plugins/postcss-cascade-layers/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-cascade-layers": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-cascade-layers": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-cascade-layers --save-dev +``` + Use [PostCSS Cascade Layers] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-cascade-layers/README.md b/plugins/postcss-cascade-layers/README.md index aa50e81c0..78d159243 100644 --- a/plugins/postcss-cascade-layers/README.md +++ b/plugins/postcss-cascade-layers/README.md @@ -108,6 +108,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-color-function/INSTALL.md b/plugins/postcss-color-function/INSTALL.md index 3a38d021c..8bc206931 100644 --- a/plugins/postcss-color-function/INSTALL.md +++ b/plugins/postcss-color-function/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-color-function": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-color-function": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-color-function --save-dev +``` + Use [PostCSS Color Function] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-color-function/README.md b/plugins/postcss-color-function/README.md index fe8637bc0..a5d6d8a44 100644 --- a/plugins/postcss-color-function/README.md +++ b/plugins/postcss-color-function/README.md @@ -49,6 +49,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-color-functional-notation/INSTALL.md b/plugins/postcss-color-functional-notation/INSTALL.md index 90f1fe65a..a46de42cc 100644 --- a/plugins/postcss-color-functional-notation/INSTALL.md +++ b/plugins/postcss-color-functional-notation/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-color-functional-notation": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-color-functional-notation": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-color-functional-notation --save-dev +``` + Use [PostCSS Color Functional Notation] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-color-hex-alpha/INSTALL.md b/plugins/postcss-color-hex-alpha/INSTALL.md index 9ad372fd8..6f24108af 100644 --- a/plugins/postcss-color-hex-alpha/INSTALL.md +++ b/plugins/postcss-color-hex-alpha/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-color-hex-alpha": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-color-hex-alpha": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-color-hex-alpha --save-dev +``` + Use [PostCSS Color Hex Alpha] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-color-hex-alpha/README.md b/plugins/postcss-color-hex-alpha/README.md index b04d0107b..7f1925a96 100644 --- a/plugins/postcss-color-hex-alpha/README.md +++ b/plugins/postcss-color-hex-alpha/README.md @@ -41,6 +41,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-color-rebeccapurple/INSTALL.md b/plugins/postcss-color-rebeccapurple/INSTALL.md index 740744585..760d14979 100644 --- a/plugins/postcss-color-rebeccapurple/INSTALL.md +++ b/plugins/postcss-color-rebeccapurple/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-color-rebeccapurple": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-color-rebeccapurple": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-color-rebeccapurple --save-dev +``` + Use [PostCSS RebeccaPurple] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-color-rebeccapurple/README.md b/plugins/postcss-color-rebeccapurple/README.md index ff1171773..8b751ebdf 100644 --- a/plugins/postcss-color-rebeccapurple/README.md +++ b/plugins/postcss-color-rebeccapurple/README.md @@ -46,6 +46,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-conditional-values/INSTALL.md b/plugins/postcss-conditional-values/INSTALL.md index 95159e98e..e3b096f22 100644 --- a/plugins/postcss-conditional-values/INSTALL.md +++ b/plugins/postcss-conditional-values/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-conditional-values": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-conditional-values": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-conditional-values --save-dev +``` + Use [PostCSS Conditional Values] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-conditional-values/README.md b/plugins/postcss-conditional-values/README.md index add96096b..4f0fa1670 100644 --- a/plugins/postcss-conditional-values/README.md +++ b/plugins/postcss-conditional-values/README.md @@ -64,6 +64,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-custom-media/INSTALL.md b/plugins/postcss-custom-media/INSTALL.md index a9389b9a3..3d7289320 100644 --- a/plugins/postcss-custom-media/INSTALL.md +++ b/plugins/postcss-custom-media/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-custom-media": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-custom-media": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-custom-media --save-dev +``` + Use [PostCSS Custom Media] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-custom-media/README.md b/plugins/postcss-custom-media/README.md index 61714971e..6b6d4d08d 100644 --- a/plugins/postcss-custom-media/README.md +++ b/plugins/postcss-custom-media/README.md @@ -42,6 +42,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-custom-properties/INSTALL.md b/plugins/postcss-custom-properties/INSTALL.md index 8480128a3..6ac5e53b5 100644 --- a/plugins/postcss-custom-properties/INSTALL.md +++ b/plugins/postcss-custom-properties/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-custom-properties": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-custom-properties": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-custom-properties --save-dev +``` + Use [PostCSS Custom Properties] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-custom-selectors/INSTALL.md b/plugins/postcss-custom-selectors/INSTALL.md index b7e699e1f..9b2a301c8 100644 --- a/plugins/postcss-custom-selectors/INSTALL.md +++ b/plugins/postcss-custom-selectors/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-custom-selectors": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-custom-selectors": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-custom-selectors --save-dev +``` + Use [PostCSS Custom Selectors] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-custom-selectors/README.md b/plugins/postcss-custom-selectors/README.md index 091491fcf..bb9811bb7 100644 --- a/plugins/postcss-custom-selectors/README.md +++ b/plugins/postcss-custom-selectors/README.md @@ -42,6 +42,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-design-tokens/INSTALL.md b/plugins/postcss-design-tokens/INSTALL.md index 7a49b31b3..db15115a7 100644 --- a/plugins/postcss-design-tokens/INSTALL.md +++ b/plugins/postcss-design-tokens/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-design-tokens": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-design-tokens": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-design-tokens --save-dev +``` + Use [PostCSS Design Tokens] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-design-tokens/README.md b/plugins/postcss-design-tokens/README.md index 8bdf0d63a..b5889b284 100644 --- a/plugins/postcss-design-tokens/README.md +++ b/plugins/postcss-design-tokens/README.md @@ -63,6 +63,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-dir-pseudo-class/INSTALL.md b/plugins/postcss-dir-pseudo-class/INSTALL.md index 9d396b427..0d7c650d4 100644 --- a/plugins/postcss-dir-pseudo-class/INSTALL.md +++ b/plugins/postcss-dir-pseudo-class/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-dir-pseudo-class": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-dir-pseudo-class": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-dir-pseudo-class --save-dev +``` + Use [PostCSS Dir Pseudo Class] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-double-position-gradients/INSTALL.md b/plugins/postcss-double-position-gradients/INSTALL.md index f17630e0b..829a30089 100644 --- a/plugins/postcss-double-position-gradients/INSTALL.md +++ b/plugins/postcss-double-position-gradients/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-double-position-gradients": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-double-position-gradients": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-double-position-gradients --save-dev +``` + Use [PostCSS Double Position Gradients] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-env-function/INSTALL.md b/plugins/postcss-env-function/INSTALL.md index 2f153d526..cfb6d16dd 100644 --- a/plugins/postcss-env-function/INSTALL.md +++ b/plugins/postcss-env-function/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-env-function": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-env-function": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-env-function --save-dev +``` + Use [PostCSS Environment Variables] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-extract/INSTALL.md b/plugins/postcss-extract/INSTALL.md index 3bb976173..d8513b326 100644 --- a/plugins/postcss-extract/INSTALL.md +++ b/plugins/postcss-extract/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-extract": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-extract": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-extract --save-dev +``` + Use [PostCSS Extract] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-extract/README.md b/plugins/postcss-extract/README.md index 6f67e53ee..79d0f34c8 100644 --- a/plugins/postcss-extract/README.md +++ b/plugins/postcss-extract/README.md @@ -67,6 +67,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-focus-visible/INSTALL.md b/plugins/postcss-focus-visible/INSTALL.md index 0ba28ca7a..e496a3574 100644 --- a/plugins/postcss-focus-visible/INSTALL.md +++ b/plugins/postcss-focus-visible/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-focus-visible": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-focus-visible": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-focus-visible --save-dev +``` + Use [PostCSS Focus Visible] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-focus-within/INSTALL.md b/plugins/postcss-focus-within/INSTALL.md index 492e9e1af..3853e863f 100644 --- a/plugins/postcss-focus-within/INSTALL.md +++ b/plugins/postcss-focus-within/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-focus-within": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-focus-within": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-focus-within --save-dev +``` + Use [PostCSS Focus Within] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-font-format-keywords/INSTALL.md b/plugins/postcss-font-format-keywords/INSTALL.md index 6ecf23e35..d59888a88 100644 --- a/plugins/postcss-font-format-keywords/INSTALL.md +++ b/plugins/postcss-font-format-keywords/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-font-format-keywords": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-font-format-keywords": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-font-format-keywords --save-dev +``` + Use [PostCSS Font Format Keywords] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-gap-properties/INSTALL.md b/plugins/postcss-gap-properties/INSTALL.md index a5b51c304..92eeaad3d 100644 --- a/plugins/postcss-gap-properties/INSTALL.md +++ b/plugins/postcss-gap-properties/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-gap-properties": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-gap-properties": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-gap-properties --save-dev +``` + Use [PostCSS Gap Properties] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-gradients-interpolation-method/INSTALL.md b/plugins/postcss-gradients-interpolation-method/INSTALL.md index 9b5153ad9..2092f0c2f 100644 --- a/plugins/postcss-gradients-interpolation-method/INSTALL.md +++ b/plugins/postcss-gradients-interpolation-method/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-gradients-interpolation-method": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-gradients-interpolation-method": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-gradients-interpolation-method --save-dev +``` + Use [PostCSS Gradients Interpolation Method] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-gradients-interpolation-method/README.md b/plugins/postcss-gradients-interpolation-method/README.md index 6021b4c81..fc3942d36 100644 --- a/plugins/postcss-gradients-interpolation-method/README.md +++ b/plugins/postcss-gradients-interpolation-method/README.md @@ -74,6 +74,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-hwb-function/INSTALL.md b/plugins/postcss-hwb-function/INSTALL.md index 51af51522..f49f87d28 100644 --- a/plugins/postcss-hwb-function/INSTALL.md +++ b/plugins/postcss-hwb-function/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-hwb-function": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-hwb-function": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-hwb-function --save-dev +``` + Use [PostCSS HWB Function] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-ic-unit/INSTALL.md b/plugins/postcss-ic-unit/INSTALL.md index a571f3467..5bc517a4e 100644 --- a/plugins/postcss-ic-unit/INSTALL.md +++ b/plugins/postcss-ic-unit/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-ic-unit": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-ic-unit": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-ic-unit --save-dev +``` + Use [PostCSS IC Unit] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-image-set-function/INSTALL.md b/plugins/postcss-image-set-function/INSTALL.md index d5232879a..0018930f2 100644 --- a/plugins/postcss-image-set-function/INSTALL.md +++ b/plugins/postcss-image-set-function/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-image-set-function": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-image-set-function": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-image-set-function --save-dev +``` + Use [PostCSS image-set() Function] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-is-pseudo-class/INSTALL.md b/plugins/postcss-is-pseudo-class/INSTALL.md index 99debb058..e3d909e78 100644 --- a/plugins/postcss-is-pseudo-class/INSTALL.md +++ b/plugins/postcss-is-pseudo-class/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-is-pseudo-class": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-is-pseudo-class": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-is-pseudo-class --save-dev +``` + Use [PostCSS Is Pseudo] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-lab-function/INSTALL.md b/plugins/postcss-lab-function/INSTALL.md index 85c55ab62..680b333c1 100644 --- a/plugins/postcss-lab-function/INSTALL.md +++ b/plugins/postcss-lab-function/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-lab-function": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-lab-function": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-lab-function --save-dev +``` + Use [PostCSS Lab Function] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-logical/INSTALL.md b/plugins/postcss-logical/INSTALL.md index dd37b444f..4faa4320d 100644 --- a/plugins/postcss-logical/INSTALL.md +++ b/plugins/postcss-logical/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-logical": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-logical": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-logical --save-dev +``` + Use [PostCSS Logical Properties and Values] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-nested-calc/INSTALL.md b/plugins/postcss-nested-calc/INSTALL.md index 609ad19fd..5ee7f2386 100644 --- a/plugins/postcss-nested-calc/INSTALL.md +++ b/plugins/postcss-nested-calc/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-nested-calc": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-nested-calc": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-nested-calc --save-dev +``` + Use [PostCSS Nested Calc] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-nested-calc/README.md b/plugins/postcss-nested-calc/README.md index de8fe1817..cc3e54a68 100644 --- a/plugins/postcss-nested-calc/README.md +++ b/plugins/postcss-nested-calc/README.md @@ -41,6 +41,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-nesting/INSTALL.md b/plugins/postcss-nesting/INSTALL.md index a37016469..9c994593f 100644 --- a/plugins/postcss-nesting/INSTALL.md +++ b/plugins/postcss-nesting/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-nesting": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-nesting": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-nesting --save-dev +``` + Use [PostCSS Nesting] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-normalize-display-values/INSTALL.md b/plugins/postcss-normalize-display-values/INSTALL.md index b8c7c8482..f6b11b72d 100644 --- a/plugins/postcss-normalize-display-values/INSTALL.md +++ b/plugins/postcss-normalize-display-values/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-normalize-display-values": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-normalize-display-values": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-normalize-display-values --save-dev +``` + Use [PostCSS Normalize Display Values] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-oklab-function/INSTALL.md b/plugins/postcss-oklab-function/INSTALL.md index d6f822cc4..a5f75059e 100644 --- a/plugins/postcss-oklab-function/INSTALL.md +++ b/plugins/postcss-oklab-function/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-oklab-function": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-oklab-function": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-oklab-function --save-dev +``` + Use [PostCSS OKLab Function] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-overflow-shorthand/INSTALL.md b/plugins/postcss-overflow-shorthand/INSTALL.md index f1fc59825..823878646 100644 --- a/plugins/postcss-overflow-shorthand/INSTALL.md +++ b/plugins/postcss-overflow-shorthand/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-overflow-shorthand": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-overflow-shorthand": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-overflow-shorthand --save-dev +``` + Use [PostCSS Overflow Shorthand] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-place/INSTALL.md b/plugins/postcss-place/INSTALL.md index 17da23b54..612b56eec 100644 --- a/plugins/postcss-place/INSTALL.md +++ b/plugins/postcss-place/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-place": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-place": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-place --save-dev +``` + Use [PostCSS Place Properties] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-progressive-custom-properties/INSTALL.md b/plugins/postcss-progressive-custom-properties/INSTALL.md index 5c6b46861..70bd77d7b 100644 --- a/plugins/postcss-progressive-custom-properties/INSTALL.md +++ b/plugins/postcss-progressive-custom-properties/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-progressive-custom-properties": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-progressive-custom-properties": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-progressive-custom-properties --save-dev +``` + Use [PostCSS Progressive Custom Properties] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-pseudo-class-any-link/INSTALL.md b/plugins/postcss-pseudo-class-any-link/INSTALL.md index c32f1e3b5..53ec614e1 100644 --- a/plugins/postcss-pseudo-class-any-link/INSTALL.md +++ b/plugins/postcss-pseudo-class-any-link/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-pseudo-class-any-link": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-pseudo-class-any-link": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-pseudo-class-any-link --save-dev +``` + Use [PostCSS Pseudo Class Any Link] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-scope-pseudo-class/INSTALL.md b/plugins/postcss-scope-pseudo-class/INSTALL.md index c19849565..4a3e7ccb3 100644 --- a/plugins/postcss-scope-pseudo-class/INSTALL.md +++ b/plugins/postcss-scope-pseudo-class/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-scope-pseudo-class": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-scope-pseudo-class": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-scope-pseudo-class --save-dev +``` + Use [PostCSS Scope Pseudo Class] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-scope-pseudo-class/README.md b/plugins/postcss-scope-pseudo-class/README.md index 92551b5af..74857181d 100644 --- a/plugins/postcss-scope-pseudo-class/README.md +++ b/plugins/postcss-scope-pseudo-class/README.md @@ -40,6 +40,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-selector-not/INSTALL.md b/plugins/postcss-selector-not/INSTALL.md index 3295cbcb7..15091eadc 100644 --- a/plugins/postcss-selector-not/INSTALL.md +++ b/plugins/postcss-selector-not/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "postcss-selector-not": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "postcss-selector-not": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install postcss-selector-not --save-dev +``` + Use [PostCSS Selector Not] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-selector-not/README.md b/plugins/postcss-selector-not/README.md index 0ec2b28d3..4878bee76 100644 --- a/plugins/postcss-selector-not/README.md +++ b/plugins/postcss-selector-not/README.md @@ -43,6 +43,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-stepped-value-functions/INSTALL.md b/plugins/postcss-stepped-value-functions/INSTALL.md index 3ecd596da..b08b20f9a 100644 --- a/plugins/postcss-stepped-value-functions/INSTALL.md +++ b/plugins/postcss-stepped-value-functions/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-stepped-value-functions": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-stepped-value-functions": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-stepped-value-functions --save-dev +``` + Use [PostCSS Stepped Value Functions] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-stepped-value-functions/README.md b/plugins/postcss-stepped-value-functions/README.md index 10eeae51d..2ce14585f 100644 --- a/plugins/postcss-stepped-value-functions/README.md +++ b/plugins/postcss-stepped-value-functions/README.md @@ -52,6 +52,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-text-decoration-shorthand/INSTALL.md b/plugins/postcss-text-decoration-shorthand/INSTALL.md index b892ac604..59f2d8d38 100644 --- a/plugins/postcss-text-decoration-shorthand/INSTALL.md +++ b/plugins/postcss-text-decoration-shorthand/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-text-decoration-shorthand": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-text-decoration-shorthand": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-text-decoration-shorthand --save-dev +``` + Use [PostCSS Text Decoration Shorthand] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-text-decoration-shorthand/README.md b/plugins/postcss-text-decoration-shorthand/README.md index 4a10f17ca..8dde8e056 100644 --- a/plugins/postcss-text-decoration-shorthand/README.md +++ b/plugins/postcss-text-decoration-shorthand/README.md @@ -42,6 +42,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-trigonometric-functions/INSTALL.md b/plugins/postcss-trigonometric-functions/INSTALL.md index 5bdee3ea3..71a5fb682 100644 --- a/plugins/postcss-trigonometric-functions/INSTALL.md +++ b/plugins/postcss-trigonometric-functions/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-trigonometric-functions": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-trigonometric-functions": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-trigonometric-functions --save-dev +``` + Use [PostCSS Trigonometric Functions] in your `postcss.config.json` file: ```json diff --git a/plugins/postcss-trigonometric-functions/README.md b/plugins/postcss-trigonometric-functions/README.md index ce340582f..f02230107 100644 --- a/plugins/postcss-trigonometric-functions/README.md +++ b/plugins/postcss-trigonometric-functions/README.md @@ -64,6 +64,7 @@ instructions for: - [Node](INSTALL.md#node) - [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) - [Webpack](INSTALL.md#webpack) - [Create React App](INSTALL.md#create-react-app) - [Next.js](INSTALL.md#nextjs) diff --git a/plugins/postcss-unset-value/INSTALL.md b/plugins/postcss-unset-value/INSTALL.md index 97359c647..476985152 100644 --- a/plugins/postcss-unset-value/INSTALL.md +++ b/plugins/postcss-unset-value/INSTALL.md @@ -4,6 +4,7 @@ - [Node](#node) - [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) - [Webpack](#webpack) - [Create React App](#create-react-app) - [Next.js](#nextjs) @@ -49,6 +50,34 @@ module.exports = { } ``` +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-unset-value": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-unset-value": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + ## Webpack _Webpack version 5_ @@ -121,6 +150,10 @@ module.exports = config => reactAppRewirePostcss(config, { Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) +```bash +npm install @csstools/postcss-unset-value --save-dev +``` + Use [PostCSS Unset Value] in your `postcss.config.json` file: ```json From 5ff6c6fb118d19d2827e8a7a2e0f5e1ca6402aea Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Thu, 17 Nov 2022 19:13:21 +0100 Subject: [PATCH 4/5] fix --- .github/bin/generate-docs/install-template.md | 4 ++++ experimental/postcss-nesting/INSTALL.md | 4 ++++ plugins/css-blank-pseudo/INSTALL.md | 4 ++++ plugins/css-has-pseudo/INSTALL.md | 4 ++++ plugins/css-prefers-color-scheme/INSTALL.md | 4 ++++ plugins/postcss-attribute-case-insensitive/INSTALL.md | 4 ++++ plugins/postcss-base-plugin/INSTALL.md | 4 ++++ plugins/postcss-cascade-layers/INSTALL.md | 4 ++++ plugins/postcss-color-function/INSTALL.md | 4 ++++ plugins/postcss-color-functional-notation/INSTALL.md | 4 ++++ plugins/postcss-color-hex-alpha/INSTALL.md | 4 ++++ plugins/postcss-color-rebeccapurple/INSTALL.md | 4 ++++ plugins/postcss-conditional-values/INSTALL.md | 4 ++++ plugins/postcss-custom-media/INSTALL.md | 4 ++++ plugins/postcss-custom-properties/INSTALL.md | 4 ++++ plugins/postcss-custom-selectors/INSTALL.md | 4 ++++ plugins/postcss-design-tokens/INSTALL.md | 4 ++++ plugins/postcss-dir-pseudo-class/INSTALL.md | 4 ++++ plugins/postcss-double-position-gradients/INSTALL.md | 4 ++++ plugins/postcss-env-function/INSTALL.md | 4 ++++ plugins/postcss-extract/INSTALL.md | 4 ++++ plugins/postcss-focus-visible/INSTALL.md | 4 ++++ plugins/postcss-focus-within/INSTALL.md | 4 ++++ plugins/postcss-font-format-keywords/INSTALL.md | 4 ++++ plugins/postcss-gap-properties/INSTALL.md | 4 ++++ plugins/postcss-gradients-interpolation-method/INSTALL.md | 4 ++++ plugins/postcss-hwb-function/INSTALL.md | 4 ++++ plugins/postcss-ic-unit/INSTALL.md | 4 ++++ plugins/postcss-image-set-function/INSTALL.md | 4 ++++ plugins/postcss-is-pseudo-class/INSTALL.md | 4 ++++ plugins/postcss-lab-function/INSTALL.md | 4 ++++ plugins/postcss-logical/INSTALL.md | 4 ++++ plugins/postcss-nested-calc/INSTALL.md | 4 ++++ plugins/postcss-nesting/INSTALL.md | 4 ++++ plugins/postcss-normalize-display-values/INSTALL.md | 4 ++++ plugins/postcss-oklab-function/INSTALL.md | 4 ++++ plugins/postcss-overflow-shorthand/INSTALL.md | 4 ++++ plugins/postcss-place/INSTALL.md | 4 ++++ plugins/postcss-progressive-custom-properties/INSTALL.md | 4 ++++ plugins/postcss-pseudo-class-any-link/INSTALL.md | 4 ++++ plugins/postcss-scope-pseudo-class/INSTALL.md | 4 ++++ plugins/postcss-selector-not/INSTALL.md | 4 ++++ plugins/postcss-stepped-value-functions/INSTALL.md | 4 ++++ plugins/postcss-text-decoration-shorthand/INSTALL.md | 4 ++++ plugins/postcss-trigonometric-functions/INSTALL.md | 4 ++++ plugins/postcss-unset-value/INSTALL.md | 4 ++++ 46 files changed, 184 insertions(+) diff --git a/.github/bin/generate-docs/install-template.md b/.github/bin/generate-docs/install-template.md index 98380f1f1..8053e6271 100644 --- a/.github/bin/generate-docs/install-template.md +++ b/.github/bin/generate-docs/install-template.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install --save-dev +``` + `package.json`: ```json diff --git a/experimental/postcss-nesting/INSTALL.md b/experimental/postcss-nesting/INSTALL.md index a16fae611..ad5193013 100644 --- a/experimental/postcss-nesting/INSTALL.md +++ b/experimental/postcss-nesting/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-nesting-experimental --save-dev +``` + `package.json`: ```json diff --git a/plugins/css-blank-pseudo/INSTALL.md b/plugins/css-blank-pseudo/INSTALL.md index 320bbb7fd..17641325e 100644 --- a/plugins/css-blank-pseudo/INSTALL.md +++ b/plugins/css-blank-pseudo/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install css-blank-pseudo --save-dev +``` + `package.json`: ```json diff --git a/plugins/css-has-pseudo/INSTALL.md b/plugins/css-has-pseudo/INSTALL.md index b98b4fffb..812e4e876 100644 --- a/plugins/css-has-pseudo/INSTALL.md +++ b/plugins/css-has-pseudo/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install css-has-pseudo --save-dev +``` + `package.json`: ```json diff --git a/plugins/css-prefers-color-scheme/INSTALL.md b/plugins/css-prefers-color-scheme/INSTALL.md index 9e480b59b..e54280071 100644 --- a/plugins/css-prefers-color-scheme/INSTALL.md +++ b/plugins/css-prefers-color-scheme/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install css-prefers-color-scheme --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-attribute-case-insensitive/INSTALL.md b/plugins/postcss-attribute-case-insensitive/INSTALL.md index 2293fe8ef..b819eed12 100644 --- a/plugins/postcss-attribute-case-insensitive/INSTALL.md +++ b/plugins/postcss-attribute-case-insensitive/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-attribute-case-insensitive --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-base-plugin/INSTALL.md b/plugins/postcss-base-plugin/INSTALL.md index 991f68408..865c79850 100644 --- a/plugins/postcss-base-plugin/INSTALL.md +++ b/plugins/postcss-base-plugin/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-base-plugin --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-cascade-layers/INSTALL.md b/plugins/postcss-cascade-layers/INSTALL.md index 0619bae77..e0cb2be5f 100644 --- a/plugins/postcss-cascade-layers/INSTALL.md +++ b/plugins/postcss-cascade-layers/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-cascade-layers --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-color-function/INSTALL.md b/plugins/postcss-color-function/INSTALL.md index 8bc206931..d3ba4e8a9 100644 --- a/plugins/postcss-color-function/INSTALL.md +++ b/plugins/postcss-color-function/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-color-function --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-color-functional-notation/INSTALL.md b/plugins/postcss-color-functional-notation/INSTALL.md index a46de42cc..61291897b 100644 --- a/plugins/postcss-color-functional-notation/INSTALL.md +++ b/plugins/postcss-color-functional-notation/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-color-functional-notation --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-color-hex-alpha/INSTALL.md b/plugins/postcss-color-hex-alpha/INSTALL.md index 6f24108af..94e439d0c 100644 --- a/plugins/postcss-color-hex-alpha/INSTALL.md +++ b/plugins/postcss-color-hex-alpha/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-color-hex-alpha --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-color-rebeccapurple/INSTALL.md b/plugins/postcss-color-rebeccapurple/INSTALL.md index 760d14979..8cafb4253 100644 --- a/plugins/postcss-color-rebeccapurple/INSTALL.md +++ b/plugins/postcss-color-rebeccapurple/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-color-rebeccapurple --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-conditional-values/INSTALL.md b/plugins/postcss-conditional-values/INSTALL.md index e3b096f22..a255feba0 100644 --- a/plugins/postcss-conditional-values/INSTALL.md +++ b/plugins/postcss-conditional-values/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-conditional-values --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-custom-media/INSTALL.md b/plugins/postcss-custom-media/INSTALL.md index 3d7289320..0f3598f29 100644 --- a/plugins/postcss-custom-media/INSTALL.md +++ b/plugins/postcss-custom-media/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-custom-media --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-custom-properties/INSTALL.md b/plugins/postcss-custom-properties/INSTALL.md index 6ac5e53b5..17e15cb65 100644 --- a/plugins/postcss-custom-properties/INSTALL.md +++ b/plugins/postcss-custom-properties/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-custom-properties --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-custom-selectors/INSTALL.md b/plugins/postcss-custom-selectors/INSTALL.md index 9b2a301c8..3ec4b6b55 100644 --- a/plugins/postcss-custom-selectors/INSTALL.md +++ b/plugins/postcss-custom-selectors/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-custom-selectors --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-design-tokens/INSTALL.md b/plugins/postcss-design-tokens/INSTALL.md index db15115a7..dafd19dcd 100644 --- a/plugins/postcss-design-tokens/INSTALL.md +++ b/plugins/postcss-design-tokens/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-design-tokens --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-dir-pseudo-class/INSTALL.md b/plugins/postcss-dir-pseudo-class/INSTALL.md index 0d7c650d4..2d896eb6b 100644 --- a/plugins/postcss-dir-pseudo-class/INSTALL.md +++ b/plugins/postcss-dir-pseudo-class/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-dir-pseudo-class --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-double-position-gradients/INSTALL.md b/plugins/postcss-double-position-gradients/INSTALL.md index 829a30089..6769bc252 100644 --- a/plugins/postcss-double-position-gradients/INSTALL.md +++ b/plugins/postcss-double-position-gradients/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-double-position-gradients --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-env-function/INSTALL.md b/plugins/postcss-env-function/INSTALL.md index cfb6d16dd..e7cd09edd 100644 --- a/plugins/postcss-env-function/INSTALL.md +++ b/plugins/postcss-env-function/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-env-function --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-extract/INSTALL.md b/plugins/postcss-extract/INSTALL.md index d8513b326..62aa4f02a 100644 --- a/plugins/postcss-extract/INSTALL.md +++ b/plugins/postcss-extract/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-extract --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-focus-visible/INSTALL.md b/plugins/postcss-focus-visible/INSTALL.md index e496a3574..6379e6f56 100644 --- a/plugins/postcss-focus-visible/INSTALL.md +++ b/plugins/postcss-focus-visible/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-focus-visible --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-focus-within/INSTALL.md b/plugins/postcss-focus-within/INSTALL.md index 3853e863f..bd195ac6e 100644 --- a/plugins/postcss-focus-within/INSTALL.md +++ b/plugins/postcss-focus-within/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-focus-within --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-font-format-keywords/INSTALL.md b/plugins/postcss-font-format-keywords/INSTALL.md index d59888a88..764ba51fd 100644 --- a/plugins/postcss-font-format-keywords/INSTALL.md +++ b/plugins/postcss-font-format-keywords/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-font-format-keywords --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-gap-properties/INSTALL.md b/plugins/postcss-gap-properties/INSTALL.md index 92eeaad3d..2c323b5b3 100644 --- a/plugins/postcss-gap-properties/INSTALL.md +++ b/plugins/postcss-gap-properties/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-gap-properties --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-gradients-interpolation-method/INSTALL.md b/plugins/postcss-gradients-interpolation-method/INSTALL.md index 2092f0c2f..3b010fe48 100644 --- a/plugins/postcss-gradients-interpolation-method/INSTALL.md +++ b/plugins/postcss-gradients-interpolation-method/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-gradients-interpolation-method --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-hwb-function/INSTALL.md b/plugins/postcss-hwb-function/INSTALL.md index f49f87d28..114108ad6 100644 --- a/plugins/postcss-hwb-function/INSTALL.md +++ b/plugins/postcss-hwb-function/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-hwb-function --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-ic-unit/INSTALL.md b/plugins/postcss-ic-unit/INSTALL.md index 5bc517a4e..000cb18ff 100644 --- a/plugins/postcss-ic-unit/INSTALL.md +++ b/plugins/postcss-ic-unit/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-ic-unit --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-image-set-function/INSTALL.md b/plugins/postcss-image-set-function/INSTALL.md index 0018930f2..e9e22440f 100644 --- a/plugins/postcss-image-set-function/INSTALL.md +++ b/plugins/postcss-image-set-function/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-image-set-function --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-is-pseudo-class/INSTALL.md b/plugins/postcss-is-pseudo-class/INSTALL.md index e3d909e78..9feae53c3 100644 --- a/plugins/postcss-is-pseudo-class/INSTALL.md +++ b/plugins/postcss-is-pseudo-class/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-is-pseudo-class --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-lab-function/INSTALL.md b/plugins/postcss-lab-function/INSTALL.md index 680b333c1..cbf830785 100644 --- a/plugins/postcss-lab-function/INSTALL.md +++ b/plugins/postcss-lab-function/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-lab-function --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-logical/INSTALL.md b/plugins/postcss-logical/INSTALL.md index 4faa4320d..8c148ae64 100644 --- a/plugins/postcss-logical/INSTALL.md +++ b/plugins/postcss-logical/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-logical --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-nested-calc/INSTALL.md b/plugins/postcss-nested-calc/INSTALL.md index 5ee7f2386..9ece96e6a 100644 --- a/plugins/postcss-nested-calc/INSTALL.md +++ b/plugins/postcss-nested-calc/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-nested-calc --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-nesting/INSTALL.md b/plugins/postcss-nesting/INSTALL.md index 9c994593f..9ad518f69 100644 --- a/plugins/postcss-nesting/INSTALL.md +++ b/plugins/postcss-nesting/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-nesting --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-normalize-display-values/INSTALL.md b/plugins/postcss-normalize-display-values/INSTALL.md index f6b11b72d..2cdafc510 100644 --- a/plugins/postcss-normalize-display-values/INSTALL.md +++ b/plugins/postcss-normalize-display-values/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-normalize-display-values --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-oklab-function/INSTALL.md b/plugins/postcss-oklab-function/INSTALL.md index a5f75059e..889fd302d 100644 --- a/plugins/postcss-oklab-function/INSTALL.md +++ b/plugins/postcss-oklab-function/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-oklab-function --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-overflow-shorthand/INSTALL.md b/plugins/postcss-overflow-shorthand/INSTALL.md index 823878646..9b6be1870 100644 --- a/plugins/postcss-overflow-shorthand/INSTALL.md +++ b/plugins/postcss-overflow-shorthand/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-overflow-shorthand --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-place/INSTALL.md b/plugins/postcss-place/INSTALL.md index 612b56eec..6ca16b121 100644 --- a/plugins/postcss-place/INSTALL.md +++ b/plugins/postcss-place/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-place --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-progressive-custom-properties/INSTALL.md b/plugins/postcss-progressive-custom-properties/INSTALL.md index 70bd77d7b..2f7271614 100644 --- a/plugins/postcss-progressive-custom-properties/INSTALL.md +++ b/plugins/postcss-progressive-custom-properties/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-progressive-custom-properties --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-pseudo-class-any-link/INSTALL.md b/plugins/postcss-pseudo-class-any-link/INSTALL.md index 53ec614e1..7f84c7252 100644 --- a/plugins/postcss-pseudo-class-any-link/INSTALL.md +++ b/plugins/postcss-pseudo-class-any-link/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-pseudo-class-any-link --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-scope-pseudo-class/INSTALL.md b/plugins/postcss-scope-pseudo-class/INSTALL.md index 4a3e7ccb3..84ce22192 100644 --- a/plugins/postcss-scope-pseudo-class/INSTALL.md +++ b/plugins/postcss-scope-pseudo-class/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-scope-pseudo-class --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-selector-not/INSTALL.md b/plugins/postcss-selector-not/INSTALL.md index 15091eadc..22eb597d3 100644 --- a/plugins/postcss-selector-not/INSTALL.md +++ b/plugins/postcss-selector-not/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install postcss-selector-not --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-stepped-value-functions/INSTALL.md b/plugins/postcss-stepped-value-functions/INSTALL.md index b08b20f9a..edd84b230 100644 --- a/plugins/postcss-stepped-value-functions/INSTALL.md +++ b/plugins/postcss-stepped-value-functions/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-stepped-value-functions --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-text-decoration-shorthand/INSTALL.md b/plugins/postcss-text-decoration-shorthand/INSTALL.md index 59f2d8d38..b1ee42266 100644 --- a/plugins/postcss-text-decoration-shorthand/INSTALL.md +++ b/plugins/postcss-text-decoration-shorthand/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-text-decoration-shorthand --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-trigonometric-functions/INSTALL.md b/plugins/postcss-trigonometric-functions/INSTALL.md index 71a5fb682..b75be82f6 100644 --- a/plugins/postcss-trigonometric-functions/INSTALL.md +++ b/plugins/postcss-trigonometric-functions/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-trigonometric-functions --save-dev +``` + `package.json`: ```json diff --git a/plugins/postcss-unset-value/INSTALL.md b/plugins/postcss-unset-value/INSTALL.md index 476985152..cea2e8442 100644 --- a/plugins/postcss-unset-value/INSTALL.md +++ b/plugins/postcss-unset-value/INSTALL.md @@ -54,6 +54,10 @@ module.exports = { If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). +```bash +npm install @csstools/postcss-unset-value --save-dev +``` + `package.json`: ```json From e2295fb66094504c092a4fdbfabe5e21b3acfbec Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Fri, 18 Nov 2022 13:24:26 +0100 Subject: [PATCH 5/5] some cleanup --- .github/bin/generate-docs/readme.mjs | 5 +---- plugins/postcss-attribute-case-insensitive/README.md | 5 +---- plugins/postcss-base-plugin/README.md | 5 +---- plugins/postcss-cascade-layers/README.md | 5 +---- plugins/postcss-color-function/README.md | 5 +---- plugins/postcss-color-hex-alpha/README.md | 5 +---- plugins/postcss-color-rebeccapurple/README.md | 5 +---- plugins/postcss-conditional-values/README.md | 5 +---- plugins/postcss-custom-media/README.md | 5 +---- plugins/postcss-custom-selectors/README.md | 5 +---- plugins/postcss-design-tokens/README.md | 5 +---- plugins/postcss-extract/README.md | 5 +---- plugins/postcss-gradients-interpolation-method/README.md | 5 +---- plugins/postcss-nested-calc/README.md | 5 +---- plugins/postcss-scope-pseudo-class/README.md | 5 +---- plugins/postcss-selector-not/README.md | 5 +---- plugins/postcss-stepped-value-functions/README.md | 5 +---- plugins/postcss-text-decoration-shorthand/README.md | 5 +---- plugins/postcss-trigonometric-functions/README.md | 5 +---- 19 files changed, 19 insertions(+), 76 deletions(-) diff --git a/.github/bin/generate-docs/readme.mjs b/.github/bin/generate-docs/readme.mjs index 9d3759b4b..4d8b9167c 100644 --- a/.github/bin/generate-docs/readme.mjs +++ b/.github/bin/generate-docs/readme.mjs @@ -33,7 +33,7 @@ readmeDoc = readmeDoc.replace(` readmeDoc = readmeDoc.replaceAll('', corsTemplate); // Insert "Header" section -readmeDoc = readmeDoc.replace('

', `# [][postcss] +readmeDoc = readmeDoc.replace('

', `# [][PostCSS] ` + '[][npm-url] ' + `${ @@ -87,10 +87,7 @@ ${ [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/`); readmeDoc = readmeDoc.replaceAll('', packageJSONInfo.csstools.cssdbId); diff --git a/plugins/postcss-attribute-case-insensitive/README.md b/plugins/postcss-attribute-case-insensitive/README.md index 6ad388cc1..c32023217 100644 --- a/plugins/postcss-attribute-case-insensitive/README.md +++ b/plugins/postcss-attribute-case-insensitive/README.md @@ -1,4 +1,4 @@ -# PostCSS Attribute Case Insensitive [][postcss] +# PostCSS Attribute Case Insensitive [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -52,9 +52,6 @@ instructions for: [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-attribute-case-insensitive -[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 Attribute Case Insensitive]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-attribute-case-insensitive [Case Insensitive Attribute]: https://www.w3.org/TR/selectors4/#attribute-case diff --git a/plugins/postcss-base-plugin/README.md b/plugins/postcss-base-plugin/README.md index a15f2b4e1..b62c11def 100644 --- a/plugins/postcss-base-plugin/README.md +++ b/plugins/postcss-base-plugin/README.md @@ -1,4 +1,4 @@ -# PostCSS Base Plugin [][postcss] +# PostCSS Base Plugin [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -92,9 +92,6 @@ postcssBasePlugin({ preserve: true }) [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-cascade-layers/README.md b/plugins/postcss-cascade-layers/README.md index 78d159243..a6917be62 100644 --- a/plugins/postcss-cascade-layers/README.md +++ b/plugins/postcss-cascade-layers/README.md @@ -1,4 +1,4 @@ -# PostCSS Cascade Layers [][postcss] +# PostCSS Cascade Layers [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -193,10 +193,7 @@ The contributors to this plugin were [Olu Niyi-Awosusi] and [Sana Javed] from [O [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-cascade-layers -[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 Cascade Layers]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers [Cascade Layers Specification]: https://www.w3.org/TR/css-cascade-5/#layering [A Complete Guide to CSS Cascade Layers]: https://css-tricks.com/css-cascade-layers/ diff --git a/plugins/postcss-color-function/README.md b/plugins/postcss-color-function/README.md index a5d6d8a44..fb556c5fe 100644 --- a/plugins/postcss-color-function/README.md +++ b/plugins/postcss-color-function/README.md @@ -1,4 +1,4 @@ -# PostCSS Color Function [][postcss] +# PostCSS Color Function [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -168,9 +168,6 @@ 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 -[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-hex-alpha/README.md b/plugins/postcss-color-hex-alpha/README.md index 7f1925a96..77cedb62b 100644 --- a/plugins/postcss-color-hex-alpha/README.md +++ b/plugins/postcss-color-hex-alpha/README.md @@ -1,4 +1,4 @@ -# PostCSS Color Hex Alpha [][postcss] +# PostCSS Color Hex Alpha [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -77,9 +77,6 @@ body { [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-color-hex-alpha -[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 Hex Alpha]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-hex-alpha [CSS Color Module]: https://www.w3.org/TR/css-color-4/#hex-notation diff --git a/plugins/postcss-color-rebeccapurple/README.md b/plugins/postcss-color-rebeccapurple/README.md index 8b751ebdf..d97e2b46b 100644 --- a/plugins/postcss-color-rebeccapurple/README.md +++ b/plugins/postcss-color-rebeccapurple/README.md @@ -1,4 +1,4 @@ -# PostCSS RebeccaPurple [][postcss] +# PostCSS RebeccaPurple [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -82,8 +82,5 @@ postcssRebeccaPurple({ preserve: true }) [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-color-rebeccapurple -[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 RebeccaPurple]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-rebeccapurple diff --git a/plugins/postcss-conditional-values/README.md b/plugins/postcss-conditional-values/README.md index 4f0fa1670..4ce36ec56 100644 --- a/plugins/postcss-conditional-values/README.md +++ b/plugins/postcss-conditional-values/README.md @@ -1,4 +1,4 @@ -# PostCSS Conditional Values [][postcss] +# PostCSS Conditional Values [][PostCSS] [][npm-url] [][cli-url] [][discord] @@ -148,8 +148,5 @@ This makes it possible to control the outcome of conditions with javascript, inl [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-conditional-values -[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 Conditional Values]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-conditional-values diff --git a/plugins/postcss-custom-media/README.md b/plugins/postcss-custom-media/README.md index 6b6d4d08d..ec8f4499b 100644 --- a/plugins/postcss-custom-media/README.md +++ b/plugins/postcss-custom-media/README.md @@ -1,4 +1,4 @@ -# PostCSS Custom Media [][postcss] +# PostCSS Custom Media [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -169,9 +169,6 @@ See example exports written to [CSS](test/export-media.css), [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-custom-media -[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 Custom Media]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media [Custom Media Specification]: https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media diff --git a/plugins/postcss-custom-selectors/README.md b/plugins/postcss-custom-selectors/README.md index bb9811bb7..d1a38ae79 100644 --- a/plugins/postcss-custom-selectors/README.md +++ b/plugins/postcss-custom-selectors/README.md @@ -1,4 +1,4 @@ -# PostCSS Custom Selectors [][postcss] +# PostCSS Custom Selectors [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -164,9 +164,6 @@ postcssCustomSelectors({ [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-custom-selectors -[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 Custom Selectors]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-selectors [Custom Selectors Specification]: https://drafts.csswg.org/css-extensions/#custom-selectors diff --git a/plugins/postcss-design-tokens/README.md b/plugins/postcss-design-tokens/README.md index b5889b284..157c91b64 100644 --- a/plugins/postcss-design-tokens/README.md +++ b/plugins/postcss-design-tokens/README.md @@ -1,4 +1,4 @@ -# PostCSS Design Tokens [][postcss] +# PostCSS Design Tokens [][PostCSS] [][npm-url] [][cli-url] [][discord] @@ -361,10 +361,7 @@ When a design token is unit-less any `unit` can be assigned with `to`. [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-design-tokens -[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 Design Tokens]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-design-tokens [Why we think PostCSS Design Tokens is needed]: https://github.com/csstools/postcss-plugins/wiki/Why-we-think-PostCSS-Design-Tokens-is-needed [About Design Tokens (Adobe Spectrum)]: https://spectrum.adobe.com/page/design-tokens/ diff --git a/plugins/postcss-extract/README.md b/plugins/postcss-extract/README.md index 79d0f34c8..097d3e3c6 100644 --- a/plugins/postcss-extract/README.md +++ b/plugins/postcss-extract/README.md @@ -1,4 +1,4 @@ -# PostCSS Extract [][postcss] +# PostCSS Extract [][PostCSS] [][npm-url] [][cli-url] [][discord] @@ -141,8 +141,5 @@ The order of plugins is still respected if multiple plugins use `Once`|`OnceExit [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-extract -[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 Extract]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-extract diff --git a/plugins/postcss-gradients-interpolation-method/README.md b/plugins/postcss-gradients-interpolation-method/README.md index fc3942d36..b945cb4ba 100644 --- a/plugins/postcss-gradients-interpolation-method/README.md +++ b/plugins/postcss-gradients-interpolation-method/README.md @@ -1,4 +1,4 @@ -# PostCSS Gradients Interpolation Method [][postcss] +# PostCSS Gradients Interpolation Method [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -159,9 +159,6 @@ _Custom properties do not fallback to the previous declaration_ [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-gradients-interpolation-method -[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 Gradients Interpolation Method]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method [CSS Specification]: https://drafts.csswg.org/css-images-4/#linear-gradients diff --git a/plugins/postcss-nested-calc/README.md b/plugins/postcss-nested-calc/README.md index cc3e54a68..498d2581a 100644 --- a/plugins/postcss-nested-calc/README.md +++ b/plugins/postcss-nested-calc/README.md @@ -1,4 +1,4 @@ -# PostCSS Nested Calc [][postcss] +# PostCSS Nested Calc [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -76,9 +76,6 @@ postcssNestedCalc({ preserve: false }) [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-nested-calc -[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 Nested Calc]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nested-calc [CSS Values and Units 4 specification]: https://www.w3.org/TR/css-values/#calc-func diff --git a/plugins/postcss-scope-pseudo-class/README.md b/plugins/postcss-scope-pseudo-class/README.md index 74857181d..b85285e94 100644 --- a/plugins/postcss-scope-pseudo-class/README.md +++ b/plugins/postcss-scope-pseudo-class/README.md @@ -1,4 +1,4 @@ -# PostCSS Scope Pseudo Class [][postcss] +# PostCSS Scope Pseudo Class [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -78,9 +78,6 @@ postcssScopePseudoClass({ preserve: true }) [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-scope-pseudo-class -[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 Scope Pseudo Class]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-scope-pseudo-class [Selectors 4 specification]: https://www.w3.org/TR/selectors-4/#the-scope-pseudo diff --git a/plugins/postcss-selector-not/README.md b/plugins/postcss-selector-not/README.md index 4878bee76..77889cf2c 100644 --- a/plugins/postcss-selector-not/README.md +++ b/plugins/postcss-selector-not/README.md @@ -1,4 +1,4 @@ -# PostCSS Selector Not [][postcss] +# PostCSS Selector Not [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -55,9 +55,6 @@ instructions for: [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/postcss-selector-not -[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 Selector Not]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-selector-not [Selectors 4 Specification]: https://www.w3.org/TR/selectors-4/#negation-pseudo diff --git a/plugins/postcss-stepped-value-functions/README.md b/plugins/postcss-stepped-value-functions/README.md index 2ce14585f..c7c9f39a7 100644 --- a/plugins/postcss-stepped-value-functions/README.md +++ b/plugins/postcss-stepped-value-functions/README.md @@ -1,4 +1,4 @@ -# PostCSS Stepped Value Functions [][postcss] +# PostCSS Stepped Value Functions [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -132,9 +132,6 @@ Will produce on the terminal: [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-stepped-value-functions -[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 Stepped Value Functions]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-stepped-value-functions [CSS Values 4]: https://www.w3.org/TR/css-values-4/#round-func diff --git a/plugins/postcss-text-decoration-shorthand/README.md b/plugins/postcss-text-decoration-shorthand/README.md index 8dde8e056..7b4809c0d 100644 --- a/plugins/postcss-text-decoration-shorthand/README.md +++ b/plugins/postcss-text-decoration-shorthand/README.md @@ -1,4 +1,4 @@ -# PostCSS Text Decoration Shorthand [][postcss] +# PostCSS Text Decoration Shorthand [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -80,9 +80,6 @@ postcssTextDecorationShorthand({ preserve: true }) [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-text-decoration-shorthand -[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 Text Decoration Shorthand]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-text-decoration-shorthand [Text Decoration Specification]: https://drafts.csswg.org/css-text-decor-4/#text-decoration-property diff --git a/plugins/postcss-trigonometric-functions/README.md b/plugins/postcss-trigonometric-functions/README.md index f02230107..88b0f2507 100644 --- a/plugins/postcss-trigonometric-functions/README.md +++ b/plugins/postcss-trigonometric-functions/README.md @@ -1,4 +1,4 @@ -# PostCSS Trigonometric Functions [][postcss] +# PostCSS Trigonometric Functions [][PostCSS] [][npm-url] [][css-url] [][cli-url] [][discord] @@ -156,9 +156,6 @@ postcssTrigonometricFunctions({ preserve: true }) [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-trigonometric-functions -[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 Trigonometric Functions]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-trigonometric-functions [CSS Values 4]: https://www.w3.org/TR/css-values-4/#trig-funcs