feature #76 Adding ability to pass options to sass-loader (weaverryan)

This PR was merged into the master branch.

Discussion
----------

Adding ability to pass options to sass-loader

Fixes #14

This is a BC break, which I want to minimize. But, since we're pre 1.0, BC breaks are allowed. And this will fail clearly the first time you try to run encore.

Docs: symfony/symfony-docs#8108

Commits
-------

f803b9a Adding ability to pass options to sass-loader

Author: weaverryan

CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGELOG
 
+## 0.10.0
+
+ * [BC BREAK] If you're using `enableSassLoader()` AND passing an options
+   array, the options now need to be moved to the second argument:
+
+   ```js
+   // before
+   .enableSassLoader({ resolve_url_loader: true });
+
+   // after
+   enableSassLoader(function(sassOptions) {}, {
+       resolve_url_loader: true
+   })
+   ```
+
 ## 0.9.1
 
  * Syntax error fix - #64

index.js

@@ -282,6 +282,18 @@ module.exports = {
     /**
      * Call this if you plan on loading SASS files.
      *
+     *     Encore.enableSassLoader();
+     *
+     * Or pass options to node-sass
+     *
+     *     Encore.enableSassLoader(function(options) {
+     *         // https://github.com/sass/node-sass#options
+     *         // options.includePaths = [...]
+     *     }, {
+     *         // set optional Encore-specific options
+     *         // resolve_url_loader: true
+     *     });
+     *
      * Supported options:
      *      * {bool} resolve_url_loader (default=true)
      *              Whether or not to use the resolve-url-loader.
@@ -291,11 +303,12 @@ module.exports = {
      *              to the original entry file... not whatever file
      *              the url() appears in.
      *
-     * @param {object} options
+     * @param {function} sassLoaderOptionsCallback
+     * @param {object} encoreOptions
      * @return {exports}
      */
-    enableSassLoader(options = {}) {
-        webpackConfig.enableSassLoader(options);
+    enableSassLoader(sassLoaderOptionsCallback = () => {}, encoreOptions = {}) {
+        webpackConfig.enableSassLoader(sassLoaderOptionsCallback, encoreOptions);
 
         return this;
     },

lib/WebpackConfig.js

@@ -41,6 +41,7 @@ class WebpackConfig {
         this.useSourceMaps = false;
         this.usePostCssLoader = false;
         this.useSassLoader = false;
+        this.sassLoaderOptionsCallback = function() {};
         this.sassOptions = {
             resolve_url_loader: true
         };
@@ -206,9 +207,15 @@ class WebpackConfig {
         this.usePostCssLoader = true;
     }
 
-    enableSassLoader(options = {}) {
+    enableSassLoader(sassLoaderOptionsCallback = () => {}, options = {}) {
         this.useSassLoader = true;
 
+        if (typeof sassLoaderOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to enableSassLoader() must be a callback function.');
+        }
+
+        this.sassLoaderOptionsCallback = sassLoaderOptionsCallback;
+
         for (const optionKey of Object.keys(options)) {
             if (!(optionKey in this.sassOptions)) {
                 throw new Error(`Invalid option "${optionKey}" passed to enableSassLoader(). Valid keys are ${Object.keys(this.sassOptions).join(', ')}`);

lib/loaders/sass.js

@@ -35,12 +35,21 @@ module.exports = {
             });
         }
 
+        let config = Object.assign({}, sassOptions, {
+            // needed by the resolve-url-loader
+            sourceMap: (true === webpackConfig.sassOptions.resolve_url_loader) || webpackConfig.useSourceMaps
+        });
+
+        // allow options to be configured
+        webpackConfig.sassLoaderOptionsCallback.apply(
+            // use config as the this variable
+            config,
+            [config]
+        );
+
         sassLoaders.push({
             loader: 'sass-loader',
-            options: Object.assign({}, sassOptions, {
-                // needed by the resolve-url-loader
-                sourceMap: (true === webpackConfig.sassOptions.resolve_url_loader) || webpackConfig.useSourceMaps
-            }),
+            options: config,
         });
 
         return sassLoaders;

test/WebpackConfig.js

@@ -263,7 +263,7 @@ describe('WebpackConfig object', () => {
 
         it('Pass valid config', () => {
             const config = createConfig();
-            config.enableSassLoader({ resolve_url_loader: false });
+            config.enableSassLoader(() => {}, { resolve_url_loader: false });
 
             expect(config.useSassLoader).to.be.true;
             expect(config.sassOptions.resolve_url_loader).to.be.false;
@@ -273,9 +273,17 @@ describe('WebpackConfig object', () => {
             const config = createConfig();
 
             expect(() => {
-                config.enableSassLoader({ fake_option: false });
+                config.enableSassLoader(() => {}, { fake_option: false });
             }).to.throw('Invalid option "fake_option" passed to enableSassLoader()');
         });
+
+        it('Pass options callback', () => {
+            const config = createConfig();
+            const callback = (sassOptions) => {};
+            config.enableSassLoader(callback);
+
+            expect(config.sassLoaderOptionsCallback).to.equal(callback);
+        });
     });
 
     describe('enableTypeScriptLoader', () => {

test/loaders/sass.js

@@ -66,7 +66,7 @@ describe('loaders/sass', () => {
 
     it('getLoaders() without resolve-url-loader', () => {
         const config = createConfig();
-        config.enableSassLoader({
+        config.enableSassLoader(() => {}, {
             resolve_url_loader: false,
         });
         config.enableSourceMaps(false);
@@ -100,4 +100,31 @@ describe('loaders/sass', () => {
 
         cssLoader.getLoaders.restore();
     });
+
+    it('getLoaders() with options callback', () => {
+        const config = createConfig();
+
+        // make the cssLoader return nothing
+        sinon.stub(cssLoader, 'getLoaders')
+            .callsFake(() => []);
+
+        config.enableSassLoader(function(sassOptions) {
+            sassOptions.custom_optiona = 'baz';
+            sassOptions.other_option = true;
+        });
+
+        const actualLoaders = sassLoader.getLoaders(config, {
+            custom_optiona: 'foo',
+            custom_optionb: 'bar'
+        });
+
+        expect(actualLoaders[1].options).to.deep.equals({
+            sourceMap: true,
+            // callback wins over passed in options
+            custom_optiona: 'baz',
+            custom_optionb: 'bar',
+            other_option: true
+        });
+        cssLoader.getLoaders.restore();
+    });
 });