Skip to content

more install instructions #710

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 18, 2022
Merged

more install instructions #710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
64c2d22
next.js install instructions
romainmenke Nov 17, 2022
69b5e62
fix
romainmenke Nov 17, 2022
e37f711
postcss-load-config
romainmenke Nov 17, 2022
5ff6c6f
fix
romainmenke Nov 17, 2022
e2295fb
some cleanup
romainmenke Nov 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 72 additions & 2 deletions .github/bin/generate-docs/install-template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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_
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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
15 changes: 9 additions & 6 deletions .github/bin/generate-docs/readme.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] ' +
`${
Expand Down Expand Up @@ -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
Expand All @@ -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);
Expand Down
74 changes: 72 additions & 2 deletions experimental/postcss-nesting/INSTALL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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_
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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
74 changes: 72 additions & 2 deletions plugins/css-blank-pseudo/INSTALL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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_
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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
Loading