support stylus/less and enable loaders by default

README.md

@@ -54,22 +54,13 @@ postcss({
 
 ### With Sass/Stylus/Less
 
-First add relevant dependency:
+Install corresponding dependency:
 
-```bash
-yarn add node-sass --dev
-# Now you can import `.sass` and `.scss` files in your library
-```
+- For `Sass` install `node-sass`: `yarn add node-sass --dev`
+- For `Stylus` Install `stylus`: `yarn add stylus --dev`
+- For `Less` Install `less`: `yarn add less --dev`
 
-Then enable it in the plugin:
-
-```js
-postcss({
-  use: [
-    ['sass', {/* optional sass options */}]
-  ]
-})
-```
+That's it, you can now import `.styl` `.scss` `.sass` `.less` files in your library.
 
 ## Options
 
@@ -187,7 +178,8 @@ Type: `object`
 
 ### use
 
-Type: `name[]` `[name, options][]`
+Type: `name[]` `[name, options][]`<br>
+Default: `['sass', 'stylus', 'less']`
 
 Use a loader, currently built-in loaders are:
 
@@ -201,7 +193,7 @@ They are executed from right to left.
 
 Type: `Loader[]`
 
-An array of custom loaders.
+An array of custom loaders, check out our [sass-loader](./src/sass-loader) as example.
 
 ```js
 interface Loader {

package.json

@@ -34,8 +34,10 @@
     "bili": "^1.0.0",
     "eslint-config-rem": "^4.0.0",
     "jest": "^22.0.4",
+    "less": "^2.7.3",
     "node-sass": "^4.7.2",
     "rollup": "^0.53.3",
+    "stylus": "^0.54.5",
     "sugarss": "^1.0.1",
     "xo": "^0.18.2"
   },
@@ -74,4 +76,4 @@
       ]
     ]
   }
-}
+}

src/index.js

@@ -40,7 +40,7 @@ export default (options = {}) => {
       exec: options.exec
     }
   }
-  let use = options.use || []
+  let use = options.use || ['sass', 'stylus', 'less']
   use.unshift(['postcss', postcssLoaderOptions])
   use = use.reduce((res, rule) => {
     if (typeof rule === 'string') {

src/less-loader.js

@@ -0,0 +1,19 @@
+import pify from 'pify'
+import { localRequire } from './utils'
+
+export default {
+  name: 'less',
+  test: /\.less$/,
+  async process({ code }) {
+    const less = localRequire('less')
+
+    const { css, map } = await pify(less.render.bind(less))(code, {
+      sourceMap: this.sourceMap && {}
+    })
+
+    return {
+      code: css,
+      map
+    }
+  }
+}

src/loaders.js

@@ -1,6 +1,8 @@
 import series from 'promise.series'
 import postcssLoader from './postcss-loader'
 import sassLoader from './sass-loader'
+import stylusLoader from './stylus-loader'
+import lessLoader from './less-loader'
 
 export default class Loaders {
   constructor(options = {}) {
@@ -9,6 +11,8 @@ export default class Loaders {
 
     this.registerLoader(postcssLoader)
     this.registerLoader(sassLoader)
+    this.registerLoader(stylusLoader)
+    this.registerLoader(lessLoader)
     if (options.loaders) {
       options.loaders.forEach(loader => this.registerLoader(loader))
     }

src/stylus-loader.js

@@ -0,0 +1,20 @@
+import pify from 'pify'
+import { localRequire } from './utils'
+
+export default {
+  name: 'stylus',
+  test: /\.(styl|stylus)$/,
+  async process({ code }) {
+    const stylus = localRequire('stylus')
+
+    const style = stylus(code)
+      .set('filename', this.id)
+      .set('sourcemap', this.sourceMap && {})
+
+    const css = await pify(style.render.bind(style))()
+    return {
+      code: css,
+      map: style.sourcemap
+    }
+  }
+}

test/__snapshots__/index.test.js.snap

@@ -8,6 +8,19 @@ exports[`extract: css code 1`] = `
 .bar {
   color: red;
 }
+
+body {
+  color: #f00;
+  background: #f00;
+}
+
+#sidebar {
+  width: 30%;
+  background-color: #faa; }
+
+#header {
+  color: #6c94be;
+}
 "
 `;
 
@@ -27,7 +40,21 @@ exports[`extract::sourcemap:inline: css code 1`] = `
   color: red;
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvZGlzdC9leHRyYWN0Ojpzb3VyY2VtYXA6aW5saW5lL2Zvby5jc3MiLCJ0ZXN0L2ZpeHR1cmVzL2Rpc3QvZXh0cmFjdDo6c291cmNlbWFwOmlubGluZS9iYXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsV0FBVztDQUNaOztBQ0ZEO0VBQ0UsV0FBVztDQUNaIiwiZmlsZSI6InRlc3QvZml4dHVyZXMvZGlzdC9leHRyYWN0Ojpzb3VyY2VtYXA6aW5saW5lL2J1bmRsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJib2R5IHtcbiAgY29sb3I6IHJlZDtcbn1cbiIsIi5iYXIge1xuICBjb2xvcjogcmVkO1xufVxuIl19*/"
+body {
+  color: #f00;
+  background: #f00;
+}
+/*# sourceMappingURL=test/fixtures/simple/style.css.map */
+#sidebar {
+  width: 30%;
+  background-color: #faa; }
+
+/*# sourceMappingURL=../../../inline */
+#header {
+  color: #6c94be;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvZGlzdC9leHRyYWN0Ojpzb3VyY2VtYXA6aW5saW5lL2Zvby5jc3MiLCJ0ZXN0L2ZpeHR1cmVzL2Rpc3QvZXh0cmFjdDo6c291cmNlbWFwOmlubGluZS9iYXIuY3NzIiwidGVzdC9maXh0dXJlcy9kaXN0L2V4dHJhY3Q6OnNvdXJjZW1hcDppbmxpbmUvdGVzdC9maXh0dXJlcy9zaW1wbGUvc3R5bGUuc3R5bCIsInRlc3QvZml4dHVyZXMvZGlzdC9leHRyYWN0Ojpzb3VyY2VtYXA6aW5saW5lL3N0eWxlLnN0eWwiLCJ0ZXN0L2ZpeHR1cmVzL2Rpc3QvZXh0cmFjdDo6c291cmNlbWFwOmlubGluZS90ZXN0L2ZpeHR1cmVzL3NpbXBsZS9zdHlsZS5zYXNzIiwidGVzdC9maXh0dXJlcy9kaXN0L2V4dHJhY3Q6OnNvdXJjZW1hcDppbmxpbmUvc3R5bGUuc2FzcyIsInRlc3QvZml4dHVyZXMvZGlzdC9leHRyYWN0Ojpzb3VyY2VtYXA6aW5saW5lL2lucHV0IiwidGVzdC9maXh0dXJlcy9kaXN0L2V4dHJhY3Q6OnNvdXJjZW1hcDppbmxpbmUvc3R5bGUubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLFdBQVc7Q0FDWjs7QUNGRDtFQUNFLFdBQVc7Q0FDWjs7QUNGRDtFQUNFLFlBQUE7RUFDQSxpQkFBQTtDQ0NEO0FBQ0QsMERBQTBEO0FDSjFEO0VBQ0UsV0FBVTtFQUNWLHVCQUFzQixFQUFJOztBQ0U1Qix1Q0FBdUM7QUNEdkM7RUFDRSxlQUFBO0NDRkQiLCJmaWxlIjoidGVzdC9maXh0dXJlcy9kaXN0L2V4dHJhY3Q6OnNvdXJjZW1hcDppbmxpbmUvYnVuZGxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImJvZHkge1xuICBjb2xvcjogcmVkO1xufVxuIiwiLmJhciB7XG4gIGNvbG9yOiByZWQ7XG59XG4iLG51bGwsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsXX0=*/"
 `;
 
 exports[`extract::sourcemap:inline: js code 1`] = `
@@ -46,10 +73,23 @@ exports[`extract::sourcemap:true: css code 1`] = `
   color: red;
 }
 
+body {
+  color: #f00;
+  background: #f00;
+}
+/*# sourceMappingURL=test/fixtures/simple/style.css.map */
+#sidebar {
+  width: 30%;
+  background-color: #faa; }
+
+#header {
+  color: #6c94be;
+}
+
 /*# sourceMappingURL=bundle.css.map */"
 `;
 
-exports[`extract::sourcemap:true: css map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"test/fixtures/dist/extract::sourcemap:true/foo.css\\",\\"test/fixtures/dist/extract::sourcemap:true/bar.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,WAAW;CACZ;;ACFD;EACE,WAAW;CACZ\\",\\"file\\":\\"test/fixtures/dist/extract::sourcemap:true/bundle.css\\",\\"sourcesContent\\":[\\"body {\\\\n  color: red;\\\\n}\\\\n\\",\\".bar {\\\\n  color: red;\\\\n}\\\\n\\"]}"`;
+exports[`extract::sourcemap:true: css map 1`] = `"{\\"version\\":3,\\"sources\\":[\\"test/fixtures/dist/extract::sourcemap:true/foo.css\\",\\"test/fixtures/dist/extract::sourcemap:true/bar.css\\",\\"test/fixtures/dist/extract::sourcemap:true/test/fixtures/simple/style.styl\\",\\"test/fixtures/dist/extract::sourcemap:true/style.styl\\",\\"test/fixtures/dist/extract::sourcemap:true/style.sass\\",\\"test/fixtures/dist/extract::sourcemap:true/input\\",\\"test/fixtures/dist/extract::sourcemap:true/style.less\\"],\\"names\\":[],\\"mappings\\":\\"AAAA;EACE,WAAW;CACZ;;ACFD;EACE,WAAW;CACZ;;ACFD;EACE,YAAA;EACA,iBAAA;CCCD;AACD,0DAA0D;ACJ1D;EACE,WAAW;EACX,uBAAuB,EAAE;;ACC3B;EACE,eAAA;CCFD\\",\\"file\\":\\"test/fixtures/dist/extract::sourcemap:true/bundle.css\\",\\"sourcesContent\\":[\\"body {\\\\n  color: red;\\\\n}\\\\n\\",\\".bar {\\\\n  color: red;\\\\n}\\\\n\\",null,null,\\"#sidebar {\\\\n  width: 30%;\\\\n  background-color: #faa; }\\\\n\\",null,null]}"`;
 
 exports[`extract::sourcemap:true: js code 1`] = `
 "'use strict';
@@ -105,13 +145,25 @@ __$$styleInject(css,{\\"insertAt\\":\\"top\\"});
 var css$1 = \\".bar {\\\\n  color: red;\\\\n}\\\\n\\";
 __$$styleInject(css$1,{\\"insertAt\\":\\"top\\"});
 
+var css$2 = \\"body {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\n\\";
+__$$styleInject(css$2,{\\"insertAt\\":\\"top\\"});
+
+var css$4 = \\"#sidebar {\\\\n  width: 30%;\\\\n  background-color: #faa; }\\\\n\\";
+__$$styleInject(css$4,{\\"insertAt\\":\\"top\\"});
+
+var css$6 = \\"#header {\\\\n  color: #6c94be;\\\\n}\\\\n\\";
+__$$styleInject(css$6,{\\"insertAt\\":\\"top\\"});
+
 console.log(css, css$1);
 "
 `;
 
 exports[`minimize:extract: css code 1`] = `
 "body{color:red}
-.bar{color:red}"
+.bar{color:red}
+body{color:red;background:red}
+#sidebar{width:30%;background-color:#faa}
+#header{color:#6c94be}"
 `;
 
 exports[`minimize:extract: js code 1`] = `
@@ -157,6 +209,15 @@ __$$styleInject(css);
 var css$1 = \\".bar{color:red}\\";
 __$$styleInject(css$1);
 
+var css$2 = \\"body{color:red;background:red}\\";
+__$$styleInject(css$2);
+
+var css$4 = \\"#sidebar{width:30%;background-color:#faa}\\";
+__$$styleInject(css$4);
+
+var css$6 = \\"#header{color:#6c94be}\\";
+__$$styleInject(css$6);
+
 console.log(css, css$1);
 "
 `;
@@ -475,6 +536,15 @@ __$$styleInject(css);
 var css$1 = \\".bar {\\\\n  color: red;\\\\n}\\\\n\\";
 __$$styleInject(css$1);
 
+var css$2 = \\"body {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\n\\";
+__$$styleInject(css$2);
+
+var css$4 = \\"#sidebar {\\\\n  width: 30%;\\\\n  background-color: #faa; }\\\\n\\";
+__$$styleInject(css$4);
+
+var css$6 = \\"#header {\\\\n  color: #6c94be;\\\\n}\\\\n\\";
+__$$styleInject(css$6);
+
 console.log(css, css$1);
 "
 `;
@@ -511,11 +581,6 @@ function __$$styleInject(css, ref) {
 
 var css = \\"body {\\\\n  color: red;\\\\n}\\\\n\\";
 __$$styleInject(css);
-
-var css$1 = \\".bar {\\\\n  color: red;\\\\n}\\\\n\\";
-__$$styleInject(css$1);
-
-console.log(css, css$1);
 "
 `;
 
@@ -555,6 +620,15 @@ __$$styleInject(css);
 var css$1 = \\".bar {\\\\n  color: red;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFXO0NBQ1oiLCJmaWxlIjoiYmFyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5iYXIge1xuICBjb2xvcjogcmVkO1xufVxuIl19 */\\";
 __$$styleInject(css$1);
 
+var css$2 = \\"body {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\n/*# sourceMappingURL=test/fixtures/simple/style.css.map */\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLnN0eWwiLCJzdHlsZS5zdHlsIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsWUFBQTtFQUNBLGlCQUFBO0NDQ0Q7QUFDRCwwREFBMEQiLCJmaWxlIjoic3R5bGUuc3R5bCJ9 */\\";
+__$$styleInject(css$2);
+
+var css$4 = \\"#sidebar {\\\\n  width: 30%;\\\\n  background-color: #faa; }\\\\n\\\\n/*# sourceMappingURL=../../../inline */\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLnNhc3MiLCJzdHlsZS5zYXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsV0FBVTtFQUNWLHVCQUFzQixFQUFJOztBQ0U1Qix1Q0FBdUMiLCJmaWxlIjoic3R5bGUuc2FzcyJ9 */\\";
+__$$styleInject(css$4);
+
+var css$6 = \\"#header {\\\\n  color: #6c94be;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImlucHV0Iiwic3R5bGUubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQTtFQUNFLGVBQUE7Q0NGRCIsImZpbGUiOiJzdHlsZS5sZXNzIn0= */\\";
+__$$styleInject(css$6);
+
 console.log(css, css$1);
 "
 `;
@@ -595,6 +669,15 @@ __$$styleInject(css);
 var css$1 = \\".bar {\\\\n  color: red;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhci5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFXO0NBQ1oiLCJmaWxlIjoiYmFyLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5iYXIge1xuICBjb2xvcjogcmVkO1xufVxuIl19 */\\";
 __$$styleInject(css$1);
 
+var css$2 = \\"body {\\\\n  color: #f00;\\\\n  background: #f00;\\\\n}\\\\n/*# sourceMappingURL=test/fixtures/simple/style.css.map */\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc2ltcGxlL3N0eWxlLnN0eWwiLCJzdHlsZS5zdHlsIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsWUFBQTtFQUNBLGlCQUFBO0NDQ0Q7QUFDRCwwREFBMEQiLCJmaWxlIjoic3R5bGUuc3R5bCJ9 */\\";
+__$$styleInject(css$2);
+
+var css$4 = \\"#sidebar {\\\\n  width: 30%;\\\\n  background-color: #faa; }\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLnNhc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFXO0VBQ1gsdUJBQXVCLEVBQUUiLCJmaWxlIjoic3R5bGUuc2FzcyIsInNvdXJjZXNDb250ZW50IjpbIiNzaWRlYmFyIHtcbiAgd2lkdGg6IDMwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZhYTsgfVxuIl19 */\\";
+__$$styleInject(css$4);
+
+var css$6 = \\"#header {\\\\n  color: #6c94be;\\\\n}\\\\n\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImlucHV0Iiwic3R5bGUubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQTtFQUNFLGVBQUE7Q0NGRCIsImZpbGUiOiJzdHlsZS5sZXNzIn0= */\\";
+__$$styleInject(css$6);
+
 console.log(css, css$1);
 "
 `;

test/fixtures/simple/index.js

@@ -1,4 +1,7 @@
 import foo from './foo.css'
 import bar from './bar.css'
+import './style.styl'
+import './style.sass'
+import './style.less'
 
 console.log(foo, bar)

test/fixtures/simple/style.less

@@ -0,0 +1,6 @@
+@nice-blue: #5B83AD;
+@light-blue: @nice-blue + #111;
+
+#header {
+  color: @light-blue;
+}

test/fixtures/simple/style.sass

@@ -0,0 +1,3 @@
+#sidebar
+  width: 30%
+  background-color: #faa

test/fixtures/simple/style.styl

@@ -0,0 +1,3 @@
+body
+  color: red
+  background: @color

test/fixtures/skip-loader/index.js

@@ -0,0 +1 @@
+import './style.css'

test/fixtures/skip-loader/style.css

@@ -0,0 +1,3 @@
+body {
+  color: red;
+}

test/index.test.js

@@ -181,22 +181,14 @@ snapshot({
 
 snapshot({
   title: 'sass',
-  input: 'sass/index.js',
-  options: {
-    use: [
-      'sass'
-    ]
-  }
+  input: 'sass/index.js'
 })
 
 snapshot({
   title: 'sass:sourcemap',
   input: 'sass/index.js',
   options: {
-    sourceMap: true,
-    use: [
-      'sass'
-    ]
+    sourceMap: true
   }
 })
 
@@ -209,16 +201,13 @@ snapshot({
   title: 'sass:modules',
   input: 'sass-modules/index.js',
   options: {
-    modules: true,
-    use: [
-      'sass'
-    ]
+    modules: true
   }
 })
 
 snapshot({
   title: 'skip-loader',
-  input: 'simple/index.js',
+  input: 'skip-loader/index.js',
   options: {
     use: ['loader'],
     loaders: [