Fix 97, Import files in less (#98)

* Add tests for import style

* Add parent directory to paths

* Fix import statement

Author: znck

src/style/index.js

@@ -2,7 +2,7 @@ import { writeFile, mkdirSync as mkdir, existsSync as exists } from 'fs'
 import { dirname, isAbsolute, resolve as resolvePath } from 'path'
 import compileCSS from './css'
 import compileSCSS from './scss'
-import compileLESS from './less'
+import compileLESS from './less/index'
 import compileSTYLUS from './stylus'
 
 const compilers = {

src/style/less.js

@@ -0,0 +1,27 @@
+import path from 'path'
+
+export default async function (style, options) {
+    const less = require('less')
+    const config = {
+        plugins: [],
+        paths: [],
+        sourceMap: {
+            sourceMapFullFilename: style.id,
+            sourceMapFileInline: false
+        },
+        ...options.less
+    }
+
+    config.paths.unshift(path.dirname(style.id))
+
+    const { css, map } = await less.render(
+          'data' in options.less ? `${options.less.data}\n${style.code}` : style.code, config
+    )
+
+    style.$compiled = {
+        code: css.toString(),
+        map: map.toString()
+    }
+
+    return style
+}

src/style/less/index.js

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

test/expects/import-less.css

@@ -0,0 +1,3 @@
+var importLess = { template: "<div class=\"hello\"></div>",};
+
+export default importLess;

test/expects/import-less.js

@@ -0,0 +1,2 @@
+.hello {
+  color: red; }

test/expects/import-scss.css

@@ -0,0 +1,3 @@
+var importScss = { template: "<div class=\"hello\"></div>",};
+
+export default importScss;

test/expects/import-scss.js

@@ -0,0 +1,11 @@
+<template>
+<div class="hello"></div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less">
+@import './some.less';
+</style>

test/fixtures/import-less.vue

@@ -0,0 +1,11 @@
+<template>
+<div class="hello"></div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss">
+@import './some.scss';
+</style>

test/fixtures/import-scss.vue

@@ -0,0 +1,5 @@
+@var: red;
+
+.hello {
+  color: @var;
+}

test/fixtures/some.less

@@ -0,0 +1,5 @@
+$var: red;
+
+.hello {
+  color: $var;
+}

test/fixtures/some.scss

@@ -49,14 +49,16 @@ function test(name) {
 
             // Check css output
             if ([
-                      'style',
                       'css-modules',
                       'css-modules-static',
+                      'import-scss',
+                      'import-less',
+                      'less',
+                      'pug',
                       'scoped-css',
                       'scoped-css-with-no-auto-style',
                       'scss',
-                      'pug',
-                      'less',
+                      'style',
                       'stylus'
                   ].indexOf(name) > -1) {
                 var css = read('expects/' + name + '.css')