📘 DOC: Add PostCSS configuration on Astro (#947)

1 files changed, 27 insertions, 0 deletions

diff --git a/docs/src/pages/guides/styling.md b/docs/src/pages/guides/styling.md
index ccc0ef5f6..cbf1e2713 100644
--- a/docs/src/pages/guides/styling.md
+++ b/docs/src/pages/guides/styling.md
@@ -166,6 +166,33 @@ If you want to import third-party libraries into an Astro component, you can use
 </style>
 ```
 
+### 🎭 PostCSS
+
+[PostCSS](https://postcss.org/) is a popular CSS transpiler with support for [a huge ecosystem of plugins.](https://github.com/postcss/postcss#plugins)
+
+**To use PostCSS with Snowpack:** add the [@snowpack/plugin-postcss](https://www.npmjs.com/package/@snowpack/plugin-postcss) plugin to your project.
+
+```diff
+// snowpack.config.js
+"plugins": [
++  "@snowpack/plugin-postcss"
+]
+```
+
+PostCSS requires a [`postcss.config.js`](https://github.com/postcss/postcss#usage) file in your project. By default, the plugin looks in the root directory of your project, but you can customize this yourself with the `config` option. See [the plugin README](https://www.npmjs.com/package/@snowpack/plugin-postcss) for all available options.
+
+```js
+// postcss.config.js
+// Example (empty) postcss config file
+module.exports = {
+  plugins: [
+    // ...
+  ],
+};
+```
+
+Be aware that this plugin will run on all CSS in your project, including any files that compiled to CSS (like `.scss` Sass files, for example).
+
 ## Bundling
 
 All CSS is minified and bundled automatically for you in running `astro build`. Without getting too in the weeds, the general rules are: