diff --git a/README.md b/README.md index 7e3e3b1..52f304c 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,72 @@ stylus: { } ``` +#### 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: diff --git a/index.js b/index.js index 94f24b3..dc64d5a 100644 --- a/index.js +++ b/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); +}; diff --git a/package.json b/package.json index 44b618a..7f1c693 100644 --- a/package.json +++ b/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 (http://dontkry.com)", "license": "MIT", diff --git a/test/webpack.config.js b/test/webpack.config.js index 0425573..09d2af6 100644 --- a/test/webpack.config.js +++ b/test/webpack.config.js @@ -21,7 +21,6 @@ if (process.env.WEBPACK_VERSION === '2.1.0-beta.7') { 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 = {