Add Stylus loader

Author: Marc Neuhaus

index.js

@@ -497,6 +497,26 @@ const publicApi = {
         return this;
     },
 
+    /**
+     * Call this if you plan on loading stylus files.
+     *
+     *     Encore.enableStylusLoader();
+     *
+     * Or pass options to the loader
+     *
+     *     Encore.enableStylusLoader(function(options) {
+     *         // https://github.com/shama/stylus-loader
+     *     });
+     *
+     * @param {function} StylusLoaderOptionsCallback
+     * @return {exports}
+     */
+    enableStylusLoader(stylusLoaderOptionsCallback = () => {}) {
+        webpackConfig.enableStylusLoader(stylusLoaderOptionsCallback);
+
+        return this;
+    },
+
     /**
      * Configure babel, without needing a .babelrc file.
      *

lib/WebpackConfig.js

@@ -54,6 +54,7 @@ class WebpackConfig {
         this.useFontsLoader = true;
         this.usePostCssLoader = false;
         this.useLessLoader = false;
+        this.useStylusLoader = false;
         this.useSassLoader = false;
         this.useReact = false;
         this.usePreact = false;
@@ -74,6 +75,7 @@ class WebpackConfig {
         this.postCssLoaderOptionsCallback = () => {};
         this.sassLoaderOptionsCallback = () => {};
         this.lessLoaderOptionsCallback = () => {};
+        this.stylusLoaderOptionsCallback = () => {};
         this.babelConfigurationCallback = () => {};
         this.vueLoaderOptionsCallback = () => {};
         this.tsConfigurationCallback = () => {};
@@ -344,6 +346,16 @@ class WebpackConfig {
         this.lessLoaderOptionsCallback = lessLoaderOptionsCallback;
     }
 
+    enableStylusLoader(stylusLoaderOptionsCallback = () => {}) {
+        this.useStylusLoader = true;
+
+        if (typeof stylusLoaderOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to enableStylusLoader() must be a callback function.');
+        }
+
+        this.stylusLoaderOptionsCallback = stylusLoaderOptionsCallback;
+    }
+
     enableReactPreset() {
         this.useReact = true;
     }

lib/config-generator.js

@@ -15,6 +15,7 @@ const pathUtil = require('./config/path-util');
 const cssLoaderUtil = require('./loaders/css');
 const sassLoaderUtil = require('./loaders/sass');
 const lessLoaderUtil = require('./loaders/less');
+const stylusLoaderUtil = require('./loaders/stylus');
 const babelLoaderUtil = require('./loaders/babel');
 const tsLoaderUtil = require('./loaders/typescript');
 const vueLoaderUtil = require('./loaders/vue');
@@ -186,6 +187,13 @@ class ConfigGenerator {
             });
         }
 
+        if (this.webpackConfig.useStylusLoader) {
+            rules.push({
+                test: /\.stylus/,
+                use: extractText.extract(this.webpackConfig, stylusLoaderUtil.getLoaders(this.webpackConfig))
+            });
+        }
+
         if (this.webpackConfig.useVueLoader) {
             rules.push({
                 test: /\.vue$/,

lib/features.js

@@ -26,6 +26,11 @@ const features = {
         packages: ['less-loader'],
         description: 'load LESS files'
     },
+    stylus: {
+        method: 'enableStylusLoader()',
+        packages: ['stylus-loader'],
+        description: 'load Stylus files'
+    },
     postcss: {
         method: 'enablePostCssLoader()',
         packages: ['postcss-loader'],

lib/loaders/stylus.js

@@ -0,0 +1,43 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const loaderFeatures = require('../features');
+const cssLoader = require('./css');
+
+/**
+ * @param {WebpackConfig} webpackConfig
+ * @param {bool} ignorePostCssLoader If true, postcss-loader will never be added
+ * @return {Array} of loaders to use for Stylus files
+ */
+module.exports = {
+    getLoaders(webpackConfig, ignorePostCssLoader = false) {
+        loaderFeatures.ensurePackagesExist('stylus');
+
+        const config = {
+            sourceMap: webpackConfig.useSourceMaps
+        };
+
+        // allow options to be configured
+        webpackConfig.stylusLoaderOptionsCallback.apply(
+            // use config as the this variable
+            config,
+            [config]
+        );
+
+        return [
+            ...cssLoader.getLoaders(webpackConfig, ignorePostCssLoader),
+            {
+                loader: 'stylus-loader',
+                options: config
+            },
+        ];
+    }
+};

test/index.js

@@ -161,6 +161,15 @@ describe('Public API', () => {
 
     });
 
+    describe('enableStylusLoader', () => {
+
+        it('must return the API object', () => {
+            const returnedValue = api.enableStylusLoader();
+            expect(returnedValue).to.equal(api);
+        });
+
+    });
+
     describe('setOutputPath', () => {
 
         it('must return the API object', () => {

test/loaders/stylus.js

@@ -0,0 +1,64 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const expect = require('chai').expect;
+const WebpackConfig = require('../../lib/WebpackConfig');
+const RuntimeConfig = require('../../lib/config/RuntimeConfig');
+const stylusLoader = require('../../lib/loaders/stylus');
+const cssLoader = require('../../lib/loaders/css');
+const sinon = require('sinon');
+
+function createConfig() {
+    const runtimeConfig = new RuntimeConfig();
+    runtimeConfig.context = __dirname;
+    runtimeConfig.babelRcFileExists = false;
+
+    return new WebpackConfig(runtimeConfig);
+}
+
+describe('loaders/stylus', () => {
+    it('getLoaders() basic usage', () => {
+        const config = createConfig();
+        config.enableSourceMaps(true);
+
+        // make the cssLoader return nothing
+        sinon.stub(cssLoader, 'getLoaders')
+            .callsFake(() => []);
+
+        const actualLoaders = stylusLoader.getLoaders(config);
+        expect(actualLoaders).to.have.lengthOf(1);
+        expect(actualLoaders[0].options.sourceMap).to.be.true;
+
+        cssLoader.getLoaders.restore();
+    });
+
+    it('getLoaders() with options callback', () => {
+        const config = createConfig();
+        config.enableSourceMaps(true);
+
+        // make the cssLoader return nothing
+        sinon.stub(cssLoader, 'getLoaders')
+            .callsFake(() => []);
+
+        config.enableStylusLoader(function(stylusOptions) {
+            stylusOptions.custom_option = 'foo';
+            stylusOptions.other_option = true;
+        });
+
+        const actualLoaders = stylusLoader.getLoaders(config);
+        expect(actualLoaders[0].options).to.deep.equals({
+            sourceMap: true,
+            custom_option: 'foo',
+            other_option: true
+        });
+        cssLoader.getLoaders.restore();
+    });
+});