Merge pull request #195 from mneuhaus/stylus-loader

Add Stylus loader

Author: weaverryan

fixtures/css/h2_styles.styl

@@ -0,0 +1,3 @@
+base = #f938ab
+h2
+  color: saturation(base, 5%);

index.js

@@ -497,6 +497,27 @@ 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
+     *         // options.import = ['~library/index.styl'];
+     *     });
+     *
+     * @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: /\.styl/,
+                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', 'stylus'],
+        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
+            },
+        ];
+    }
+};

package.json

@@ -70,6 +70,8 @@
     "preact-compat": "^3.17.0",
     "sass-loader": "^6.0.3",
     "sinon": "^2.3.4",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
     "ts-loader": "^2.1.0",
     "typescript": "^2.3.4",
     "vue": "^2.3.4",

test/WebpackConfig.js

@@ -519,6 +519,31 @@ describe('WebpackConfig object', () => {
         });
     });
 
+    describe('enableStylusLoader', () => {
+        it('Calling method sets it', () => {
+            const config = createConfig();
+            config.enableStylusLoader();
+
+            expect(config.useStylusLoader).to.be.true;
+        });
+
+        it('Calling with callback', () => {
+            const config = createConfig();
+            const callback = (stylusOptions) => {};
+            config.enableStylusLoader(callback);
+
+            expect(config.stylusLoaderOptionsCallback).to.equal(callback);
+        });
+
+        it('Calling with non-callback throws an error', () => {
+            const config = createConfig();
+
+            expect(() => {
+                config.enableStylusLoader('FOO');
+            }).to.throw('must be a callback function');
+        });
+    });
+
     describe('enablePreactPreset', () => {
         it('Without preact-compat', () => {
             const config = createConfig();

test/config-generator.js

@@ -307,6 +307,32 @@ describe('The config-generator function', () => {
         });
     });
 
+    describe('enableStylusLoader() adds the stylus-loader', () => {
+        it('without enableStylusLoader()', () => {
+            const config = createConfig();
+            config.outputPath = '/tmp/output/public-path';
+            config.publicPath = '/public-path';
+            config.addEntry('main', './main');
+            // do not enable the stylus loader
+
+            const actualConfig = configGenerator(config);
+
+            expect(JSON.stringify(actualConfig.module.rules)).to.not.contain('stylus-loader');
+        });
+
+        it('enableStylusLoader()', () => {
+            const config = createConfig();
+            config.outputPath = '/tmp/output/public-path';
+            config.publicPath = '/public-path';
+            config.addEntry('main', './main');
+            config.enableStylusLoader();
+
+            const actualConfig = configGenerator(config);
+
+            expect(JSON.stringify(actualConfig.module.rules)).to.contain('stylus-loader');
+        });
+    });
+
     describe('addLoader() adds a custom loader', () => {
         it('addLoader()', () => {
             const config = createConfig();

test/functional.js

@@ -657,6 +657,24 @@ module.exports = {
             });
         });
 
+        it('stylus processes when enabled', (done) => {
+            const config = createWebpackConfig('www/build', 'dev');
+            config.setPublicPath('/build');
+            config.addStyleEntry('styles', ['./css/h2_styles.styl']);
+            config.enableStylusLoader();
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                // check that stylus did its work!
+                webpackAssert.assertOutputFileContains(
+                    'styles.css',
+                    // stylus logic inside will resolve to tis
+                    'color: #9e9399;'
+                );
+
+                done();
+            });
+        });
+
         it('Babel is executed on .js files', (done) => {
             const config = createWebpackConfig('www/build', 'dev');
             config.setPublicPath('/build');