Use ~ to resolve node_modules in Sass (#77)

* update bili

* sass imports

* strip .css extension

.gitignore

@@ -1,3 +1,3 @@
-node_modules
+/node_modules
 dist
 coverage

README.md

@@ -101,6 +101,16 @@ Extract CSS to the same location where JS file is generated but with `.css` exte
 
 You can also set it to an absolute path.
 
+### imports
+
+__For Sass/Scss Only.__
+
+Similar to how webpack's [sass-loader](https://github.com/webpack-contrib/sass-loader#imports) works, you can prepend the path with `~` to tell this plugin to resolve in `node_modules`:
+
+```sass
+@import "~bootstrap/dist/css/bootstrap";
+```
+
 ### modules
 
 Type: `boolean` `object`<br>

package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "test": "npm run lint && jest",
     "test:cov": "npm run lint && jest --coverage",
-    "build": "bili --buble.target.node 6",
+    "build": "bili --target node --no-babel.babelrc",
     "lint": "xo",
     "prepublishOnly": "npm run build"
   },
@@ -31,7 +31,7 @@
     "autoprefixer": "^7.2.4",
     "babel-jest": "^22.0.4",
     "babel-preset-env": "^1.5.1",
-    "bili": "^2.2.6",
+    "bili": "^3.0.1",
     "eslint-config-rem": "^4.0.0",
     "jest": "^22.0.4",
     "less": "^2.7.3",
@@ -52,6 +52,7 @@
     "postcss-modules": "^1.1.0",
     "promise.series": "^0.2.0",
     "reserved-words": "^0.1.2",
+    "resolve": "^1.5.0",
     "rollup-pluginutils": "^2.0.1",
     "style-inject": "^0.3.0"
   },
@@ -76,4 +77,4 @@
       ]
     ]
   }
-}
+}

src/index.js

@@ -3,7 +3,7 @@ import fs from 'fs-extra'
 import { createFilter } from 'rollup-pluginutils'
 import Concat from 'concat-with-sourcemaps'
 import Loaders from './loaders'
-import { normalizePath } from './utils'
+import normalizePath from './utils/normalize-path'
 
 /**
  * The options that could be `boolean` or `object`

src/less-loader.js

@@ -1,5 +1,6 @@
 import pify from 'pify'
-import { localRequire, normalizePath } from './utils'
+import normalizePath from './utils/normalize-path'
+import localRequire from './utils/local-require'
 
 export default {
   name: 'less',

src/postcss-loader.js

@@ -2,7 +2,8 @@ import path from 'path'
 import postcss from 'postcss'
 import findPostcssConfig from 'postcss-load-config'
 import reserved from 'reserved-words'
-import { localRequire, normalizePath } from './utils'
+import normalizePath from './utils/normalize-path'
+import localRequire from './utils/local-require'
 
 const styleInjectPath = require.resolve('style-inject/dist/style-inject.es')
 

src/sass-loader.js

@@ -1,5 +1,9 @@
+import path from 'path'
 import pify from 'pify'
-import { localRequire } from './utils'
+import resolve from 'resolve'
+import localRequire from './utils/local-require'
+
+const moduleRe = /^~([a-z0-9]|@).+/i
 
 export default {
   name: 'sass',
@@ -11,7 +15,23 @@ export default {
       file: this.id,
       data: code,
       indentedSyntax: /\.sass$/.test(this.id),
-      sourceMap: this.sourceMap
+      sourceMap: this.sourceMap,
+      importer: [(url, prev, done) => {
+        if (!moduleRe.test(url)) return done({ file: prev })
+
+        resolve(url.slice(1), {
+          basedir: path.dirname(this.id),
+          extensions: ['.scss', '.sass', '.css']
+        }, (err, id) => {
+          if (err) {
+            return Promise.reject(err)
+          }
+          done({
+            // Do not add `.css` extension in order to inline the file
+            file: id.endsWith('.css') ? id.replace(/\.css$/, '') : id
+          })
+        })
+      }].concat(this.options.importer || [])
     })
 
     return {

src/stylus-loader.js

@@ -1,5 +1,5 @@
 import pify from 'pify'
-import { localRequire } from './utils'
+import localRequire from './utils/local-require'
 
 export default {
   name: 'stylus',

src/utils/local-require.js

@@ -0,0 +1,5 @@
+import path from 'path'
+
+const localRequire = name => require(path.resolve('node_modules', name))
+
+export default localRequire

src/utils/normalize-path.js

@@ -0,0 +1,6 @@
+import path from 'path'
+
+const normalizePath = filepath => path.relative(process.cwd(),
+filepath)
+
+export default normalizePath

test/__snapshots__/index.test.js.snap

@@ -514,6 +514,41 @@ styleInject(css);
 "
 `;
 
+exports[`sass:import: js code 1`] = `
+"'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 = \\".a {\\\\n  color: pink; }\\\\n\\\\n.b {\\\\n  color: red; }\\\\n\\\\n.c {\\\\n  color: black; }\\\\n\\";
+styleInject(css);
+"
+`;
+
 exports[`sass:modules: js code 1`] = `
 "'use strict';
 

test/fixtures/sass-import/index.js

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

test/fixtures/sass-import/style.scss

@@ -0,0 +1,3 @@
+@import "~foo/bar/a";
+@import "~foo/bar/b";
+@import "~foo/bar/c";

test/index.test.js

@@ -260,6 +260,11 @@ snapshot({
   }
 })
 
+snapshot({
+  title: 'sass:import',
+  input: 'sass-import/index.js'
+})
+
 test('onExtract', async () => {
   const res = await write({
     input: 'simple/index.js',