diff --git a/docs/POSTCSS.md b/docs/POSTCSS.md index 9d42be1..aeaaca6 100644 --- a/docs/POSTCSS.md +++ b/docs/POSTCSS.md @@ -18,7 +18,9 @@ new EmberApp(defaults, { }); ``` -## Before/After PostCSS Plugins +## Processing Order + +### `before` / `after` PostCSS Plugins By default, any PostCSS plugins you specify will be applied after the module transformation. To apply a set of plugins beforehand instead, you can pass a hash with `before` and `after` keys. For instance, if you wanted to use [postcss-nested](https://github.com/postcss/postcss-nested) so that you could define a set of global classes as a single block: @@ -37,7 +39,7 @@ new EmberApp(defaults, { }); ``` -## Post-Process Plugins +### `postprocess` Plugins You can also provide a set of `postprocess` plugins that will run on the file after it has been concatenated. This is useful for plugins like `postcss-sprites` that behave better when run against a single file. The `postprocess` array will be passed through to the `plugins` option in [`broccoli-postcss`](https://github.com/jeffjewiss/broccoli-postcss#broccolipostcsstree-options); see that package for details. @@ -53,6 +55,41 @@ new EmberApp(defaults, { }); ``` +## Configuring Plugins with Options + +Most PostCSS plugins can optionally be configured. Conventionally, you can: + +- either pass a plugin as is, to not set any options +- or call it first to provide options. + +```javascript +new EmberApp(defaults, { + cssModules: { + plugins: [ + require('postcss-calc') // without any further config + require('postcss-preset-env')({ stage: 4 }) // with extra config + ] + } +}); +``` + +ember-css-modules also supports a Babel-like way to configure plugins: + +```javascript +new EmberApp(defaults, { + cssModules: { + plugins: [ + require('postcss-calc'), // without any further config + [require('postcss-preset-env'), { stage: 4 }] // with extra config + ] + } +}); +``` + +This special config format is useful, if you are using multiple +[ember-css-modules plugins](./PLUGINS.md), that would like to inter-operate with +one another and collaboratively construct a final config. + ## Importing Third Party Files Out of the box, ember-css-modules doesn't provide a way to to include CSS from outside the app or addon in development. Where possible, including these styles by `app.import`ing them from Bower or using a tool like [ember-cli-node-assets](https://github.com/dfreeman/ember-cli-node-assets) is a good practice, since the build pipeline will have to do less work during development, and your users will benefit from better caching in `vendor.css`.