Extra loader config for postcss and css loaders

lib/config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const qs = require('querystring')
 const Joi = require('joi')
 const JadePlugin = require('./plugins/jade_plugin')
 const CSSPlugin = require('./plugins/css_plugin')
@@ -55,6 +56,7 @@ module.exports = class Config {
         stringifier: Joi.object(),
         syntax: Joi.object()
       }),
+      css: Joi.object().default({}),
       babel: Joi.object(),
       cleanUrls: Joi.bool().default(true),
       jade: Joi.object().default({}),
@@ -142,6 +144,13 @@ module.exports = class Config {
         return `!${path.join(p, i)}`
       }))
 
+    // parse any extra postcss options out to be passed as querystrings
+    const postcssDirectKeys = ['plugins', 'parser', 'stringifier', 'syntax']
+    res.postcssQuery = {}
+    for (const k in res.postcss) {
+      if (postcssDirectKeys.indexOf(k) < 0) res.postcssQuery[k] = res.postcss[k]
+    }
+
     // catch newly added files, put through the pipeline
     res.server.files = [{
       match: allWatchedFiles,
@@ -170,7 +179,7 @@ module.exports = class Config {
 
     // `noCopy` options are spike-specific and shouldn't be directly added to
     // webpack's config
-    const noCopy = ['root', 'matchers', 'env', 'locals', 'server', 'cleanUrls', 'dumpDirs', 'ignore', 'vendor', 'outputDir']
+    const noCopy = ['root', 'matchers', 'env', 'locals', 'server', 'cleanUrls', 'dumpDirs', 'ignore', 'vendor', 'outputDir', 'css', 'postcssQuery']
 
     // All options other than `disallow` or `noCopy` are added directly to
     // webpack's config object
@@ -207,7 +216,7 @@ module.exports = class Config {
     const spikeLoaders = [
       {
         exclude: reIgnores,
-        loader: 'css-loader!postcss-loader',
+        loader: `css-loader?${qs.stringify(opts.css)}!postcss-loader?${qs.stringify(opts.postcssQuery)}`,
         _core: 'css'
       }, {
         exclude: reIgnores,

readme.md

@@ -59,7 +59,8 @@ Option                 | Description
 :--------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------
 **root**               | **[required]** An absolute path to the root of your project.                                                                                                                                                                                                                                                                        |
 **matchers**           | An object with `jade`, `css`, and `js` keys. Each key is a [micromatch](https://github.com/jonschlinkert/micromatch) string, and represents which files should be pulled into the pipeline to be processed. Be very careful if you are trying to change this.                                                                       | `**/*.jade`, `**/*.css`, and `**/*.js`
-**postcss**            | An object that can contain a `plugins` key, which is an array of [plugins to be passed to PostCSS](http://postcss.parts/) for CSS processing, and a `parser`, `stringifier`, and/or `syntax` key, each of which are objects and take [any of the postcss-loader options](https://github.com/postcss/postcss-loader#custom-syntaxes) |
+**postcss**            | An object that can contain a `plugins` key, which is an array of [plugins to be passed to PostCSS](http://postcss.parts/) for CSS processing, and a `parser`, `stringifier`, and/or `syntax` key, each of which are objects and take [any of the postcss-loader options](https://github.com/postcss/postcss-loader#custom-syntaxes). Any options other than the ones specified above will be passed as querystring options. |
+**css**              | An object which is serialized as a querystring and passed directly to the [css loader](https://github.com/webpack/css-loader).                                                                                                                                                                                                                                        |
 **babel**              | A [configuration object for Babel](http://babeljs.io/docs/usage/options/) for JS processing.                                                                                                                                                                                                                                        |
 **jade**               | A [configuration object for jade](http://jade-lang.com/api/).                                                                                                                                                                                                                                                                       |
 **dumpDirs**           | An array of directories which, if direct children of the project root, will dump their contents to the root on compile.                                                                                                                                                                                                             | `['views', 'assets']`.

test/app_config.js

@@ -35,3 +35,16 @@ test('does not allow certain options to be configured', (t) => {
       t.truthy(res.stats.compilation.options.context !== 'override!')
     })
 })
+
+test('postcss and css querystring options', (t) => {
+  return compileFixture(t, 'app_config', {
+    postcss: { plugins: ['wow'], foo: 'bar' },
+    css: { foo: 'bar' }
+  }).then(({res}) => {
+    const opts = res.stats.compilation.options
+    t.truthy(opts.spike.postcssQuery.foo, 'bar')
+    t.truthy(opts.spike.css.foo, 'bar')
+    const cssLoaderConfig = opts.module.loaders.find((l) => l._core === 'css')
+    t.truthy(cssLoaderConfig.loader === 'css-loader?foo=bar!postcss-loader?foo=bar')
+  })
+})