Merge pull request #154 from mzgoddard/webpack-2-options

Add some help for configuring the loader with webpack 2

.travis.yml

@@ -1,18 +1,22 @@
 language: node_js
-node_js:
-  - "iojs"
-  - "0.12"
-  - "0.10"
 sudo: false
+node_js:
+  - "4"
 env:
-  matrix:
-    - WEBPACK_VERSION=1.13.1 WEBPACK_DEV_SERVER_VERSION=1.7.0
-    - WEBPACK_VERSION=2.1.0-beta.7 WEBPACK_DEV_SERVER_VERSION=2.1.0-beta.0
+  - WEBPACK_VERSION=1.13.1 WEBPACK_DEV_SERVER_VERSION=1.7.0 MOCHA_LOADER=0.7.1
+  - WEBPACK_VERSION=2.1.0-beta.23 WEBPACK_DEV_SERVER_VERSION=2.1.0-beta.0 MOCHA_LOADER=1.0.0
+matrix:
+  include:
+    - node_js: "0.12"
+      env: WEBPACK_VERSION=1.13.1 WEBPACK_DEV_SERVER_VERSION=1.7.0 MOCHA_LOADER=0.7.1
+    - node_js: "0.10"
+      env: WEBPACK_VERSION=1.13.1 WEBPACK_DEV_SERVER_VERSION=1.7.0 MOCHA_LOADER=0.7.1
 before_install:
   - "export DISPLAY=:99.0"
   - "sh -e /etc/init.d/xvfb start"
 before_script:
-  - npm rm webpack webpack-dev-server
-  - npm install webpack@$WEBPACK_VERSION webpack-dev-server@$WEBPACK_DEV_SERVER_VERSION
+  - npm rm webpack webpack-dev-server mocha-loader
+  - npm install webpack@$WEBPACK_VERSION webpack-dev-server@$WEBPACK_DEV_SERVER_VERSION mocha-loader@$MOCHA_LOADER
 script:
+  - "node_modules/.bin/webpack --config test/webpack.config.js --output-path=test/tmp --output-filename=bundle.js"
   - "node_modules/.bin/testem ci -l firefox"

README.md

@@ -68,6 +68,90 @@ stylus: {
 }
 ```
 
+Multiple configs can be used by giving other configs different names and referring to the with the `config` query option.
+
+
+```js
+var stylus_plugin = require('stylus_plugin');
+module: {
+  loaders: [
+    {
+      test: /\.other\.styl$/,
+      loader: 'style-loader!css-loader!stylus-loader?config=stylusOther'
+    }
+  ]
+},
+stylusOther: {
+  use: [stylus_plugin()]
+}
+```
+
+#### Webpack 2
+
+Webpack 2 formalizes its options with a schema. Options can be provided to `stylus-loader` in the options field to `module.rules` or through LoaderOptionsPlugin or `stylus-loader`'s OptionsPlugin (a convenience wrapper around LoaderOptionsPlugin).
+
+Config through module rules:
+
+```js
+module: {
+  rules: [
+    {
+      test: /\.styl$/,
+      use: [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'stylus-loader',
+          options: {
+            use: [stylus_plugin()],
+          },
+        },
+      ],
+    }
+  ],
+},
+```
+
+Config through LoaderOptionsPlugin:
+
+```js
+module: {
+  rules: [
+    {
+      test: /\.styl$/,
+      loader: 'style-loader!css-loader!stylus-loader',
+    },
+  ],
+},
+plugins: [
+  new webpack.LoaderOptionsPlugin({
+    test: /\.styl$/,
+    stylus: {
+      // You can have multiple stylus configs with other names and use them
+      // with `stylus-loader?config=otherConfig`.
+      default: {
+        use: [stylus_plugin()],
+      },
+      otherConfig: {
+        use: [other_plugin()],
+      },
+    },
+  }),
+],
+```
+
+Config through `stylus-loader`'s OptionsPlugin (convenience wrapper for LoaderOptionsPlugin):
+
+```js
+plugins: [
+  new stylusLoader.OptionsPlugin({
+    default: {
+      use: [stylus_plugin()],
+    },
+  }),
+],
+```
+
 #### Using nib with stylus
 
 The easiest way of enabling `nib` is to import it in the stylus options:

index.js

@@ -10,7 +10,6 @@ var PathCache = require('./lib/pathcache');
 var resolver = require('./lib/resolver');
 
 var globalImportsCaches = {};
-
 module.exports = function(source) {
   var self = this;
   this.cacheable && this.cacheable();
@@ -20,8 +19,14 @@ module.exports = function(source) {
   options.filename = options.filename || this.resourcePath;
   options.Evaluator = CachedPathEvaluator;
 
-  var configKey = options.config || 'stylus';
-  var stylusOptions = this.options[configKey] || {};
+  var configKey, stylusOptions;
+  if (this.stylus) {
+    configKey = options.config || 'default';
+    stylusOptions = this.stylus[configKey] || {};
+  } else {
+    configKey = options.config || 'stylus';
+    stylusOptions = this.options[configKey] || {};
+  }
   // Instead of assigning to options, we run them manually later so their side effects apply earlier for
   // resolving paths.
   var use = options.use || stylusOptions.use || [];
@@ -170,3 +175,43 @@ module.exports = function(source) {
     })
     .catch(done);
 };
+
+var LoaderOptionsPlugin = require('webpack').LoaderOptionsPlugin;
+
+// Webpack 2 plugin for setting options that'll be available to stylus-loader.
+function OptionsPlugin(options) {
+  if (!LoaderOptionsPlugin) {
+    throw new Error(
+      'webpack.LoaderOptionPlugin is not available. A newer version of webpack is needed.'
+    );
+  }
+  var stylusOptions = {};
+  var test = options.test || /\.styl$/;
+  var include = options.include;
+  var exclude = options.exclude;
+
+  var loaderOptions = {
+    stylus: stylusOptions,
+  };
+  for (var key in options) {
+    if (['test', 'include', 'exclude'].indexOf(key) === -1) {
+      stylusOptions[key] = options[key];
+    }
+  }
+  if (test) {
+    loaderOptions.test = test;
+  }
+  if (include) {
+    loaderOptions.include = include;
+  }
+  if (exclude) {
+    loaderOptions.exclude = exclude;
+  }
+  this.plugin = new LoaderOptionsPlugin(loaderOptions);
+};
+
+module.exports.OptionsPlugin = OptionsPlugin;
+
+OptionsPlugin.prototype.apply = function(compiler) {
+  this.plugin.apply(compiler);
+};

package.json

@@ -11,7 +11,7 @@
     "test": "testem ci",
     "test-dev": "testem -l firefox",
     "test-one": "testem ci -l firefox",
-    "test-build": "webpack --config test/webpack.config.js --output-path test/tmp --output-file bundle.js"
+    "test-build": "webpack --config test/webpack.config.js --output-path=test/tmp --output-filename=bundle.js"
   },
   "author": "Kyle Robinson Young <kyle@dontkry.com> (http://dontkry.com)",
   "license": "MIT",

test/webpack.config.js

@@ -16,12 +16,11 @@ function includePlugin() {
   };
 }
 
-if (process.env.WEBPACK_VERSION === '2.1.0-beta.7') {
+if (process.env.WEBPACK_VERSION === '2.1.0-beta.23') {
   module.exports = {
     context: __dirname,
     entry: 'mocha-loader!./all.js',
     resolve: {
-      enforceExtensions: false,
       extensions: [
         '.js',
         '.css',
@@ -33,12 +32,16 @@ if (process.env.WEBPACK_VERSION === '2.1.0-beta.7') {
         path.join(__dirname, 'fixtures', 'web_modules')
       ]
     },
-    stylus: {
-      use: [
-        plugin(),
-        includePlugin()
-      ]
-    }
+    plugins: [
+      new (require('..').OptionsPlugin)({
+        default: {
+          use: [
+            plugin(),
+            includePlugin(),
+          ],
+        },
+      }),
+    ],
   };
 } else {
   module.exports = {