Updated PostCSS docs and added a link to it

vercel · Jan 27, 2020 · d0880b6 · d0880b6
1 parent 57f72ea
commit d0880b6
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git 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
@@ -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:
+
+<div class="card">
+  <a href="/docs/advanced-features/customizing-postcss-config.md">
+    <b>Customizing PostCSS Config:</b>
+    <small>Extend the PostCSS config and plugins added by Next.js with your own.</small>
+  </a>
+</div>