Add user configurable PostCSS plugins.

[joshgillies]

Placeholder PR to add support for configurable PostCSS Plugins.

Ref: #12

[joshgillies]

There's still work that needs to be done. Specifically around configuring PostCSS plugins (eg. autoprefixer). As certain PostCSS plugins are in of themselves configurable, how do we manage this?

A good example of this comes from: https://github.com/code42day/postcss-cli#examples

postcss --use autoprefixer --autoprefixer.browsers "> 5%" \
    --use postcss-cachify --postcss-cachify.baseUrl /res \
    -o screen.css screen.css

[joshwnj]

@joshgillies do you know if plugins works as strings or does css-modules-loader-core expect an array of objects?

[joshgillies]

Sorry, it expects an array! Good catch. 👍

[joshgillies]

@joshwnj OK should be requiring plugins via user input now. Which I guess handles this CLI use case:

browserify -p [ css-modulesify -p postcss-color-function -p postcss-modules-extract-imports -p postcss-modules-scope -p autoprefixer -o dist/main.css ] -o dist/index.js

However, assuming the following use case:

var browserify = require('browserify')
var b = browserify('./index.js')
b.plugin('css-modulesify', {
  output: './bundle.css',
  plugins: [
    require('postcss-color-function'),
    require('postcss-modules-extract-imports'),
    require('postcss-modules-scope'),
    require('autoprefixer')
  ]
});

Maybe we should also be checking to see whether the plugin has already been require'd somehow...

What do you think?

[joshgillies]

The above concerns should now be addressed. An updated example would look something like this:

browserify -p [ css-modulesify -u postcss-color-function -u postcss-modules-extract-imports -u postcss-modules-scope -u autoprefixer --autoprefixer.browsers "> 5%" -o dist/main.css ] -o dist/index.js

Thoughts?

[joshwnj]

Looking great @joshgillies , this will be a huge improvement! Have you given it a trial run in the https://github.com/css-modules/browserify-demo yet? Will be good to demonstrate this new behaviour somewhere at any rate

[joshgillies]

I've been testing the demo over here, https://github.com/joshgillies/browserify-demo/tree/plugins. For the most part it works, however autoprefixer seems to throw strange errors relating to [TypeError: Cannot read property '_autoprefixerDisabled' of undefined]. Given this is (at least in my mind) the defacto standard of PostCSS plugins I'd say we need to ensure css-modules play nicely with it before merging any work done here.

[joshgillies]

Ok, now that ai/autoprefixer-core#57 has been merged, we should be in a good position to roll this out.

I've just published some documentation around how PostCSS plugins can be used and configured.

@joshwnj would you care to take a look?

As an aside I'd also like to squash some of these commits before we merge. 😄

[joshwnj]

@joshgillies looks great, merge when ready :)