feat: allow to pass options to built-in loaders

Using `options.use`. Close #130

Co-authored-by: BenjaminVanRyseghem <[email protected]>

README.md

@@ -253,7 +253,8 @@ to properly resolve path, rebase and copy assets.
 
 ### use
 
-Type: `name[]` `[name, options][]`<br>
+Type: `name[]` `[name, options][]` `{ sass: options, stylus: options, less: options }`
+
 Default: `['sass', 'stylus', 'less']`
 
 Use a loader, currently built-in loaders are:
@@ -264,6 +265,9 @@ Use a loader, currently built-in loaders are:
 
 They are executed from right to left.
 
+If you pass the `object`, then its property `sass`, `stylus` and `less` will
+be pass in the corresponding loader.
+
 ### loaders
 
 Type: `Loader[]`

src/index.js

@@ -46,7 +46,16 @@ export default (options = {}) => {
       exec: options.exec
     }
   }
-  const use = options.use || ['sass', 'stylus', 'less']
+  let use = ['sass', 'stylus', 'less']
+  if (Array.isArray(options.use)) {
+    use = options.use
+  } else if (options.use !== null && typeof options.use === 'object') {
+    use = [
+      ['sass', options.use.sass || {}],
+      ['stylus', options.use.stylus || {}],
+      ['less', options.use.less || {}]
+    ]
+  }
   use.unshift(['postcss', postcssLoaderOptions])
 
   const loaders = new Loaders({

test/__snapshots__/index.test.js.snap

@@ -741,6 +741,41 @@ styleInject(css);
 "
 `;
 
+exports[`sass data-prepend: js code 2`] = `
+"'use strict';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css = \\".special {\\\\n  color: pink; }\\\\n\\";
+styleInject(css);
+"
+`;
+
 exports[`sass default: js code 1`] = `
 "'use strict';
 

test/index.test.js

@@ -326,6 +326,15 @@ snapshotMany('sass', [
       ]
     }
   },
+  {
+    title: 'data-prepend',
+    input: 'sass-data-prepend/index.js',
+    options: {
+      use: {
+        sass: { data: '@import \'prepend\';' }
+      }
+    }
+  },
   {
     title: 'import',
     input: 'sass-import/index.js'