[WIP] Documentation

README.md

@@ -1,4 +1,4 @@
-<div class="text-center" style="align: center; margin: 20px">
+<div class="text-xs-center" align="center" style="margin: 20px">
   <img src="http://rollup-plugin-vue.znck.me/assets/images/logo.png">
 </div>
 

docs/introduction.md

@@ -1,4 +1,4 @@
-<div class="text-center" style="align: center; margin: 20px">
+<div class="text-xs-center" align="center" style="margin: 20px">
   <img src="http://rollup-plugin-vue.znck.me/assets/images/logo.png">
 </div>
 

package.json

@@ -51,7 +51,8 @@
     "rollup-pluginutils": "^2.0.1",
     "vue-template-compiler": "^2.1.10",
     "vue-template-es2015-compiler": "^1.5.0",
-    "vue-template-validator": "^1.1.5"
+    "vue-template-validator": "^1.1.5",
+    "less": "latest"
   },
   "devDependencies": {
     "babel-eslint": "^7.1.1",

src/style/index.js

@@ -1,10 +1,12 @@
 import { writeFile } from 'fs'
 import compileCSS from './css'
 import compileSCSS from './scss'
+import compileLESS from './less'
 
 const compilers = {
     scss: compileSCSS,
-    sass: compileSCSS
+    sass: compileSCSS,
+    less: compileLESS
 }
 
 export async function compile (style, options) {
@@ -30,7 +32,8 @@ export default function (files, options) {
 
     Object.keys(files).forEach((file) => {
         files[file].forEach((style) => {
-            css += style.code + '\n'
+            css += ('$compiled' in style) ? `${style.$compiled.code}\n` : `${style.code}\n`
+
             allStyles.push(style)
         })
     })

src/style/less.js

@@ -0,0 +1,18 @@
+import less from 'less'
+
+export default async function (style, options) {
+    const { css, map } = await less.render(style.code, {
+        sourceMap: {
+            sourceMapFullFilename: style.id,
+            sourceMapFileInline: false
+        },
+        ...options.less
+    })
+
+    style.$compiled = {
+        code: css.toString(),
+        map: map.toString()
+    }
+
+    return style
+}

src/vueTransform.js

@@ -109,7 +109,7 @@ function injectTemplate (script, template, lang, options, modules) {
     throw new Error('[rollup-plugin-vue] could not find place to inject template in script.')
 }
 
-var validateTemplate = function (code, content, id) {
+function validateTemplate (code, content, id) {
     const warnings = templateValidator(code, content)
     if (warnings) {
         const relativePath = relative(process.cwd(), id)

test/expects/css-modules-static.css

@@ -1,3 +1,3 @@
-.test {
+.css-modules-static__test {
     color: red;
 }

test/expects/css-modules.css

@@ -1,3 +1,3 @@
-.test {
+.css-modules__test {
     color: red;
 }

test/expects/less.css

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

test/expects/less.js

@@ -0,0 +1,3 @@
+var less = { template: "<div class=\"less__test\"></div>",cssModules: {"test":"less__test"},};
+
+export default less;

test/fixtures/less.vue

@@ -0,0 +1,16 @@
+<template>
+<div class="test"></div>
+</template>
+
+<script lang="babel">
+export default {}
+</script>
+
+
+<style lang="less" module>
+@var: red;
+
+.test {
+    color: @var;
+}
+</style>

test/test.js

@@ -41,7 +41,7 @@ function test(name) {
             assert.equal(code.trim(), expected.trim(), 'should compile code correctly')
 
             // Check css output
-            if (['style', 'css-modules', 'css-modules-static', 'scss', 'pug'].indexOf(name) > -1) {
+            if (['style', 'css-modules', 'css-modules-static', 'scss', 'pug', 'less'].indexOf(name) > -1) {
                 var css = read('expects/' + name + '.css')
                 assert.equal(css.trim(), actualCss.trim(), 'should output style tag content')
             } else {

yarn.lock

@@ -2689,7 +2689,7 @@ [email protected]:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/lcov-parse/-/lcov-parse-0.0.10.tgz#1b0b8ff9ac9c7889250582b70b71315d9da6d9a3"
 
-"[email protected] || ^2.7.1":
+"[email protected] || ^2.7.1", less@latest:
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/less/-/less-2.7.2.tgz#368d6cc73e1fb03981183280918743c5dcf9b3df"
   optionalDependencies: