fix: parsing relative imports in stylus files (#54)

Author: mdvorscak

lib/process.js

@@ -7,7 +7,8 @@ const compileTypescript = require('./compilers/typescript-compiler')
 const compileCoffeeScript = require('./compilers/coffee-compiler')
 const extractPropsFromFunctionalTemplate = require('./extract-props')
 const fs = require('fs')
-const join = require('path').join
+const path = require('path')
+const join = path.join
 const cssExtract = require('extract-from-css')
 const logger = require('./logger')
 const splitRE = /\r?\n/g
@@ -28,13 +29,14 @@ function processScript (scriptPart) {
   return compileBabel(scriptPart.content)
 }
 
-function processStyle (stylePart) {
+function processStyle (stylePart, filePath) {
   if (!stylePart) return {}
 
   let cssCode = stylePart.content
   if (/^styl|stylus$/.test(stylePart.lang)) {
+    const dir = path.dirname(filePath)
     const stylus = require('stylus')
-    cssCode = stylus.render(stylePart.content)
+    cssCode = stylus.render(stylePart.content, { paths: [dir, process.cwd()] })
   }
 
   const cssNames = cssExtract.extractClasses(cssCode)
@@ -57,13 +59,13 @@ function changePartsIfFunctional (parts) {
   }
 }
 
-module.exports = function (src, path) {
+module.exports = function (src, filePath) {
   var parts = vueCompiler.parseComponent(src, { pad: true })
 
   changePartsIfFunctional(parts)
 
   if (parts.script && parts.script.src) {
-    parts.script.content = fs.readFileSync(join(path, '..', parts.script.src), 'utf8')
+    parts.script.content = fs.readFileSync(join(filePath, '..', parts.script.src), 'utf8')
   }
 
   const result = processScript(parts.script)
@@ -75,7 +77,7 @@ module.exports = function (src, path) {
     scriptSrc = parts.script.content
   }
 
-  const map = generateSourceMap(script, '', path, scriptSrc, inputMap)
+  const map = generateSourceMap(script, '', filePath, scriptSrc, inputMap)
   let output = ';(function(){\n' + script + '\n})()\n' +
     'if (module.exports.__esModule) module.exports = module.exports.default\n' +
     'var __vue__options__ = (typeof module.exports === "function"' +
@@ -84,7 +86,7 @@ module.exports = function (src, path) {
 
   if (parts.template) {
     if (parts.template.src) {
-      parts.template.content = fs.readFileSync(join(path, '..', parts.template.src), 'utf8')
+      parts.template.content = fs.readFileSync(join(filePath, '..', parts.template.src), 'utf8')
     }
 
     const renderFunctions = compileTemplate(parts.template)
@@ -107,7 +109,7 @@ module.exports = function (src, path) {
       }
 
       const moduleName = ast.module === true ? '$style' : ast.module
-      const styleObj = processStyle(ast)
+      const styleObj = processStyle(ast, filePath)
 
       return '\n  this[\'' + moduleName + '\'] = ' + JSON.stringify(styleObj)
     }).filter(_ => _)

test/relative/resource.styl

@@ -0,0 +1 @@
+standard-space = 11px

test/resources/StylusRelative.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="testB"></div>
+</template>
+
+<script>
+export default {
+  name: 'Button',
+}
+</script>
+
+
+<style lang="styl" module>
+  @import '../relative/resource';
+  .testB {
+    margin: standard-space;
+  }
+</style>

test/stylus.spec.js

@@ -1,5 +1,6 @@
 import { shallow } from 'vue-test-utils'
 import Stylus from './resources/Stylus.vue'
+import StylusRelative from './resources/StylusRelative.vue'
 
 describe('processes .vue file with Stylus style', () => {
   let wrapper
@@ -18,4 +19,8 @@ describe('processes .vue file with Stylus style', () => {
   it('should not bind from style tags without a module', () => {
     expect(wrapper.vm.$style.testC).toBeFalsy()
   })
+
+  it('should handle relative imports', () => {
+    expect(() => shallow(StylusRelative)).not.toThrow()
+  })
 })