From d0880b68c8d762b00c6a28cadfd48c747cea653f Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Mon, 27 Jan 2020 15:03:52 -0500 Subject: [PATCH 1/3] Updated PostCSS docs and added a link to it --- .../customizing-postcss-config.md | 42 +++++++++---------- docs/basic-features/built-in-css-support.md | 11 +++++ 2 files changed, 32 insertions(+), 21 deletions(-) diff --git a/docs/advanced-features/customizing-postcss-config.md b/docs/advanced-features/customizing-postcss-config.md index de5597836deda..8ea3f85b1dd03 100644 --- a/docs/advanced-features/customizing-postcss-config.md +++ b/docs/advanced-features/customizing-postcss-config.md @@ -54,8 +54,8 @@ You can learn more about [Next.js' CSS Module support here](/docs/basic-features ## Customizing Plugins -> **Warning**: When you define a custom PostCSS configuration file, Next.js **completely disables** the defaults listed above. -> Be sure to manually configure all features you need compiled, including [Autoprefixer](https://github.com/postcss/autoprefixer). +> **Warning**: When you define a custom PostCSS configuration file, Next.js **completely disables** the [default behavior](#default-behavior). +> Be sure to manually configure all the features you need compiled, including [Autoprefixer](https://github.com/postcss/autoprefixer). To customize the PostCSS configuration, create a `postcss.config.json` file in the root of your project. @@ -110,25 +110,25 @@ module.exports = { } ``` +> **Note**: Next.js also allows the file to be named `.postcssrc.js`. + Do **not use `require()`** to import the PostCSS Plugins. Plugins must be provided as strings. -> **Note**: Next.js also allows the file to be named `.postcssrc.js`. +If your `postcss.config.js` needs to support other non-Next.js tools in the same project, you must use the interoperable object-based format instead: -> **Note**: If your `postcss.config.js` needs to support other non-Next.js tools in the same project, you must use the interoperable object-based format instead: -> -> ```js -> module.exports = { -> plugins: { -> 'postcss-flexbugs-fixes': {}, -> 'postcss-preset-env': { -> autoprefixer: { -> flexbox: 'no-2009', -> }, -> stage: 3, -> features: { -> 'custom-properties': false, -> }, -> }, -> }, -> } -> ``` +```js +module.exports = { + plugins: { + 'postcss-flexbugs-fixes': {}, + 'postcss-preset-env': { + autoprefixer: { + flexbox: 'no-2009', + }, + stage: 3, + features: { + 'custom-properties': false, + }, + }, + }, +} +``` diff --git a/docs/basic-features/built-in-css-support.md b/docs/basic-features/built-in-css-support.md index 1fa7c5f48f360..e1848b6ca8384 100644 --- a/docs/basic-features/built-in-css-support.md +++ b/docs/basic-features/built-in-css-support.md @@ -165,3 +165,14 @@ To support importing `.scss`, `.sass`, `.less`, or `.styl` files you can use - [@zeit/next-sass](https://github.com/zeit/next-plugins/tree/master/packages/next-sass) - [@zeit/next-less](https://github.com/zeit/next-plugins/tree/master/packages/next-less) - [@zeit/next-stylus](https://github.com/zeit/next-plugins/tree/master/packages/next-stylus) + +## Related + +For more information on what to do next, we recommend the following sections: + +
+ + Customizing PostCSS Config: + Extend the PostCSS config and plugins added by Next.js with your own. + +
From b34a37edea7a91b678ab0ef44595bdb6bd64146e Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Tue, 28 Jan 2020 10:43:10 -0500 Subject: [PATCH 2/3] Added note back --- .../customizing-postcss-config.md | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/advanced-features/customizing-postcss-config.md b/docs/advanced-features/customizing-postcss-config.md index 8ea3f85b1dd03..e3030b1909d43 100644 --- a/docs/advanced-features/customizing-postcss-config.md +++ b/docs/advanced-features/customizing-postcss-config.md @@ -114,21 +114,21 @@ module.exports = { Do **not use `require()`** to import the PostCSS Plugins. Plugins must be provided as strings. -If your `postcss.config.js` needs to support other non-Next.js tools in the same project, you must use the interoperable object-based format instead: - -```js -module.exports = { - plugins: { - 'postcss-flexbugs-fixes': {}, - 'postcss-preset-env': { - autoprefixer: { - flexbox: 'no-2009', - }, - stage: 3, - features: { - 'custom-properties': false, - }, - }, - }, -} -``` +> If your `postcss.config.js` needs to support other non-Next.js tools in the same project, you must use the interoperable object-based format instead: +> +> ```js +> module.exports = { +> plugins: { +> 'postcss-flexbugs-fixes': {}, +> 'postcss-preset-env': { +> autoprefixer: { +> flexbox: 'no-2009', +> }, +> stage: 3, +> features: { +> 'custom-properties': false, +> }, +> }, +> }, +> } +> ``` From 652810ab9020c6ed39009e7dd4969cfa3ade13f0 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 28 Jan 2020 10:48:48 -0500 Subject: [PATCH 3/3] Update customizing-postcss-config.md --- docs/advanced-features/customizing-postcss-config.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/advanced-features/customizing-postcss-config.md b/docs/advanced-features/customizing-postcss-config.md index e3030b1909d43..0b1cb7bbb2780 100644 --- a/docs/advanced-features/customizing-postcss-config.md +++ b/docs/advanced-features/customizing-postcss-config.md @@ -114,7 +114,7 @@ module.exports = { Do **not use `require()`** to import the PostCSS Plugins. Plugins must be provided as strings. -> If your `postcss.config.js` needs to support other non-Next.js tools in the same project, you must use the interoperable object-based format instead: +> **Note**: If your `postcss.config.js` needs to support other non-Next.js tools in the same project, you must use the interoperable object-based format instead: > > ```js > module.exports = {