Skip to content

Commit 684fcad

Browse files
romainmenkeromainmenke
authored
more install instructions (#710)
* next.js install instructions * fix * postcss-load-config * fix * some cleanup
1 parent 4343a1b commit 684fcad

File tree

65 files changed

+3483
-206
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+3483
-206
lines changed

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

+72-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,14 @@
22

33
[<humanReadableName>] runs in all Node environments, with special instructions for:
44

5-
| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
6-
| --- | --- | --- | --- | --- | --- |
5+
- [Node](#node)
6+
- [PostCSS CLI](#postcss-cli)
7+
- [PostCSS Load Config](#postcss-load-config)
8+
- [Webpack](#webpack)
9+
- [Create React App](#create-react-app)
10+
- [Next.js](#nextjs)
11+
- [Gulp](#gulp)
12+
- [Grunt](#grunt)
713

814
## Node
915

@@ -44,6 +50,38 @@ module.exports = {
4450
}
4551
```
4652

53+
## PostCSS Load Config
54+
55+
If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config).
56+
57+
```bash
58+
npm install <packageName> --save-dev
59+
```
60+
61+
`package.json`:
62+
63+
```json
64+
{
65+
"postcss": {
66+
"plugins": {
67+
"<packageName>": {}
68+
}
69+
}
70+
}
71+
```
72+
73+
`.postcssrc.json`:
74+
75+
```json
76+
{
77+
"plugins": {
78+
"<packageName>": {}
79+
}
80+
}
81+
```
82+
83+
_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._
84+
4785
## Webpack
4886

4987
_Webpack version 5_
@@ -112,6 +150,37 @@ module.exports = config => reactAppRewirePostcss(config, {
112150
});
113151
```
114152

153+
## Next.js
154+
155+
Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config)
156+
157+
```bash
158+
npm install <packageName> --save-dev
159+
```
160+
161+
Use [<humanReadableName>] in your `postcss.config.json` file:
162+
163+
```json
164+
{
165+
"plugins": [
166+
"<packageName>"
167+
]
168+
}
169+
```
170+
171+
```json5
172+
{
173+
"plugins": [
174+
[
175+
"<packageName>",
176+
{
177+
// Optionally add plugin options
178+
}
179+
]
180+
]
181+
}
182+
```
183+
115184
## Gulp
116185

117186
Add [Gulp PostCSS] to your project:
@@ -174,3 +243,4 @@ grunt.initConfig({
174243
[<humanReadableName>]: https://github.com/csstools/postcss-plugins/tree/main/<packagePath>
175244
[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
176245
[React App Rewired]: https://github.com/timarney/react-app-rewired
246+
[Next.js]: https://nextjs.org

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

+9-6
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ readmeDoc = readmeDoc.replace(`<!-- Available Variables: -->
3333
readmeDoc = readmeDoc.replaceAll('<corsWarning>', corsTemplate);
3434

3535
// Insert "Header" section
36-
readmeDoc = readmeDoc.replace('<header>', `# <humanReadableName> [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
36+
readmeDoc = readmeDoc.replace('<header>', `# <humanReadableName> [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
3737
3838
` + '[<img alt="npm version" src="https://img.shields.io/npm/v/<packageName>.svg" height="20">][npm-url] ' +
3939
`${
@@ -68,8 +68,14 @@ postcss([
6868
readmeDoc = readmeDoc.replace('<envSupport>', `[<humanReadableName>] runs in all Node environments, with special
6969
instructions for:
7070
71-
| [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) |
72-
| --- | --- | --- | --- | --- | --- |`);
71+
- [Node](INSTALL.md#node)
72+
- [PostCSS CLI](INSTALL.md#postcss-cli)
73+
- [PostCSS Load Config](INSTALL.md#postcss-load-config)
74+
- [Webpack](INSTALL.md#webpack)
75+
- [Create React App](INSTALL.md#create-react-app)
76+
- [Next.js](INSTALL.md#nextjs)
77+
- [Gulp](INSTALL.md#gulp)
78+
- [Grunt](INSTALL.md#grunt)`);
7379

7480
// Insert "Link List" section
7581
readmeDoc = readmeDoc.replace('<linkList>', `[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
@@ -81,10 +87,7 @@ ${
8187
[discord]: https://discord.gg/bUadyRwkJS
8288
[npm-url]: https://www.npmjs.com/package/<packageName>
8389
84-
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
85-
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
8690
[PostCSS]: https://github.com/postcss/postcss
87-
[PostCSS Loader]: https://github.com/postcss/postcss-loader
8891
[<humanReadableName>]: https://github.com/csstools/postcss-plugins/tree/main/<packagePath>`);
8992

9093
readmeDoc = readmeDoc.replaceAll('<cssdbId>', packageJSONInfo.csstools.cssdbId);

‎experimental/postcss-nesting/INSTALL.md

+72-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,14 @@
22

33
[PostCSS Nesting] runs in all Node environments, with special instructions for:
44

5-
| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
6-
| --- | --- | --- | --- | --- | --- |
5+
- [Node](#node)
6+
- [PostCSS CLI](#postcss-cli)
7+
- [PostCSS Load Config](#postcss-load-config)
8+
- [Webpack](#webpack)
9+
- [Create React App](#create-react-app)
10+
- [Next.js](#nextjs)
11+
- [Gulp](#gulp)
12+
- [Grunt](#grunt)
713

814
## Node
915

@@ -44,6 +50,38 @@ module.exports = {
4450
}
4551
```
4652

53+
## PostCSS Load Config
54+
55+
If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config).
56+
57+
```bash
58+
npm install @csstools/postcss-nesting-experimental --save-dev
59+
```
60+
61+
`package.json`:
62+
63+
```json
64+
{
65+
"postcss": {
66+
"plugins": {
67+
"@csstools/postcss-nesting-experimental": {}
68+
}
69+
}
70+
}
71+
```
72+
73+
`.postcssrc.json`:
74+
75+
```json
76+
{
77+
"plugins": {
78+
"@csstools/postcss-nesting-experimental": {}
79+
}
80+
}
81+
```
82+
83+
_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._
84+
4785
## Webpack
4886

4987
_Webpack version 5_
@@ -112,6 +150,37 @@ module.exports = config => reactAppRewirePostcss(config, {
112150
});
113151
```
114152

153+
## Next.js
154+
155+
Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config)
156+
157+
```bash
158+
npm install @csstools/postcss-nesting-experimental --save-dev
159+
```
160+
161+
Use [PostCSS Nesting] in your `postcss.config.json` file:
162+
163+
```json
164+
{
165+
"plugins": [
166+
"@csstools/postcss-nesting-experimental"
167+
]
168+
}
169+
```
170+
171+
```json5
172+
{
173+
"plugins": [
174+
[
175+
"@csstools/postcss-nesting-experimental",
176+
{
177+
// Optionally add plugin options
178+
}
179+
]
180+
]
181+
}
182+
```
183+
115184
## Gulp
116185

117186
Add [Gulp PostCSS] to your project:
@@ -174,3 +243,4 @@ grunt.initConfig({
174243
[PostCSS Nesting]: https://github.com/csstools/postcss-plugins/tree/main/experimental/postcss-nesting
175244
[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
176245
[React App Rewired]: https://github.com/timarney/react-app-rewired
246+
[Next.js]: https://nextjs.org

‎plugins/css-blank-pseudo/INSTALL.md

+72-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,14 @@
22

33
[CSS Blank Pseudo] runs in all Node environments, with special instructions for:
44

5-
| [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) |
6-
| --- | --- | --- | --- | --- | --- |
5+
- [Node](#node)
6+
- [PostCSS CLI](#postcss-cli)
7+
- [PostCSS Load Config](#postcss-load-config)
8+
- [Webpack](#webpack)
9+
- [Create React App](#create-react-app)
10+
- [Next.js](#nextjs)
11+
- [Gulp](#gulp)
12+
- [Grunt](#grunt)
713

814
## Node
915

@@ -44,6 +50,38 @@ module.exports = {
4450
}
4551
```
4652

53+
## PostCSS Load Config
54+
55+
If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config).
56+
57+
```bash
58+
npm install css-blank-pseudo --save-dev
59+
```
60+
61+
`package.json`:
62+
63+
```json
64+
{
65+
"postcss": {
66+
"plugins": {
67+
"css-blank-pseudo": {}
68+
}
69+
}
70+
}
71+
```
72+
73+
`.postcssrc.json`:
74+
75+
```json
76+
{
77+
"plugins": {
78+
"css-blank-pseudo": {}
79+
}
80+
}
81+
```
82+
83+
_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._
84+
4785
## Webpack
4886

4987
_Webpack version 5_
@@ -112,6 +150,37 @@ module.exports = config => reactAppRewirePostcss(config, {
112150
});
113151
```
114152

153+
## Next.js
154+
155+
Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config)
156+
157+
```bash
158+
npm install css-blank-pseudo --save-dev
159+
```
160+
161+
Use [CSS Blank Pseudo] in your `postcss.config.json` file:
162+
163+
```json
164+
{
165+
"plugins": [
166+
"css-blank-pseudo"
167+
]
168+
}
169+
```
170+
171+
```json5
172+
{
173+
"plugins": [
174+
[
175+
"css-blank-pseudo",
176+
{
177+
// Optionally add plugin options
178+
}
179+
]
180+
]
181+
}
182+
```
183+
115184
## Gulp
116185

117186
Add [Gulp PostCSS] to your project:
@@ -174,3 +243,4 @@ grunt.initConfig({
174243
[CSS Blank Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo
175244
[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
176245
[React App Rewired]: https://github.com/timarney/react-app-rewired
246+
[Next.js]: https://nextjs.org

0 commit comments

Comments
 (0)