From 5e9a47ffbc9c7d7e668bbe548a57a758dcbdff98 Mon Sep 17 00:00:00 2001 From: Diogo Felix Date: Sat, 31 Jul 2021 02:45:56 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=98=20DOC:=20Add=20PostCSS=20configura?= =?UTF-8?q?tion=20on=20Astro=20(#947)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/src/pages/guides/styling.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) 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 ``` +### 🎭 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: