more install instructions (#710)

* next.js install instructions

* fix

* postcss-load-config

* fix

* some cleanup

Author: romainmenke

.github/bin/generate-docs/install-template.md

@@ -2,8 +2,14 @@
 
 [<humanReadableName>] 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)
+- [PostCSS Load Config](#postcss-load-config)
+- [Webpack](#webpack)
+- [Create React App](#create-react-app)
+- [Next.js](#nextjs)
+- [Gulp](#gulp)
+- [Grunt](#grunt)
 
 ## Node
 
@@ -44,6 +50,38 @@ module.exports = {
 }
 ```
 
+## PostCSS Load Config
+
+If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config).
+
+```bash
+npm install <packageName> --save-dev
+```
+
+`package.json`:
+
+```json
+{
+	"postcss": {
+		"plugins": {
+			"<packageName>": {}
+		}
+	}
+}
+```
+
+`.postcssrc.json`:
+
+```json
+{
+	"plugins": {
+		"<packageName>": {}
+	}
+}
+```
+
+_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._
+
 ## Webpack
 
 _Webpack version 5_
@@ -112,6 +150,37 @@ 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)
+
+```bash
+npm install <packageName> --save-dev
+```
+
+Use [<humanReadableName>] in your `postcss.config.json` file:
+
+```json
+{
+	"plugins": [
+		"<packageName>"
+	]
+}
+```
+
+```json5
+{
+	"plugins": [
+		[
+			"<packageName>",
+			{
+				// Optionally add plugin options
+			}
+		]
+	]
+}
+```
+
 ## Gulp
 
 Add [Gulp PostCSS] to your project:
@@ -174,3 +243,4 @@ grunt.initConfig({
 [<humanReadableName>]: https://github.com/csstools/postcss-plugins/tree/main/<packagePath>
 [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

.github/bin/generate-docs/readme.mjs

@@ -33,7 +33,7 @@ readmeDoc = readmeDoc.replace(`<!-- Available Variables: -->
 readmeDoc = readmeDoc.replaceAll('<corsWarning>', corsTemplate);
 
 // Insert "Header" section
-readmeDoc = readmeDoc.replace('<header>', `# <humanReadableName> [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
+readmeDoc = readmeDoc.replace('<header>', `# <humanReadableName> [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
 
 ` + '[<img alt="npm version" src="https://img.shields.io/npm/v/<packageName>.svg" height="20">][npm-url] ' +
 `${
@@ -68,8 +68,14 @@ postcss([
 readmeDoc = readmeDoc.replace('<envSupport>', `[<humanReadableName>] 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)
+- [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)
+- [Gulp](INSTALL.md#gulp)
+- [Grunt](INSTALL.md#grunt)`);
 
 // Insert "Link List" section
 readmeDoc = readmeDoc.replace('<linkList>', `[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
@@ -81,10 +87,7 @@ ${
 [discord]: https://discord.gg/bUadyRwkJS
 [npm-url]: https://www.npmjs.com/package/<packageName>
 
-[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
 [<humanReadableName>]: https://github.com/csstools/postcss-plugins/tree/main/<packagePath>`);
 
 readmeDoc = readmeDoc.replaceAll('<cssdbId>', packageJSONInfo.csstools.cssdbId);

experimental/postcss-nesting/INSTALL.md

@@ -2,8 +2,14 @@
 
 [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)
+- [PostCSS Load Config](#postcss-load-config)
+- [Webpack](#webpack)
+- [Create React App](#create-react-app)
+- [Next.js](#nextjs)
+- [Gulp](#gulp)
+- [Grunt](#grunt)
 
 ## Node
 
@@ -44,6 +50,38 @@ module.exports = {
 }
 ```
 
+## PostCSS Load Config
+
+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
+{
+	"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_
@@ -112,6 +150,37 @@ 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)
+
+```bash
+npm install @csstools/postcss-nesting-experimental --save-dev
+```
+
+Use [PostCSS Nesting] in your `postcss.config.json` file:
+
+```json
+{
+	"plugins": [
+		"@csstools/postcss-nesting-experimental"
+	]
+}
+```
+
+```json5
+{
+	"plugins": [
+		[
+			"@csstools/postcss-nesting-experimental",
+			{
+				// Optionally add plugin options
+			}
+		]
+	]
+}
+```
+
 ## Gulp
 
 Add [Gulp PostCSS] to your project:
@@ -174,3 +243,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

plugins/css-blank-pseudo/INSTALL.md

@@ -2,8 +2,14 @@
 
 [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)
+- [PostCSS Load Config](#postcss-load-config)
+- [Webpack](#webpack)
+- [Create React App](#create-react-app)
+- [Next.js](#nextjs)
+- [Gulp](#gulp)
+- [Grunt](#grunt)
 
 ## Node
 
@@ -44,6 +50,38 @@ module.exports = {
 }
 ```
 
+## PostCSS Load Config
+
+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
+{
+	"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_
@@ -112,6 +150,37 @@ 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)
+
+```bash
+npm install css-blank-pseudo --save-dev
+```
+
+Use [CSS Blank Pseudo] in your `postcss.config.json` file:
+
+```json
+{
+	"plugins": [
+		"css-blank-pseudo"
+	]
+}
+```
+
+```json5
+{
+	"plugins": [
+		[
+			"css-blank-pseudo",
+			{
+				// Optionally add plugin options
+			}
+		]
+	]
+}
+```
+
 ## Gulp
 
 Add [Gulp PostCSS] to your project:
@@ -174,3 +243,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