relative import path & dependency support for stylus

Author: yyx990803

lib/compilers/stylus.js

@@ -1,10 +1,29 @@
 var options = require('./options')
+var assign = require('object-assign')
+var path = require('path')
 
-module.exports = function (raw, cb) {
+module.exports = function (raw, cb, compiler, filePath) {
   try {
     var stylus = require('stylus')
   } catch (err) {
     return cb(err)
   }
-  stylus.render(raw, options.stylus || {}, cb)
+
+  var dir = path.dirname(filePath)
+  var paths = [dir, process.cwd()]
+  paths = options.stylus && options.stylus.paths
+    ? options.stylus.paths.concat(paths)
+    : paths
+
+  var renderer = stylus(raw)
+    .set('filename', path.basename(filePath))
+    .set('paths', paths)
+
+  renderer.render(function (err, css) {
+    if (err) return cb(err)
+    renderer.deps().forEach(function (file) {
+      compiler.emit('dependency', file)
+    })
+    cb(null, css)
+  })
 }

test/expects/styl.js

@@ -0,0 +1 @@
+var __vueify_style__ = require("vueify-insert-css").insert("body{font:100% Helvetica,sans-serif;color:#333}")

test/fixtures/imports/import.scss test/fixtures/imports/import.sass

@@ -0,0 +1,2 @@
+$font-stack = Helvetica, sans-serif;
+$primary-color = #333

test/fixtures/imports/import.styl

@@ -1,5 +1,5 @@
 <style lang="sass">
-@import './imports/import.scss';
+@import './imports/import.sass';
 
 body {
   font: 100% $font-stack;

test/fixtures/sass.vue

@@ -0,0 +1,7 @@
+<style lang="stylus">
+@import './imports/import.styl'
+
+body
+  font 100% $font-stack
+  color $primary-color
+</style>

test/fixtures/styl.vue

@@ -25,16 +25,12 @@ function test (name) {
     var expected = read('expects/' + name + '.js')
       .replace(/\{\{id\}\}/g, '_v-' + hash(require.resolve('./' + filePath)))
 
-    // test src imports registering dependency
-    var addDep
-    var deps
-    if (name === 'src') {
-      deps = []
-      addDep = function (file) {
-        deps.push(file)
-      }
-      compiler.on('dependency', addDep)
+    // test registering dependency
+    var deps = []
+    function addDep (file) {
+      deps.push(file)
     }
+    compiler.on('dependency', addDep)
 
     process.env.VUEIFY_TEST = true
     process.env.NODE_ENV = name === 'non-minified'
@@ -51,12 +47,19 @@ function test (name) {
         setTimeout(function () {
           if (err) throw err
           assert.equal(result, expected, 'should compile correctly')
+
+          // check src
           if (name === 'src') {
-            compiler.removeListener('dependency', addDep)
             assert.equal(deps[0], __dirname + '/fixtures/test.html')
             assert.equal(deps[1], __dirname + '/fixtures/test.styl')
             assert.equal(deps[2], __dirname + '/fixtures/src/test.js')
           }
+
+          if (name === 'less' || name === 'sass' || name === 'styl') {
+            assert.equal(deps[0], __dirname + '/fixtures/imports/import.' + name)
+          }
+
+          compiler.removeListener('dependency', addDep)
           done()
         }, 0)
       }