Fix context issues

Author: znck

dist/rollup-plugin-vue.common.js

@@ -1,5 +1,5 @@
 /*!
- * rollup-plugin-vue v1.0.3
+ * rollup-plugin-vue v2.0.0
  * (c) 2016 undefined
  * Release under the MIT License.
  */
@@ -16,6 +16,7 @@ var htmlMinifier = _interopDefault(require('html-minifier'));
 var chalk = _interopDefault(require('chalk'));
 var babel = _interopDefault(require('babel-core'));
 var fs = _interopDefault(require('fs'));
+var postcss = _interopDefault(require('postcss'));
 var objectAssign = _interopDefault(require('object-assign'));
 
 var babelHelpers = {};
@@ -77,6 +78,10 @@ var options = {
     useShortDoctype: true,
     removeEmptyAttributes: true,
     removeOptionalTags: true
+  },
+  postcss: {
+    plugins: [],
+    options: {}
   }
 };
 
@@ -154,6 +159,12 @@ function checkLang(node) {
   }
 }
 
+/**
+ * Pad content with empty lines to get correct line number in errors.
+ *
+ * @param content
+ * @returns {string}
+ */
 function padContent(content) {
   return content.split(/\r?\n/g).map(function () {
     return '';
@@ -162,7 +173,10 @@ function padContent(content) {
 
 var Compiler = function () {
   function Compiler() {
+    var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
     babelHelpers.classCallCheck(this, Compiler);
+
+    this.options = options;
   }
 
   babelHelpers.createClass(Compiler, [{
@@ -215,6 +229,13 @@ var Compiler = function () {
       });
       return promise.then(function () {
         return _this.processTemplate(components.template, filePath, content);
+      }).then(function (template) {
+        if (components.style) {
+          return _this.processStyle(components.style, filePath, content).then(function (style) {
+            return { template: template.code, style: style.code };
+          });
+        }
+        return { template: template.code, style: '' };
       }).then(function (compiled) {
         return _this.processScript(components.script, filePath, content, compiled);
       });
@@ -236,7 +257,9 @@ var Compiler = function () {
       // TODO: Up next. ${node}, ${filePath}
       return null;
     }
+
     /**
+     * Compile template: DeIndent and minify html.
      * @param {Node} node
      * @param {string} filePath
      * @param {string} content
@@ -245,6 +268,8 @@ var Compiler = function () {
   }, {
     key: 'processTemplate',
     value: function processTemplate(node, filePath, content) {
+      var _this2 = this;
+
       var template = deIndent(this.checkSrc(node, filePath) || parse5.serialize(node.content));
       var lang = checkLang(node);
       if (!lang) {
@@ -258,9 +283,8 @@ var Compiler = function () {
           })();
         }
       }
-
       return this.compileAsPromise('template', template, lang, filePath).then(function (res) {
-        res.code = htmlMinifier.minify(res.code, options.htmlMinifier);
+        res.code = htmlMinifier.minify(res.code, _this2.options.htmlMinifier);
         return res;
       });
     }
@@ -276,36 +300,61 @@ var Compiler = function () {
     value: function processScript(node, filePath, content, compiled) {
       var lang = checkLang(node) || 'babel';
       var script = this.checkSrc(node, filePath);
+      var template = compiled.template;
+
       if (!script) {
         script = parse5.serialize(node);
         // pad the script to ensure correct line number for syntax errors
         var location = content.indexOf(script);
         var before = padContent(content.slice(0, location));
         script = before + script;
       }
-      script = this.injectTemplate(script, compiled.code, lang);
+      script = this.injectTemplate(script, template, lang);
       script = deIndent(script);
-      return this.compileAsPromise('script', script, lang, filePath);
+      return this.compileAsPromise('script', script, lang, filePath).then(function (res) {
+        return { code: res.code };
+      });
     }
     /**
      * @param {Node} node
-     * @param {string} path
+     * @param {string} filePath
      * @param {string} content
      */
 
   }, {
     key: 'processStyle',
-    value: function processStyle(node, path, content) {}
+    value: function processStyle(node, filePath, content) {
+      var _this3 = this;
+
+      var lang = checkLang(node) || 'css';
+      var style = this.checkSrc(node, filePath);
+      var injectFnName = '__$styleInject';
+      if (!style) {
+        style = parse5.serialize(node);
+        var location = content.indexOf(style);
+        var before = padContent(content.slice(0, location));
+        style = before + style;
+      }
+      var options = this.options.postcss;
+      options.from = filePath;
+      options.to = filePath;
+      return this.compileAsPromise('style', style, lang, filePath).then(function (res) {
+        return postcss(_this3.options.postcss.plugins || []).process(res.code, options).then(function (res) {
+          var code = 'export ' + injectFnName + '(' + JSON.stringify(res.css) + ');';
+          return { code: code, type: 'style' };
+        });
+      });
+    }
   }, {
     key: 'compileAsPromise',
     value: function compileAsPromise(type, code, lang, filePath) {
-      var _this2 = this;
+      var _this4 = this;
 
       var compiler = compilers[lang];
       if (compiler) {
         return new Promise(function (resolve, reject) {
           try {
-            var compiled = compiler.compile(code, _this2, filePath);
+            var compiled = compiler.compile(code, _this4, filePath);
             resolve(compiled);
           } catch (e) {
             reject(e);
@@ -327,22 +376,26 @@ var Compiler = function () {
   return Compiler;
 }();
 
-var compiler = new Compiler();
-
 function plugin() {
-  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+  var options$$ = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  options$$ = objectAssign({}, options, options$$, { extensions: ['.vue'] });
+  var filter = rollupPluginutils.createFilter(options$$.include, options$$.exclude);
+  var extensions = options$$.extensions;
+  delete options$$.extensions;
+  delete options$$.include;
+  delete options$$.exclude;
 
-  options = objectAssign({}, options, { extensions: ['.vue'] });
-  var filter = rollupPluginutils.createFilter(options.include, options.exclude);
-  var extensions = options.extensions;
-  delete options.extensions;
-  delete options.include;
-  delete options.exclude;
+  var compiler = new Compiler(options$$);
 
   return {
     transform: function transform(code, id) {
-      if (!filter(id)) return null;
-      if (extensions.indexOf(path.extname(id)) === -1) return null;
+      if (!filter(id)) {
+        return null;
+      }
+      if (extensions.indexOf(path.extname(id)) === -1) {
+        return null;
+      }
 
       return new Promise(function (resolve) {
         compiler.compile(code, id).then(function (compiled) {

src/compiler.js

@@ -5,6 +5,7 @@ import parse5 from 'parse5'
 import htmlMinifier from 'html-minifier'
 import chalk from 'chalk'
 import compilers from './compilers/index'
+import postcss from 'postcss'
 
 require('es6-promise').polyfill()
 
@@ -94,6 +95,15 @@ export default class Compiler {
         .then(() => {
           return this.processTemplate(components.template, filePath, content)
         })
+        .then((template) => {
+          if (components.style) {
+            return this.processStyle(components.style, filePath, content)
+                .then((style) => {
+                  return {template: template.code, style: style.code}
+                })
+          }
+          return {template: template.code, style: ''}
+        })
         .then((compiled) => {
           return this.processScript(components.script, filePath, content, compiled)
         })
@@ -131,9 +141,8 @@ export default class Compiler {
         })
       }
     }
-
     return this.compileAsPromise('template', template, lang, filePath)
-        .then(function (res) {
+        .then((res) => {
           res.code = htmlMinifier.minify(res.code, this.options.htmlMinifier)
           return res
         })
@@ -147,23 +156,50 @@ export default class Compiler {
   processScript (node, filePath, content, compiled) {
     const lang = checkLang(node) || 'babel'
     let script = this.checkSrc(node, filePath)
+    let {template} = compiled
     if (!script) {
       script = parse5.serialize(node)
       // pad the script to ensure correct line number for syntax errors
       const location = content.indexOf(script)
       const before = padContent(content.slice(0, location))
       script = before + script
     }
-    script = this.injectTemplate(script, compiled.code, lang)
+    script = this.injectTemplate(script, template, lang)
     script = deIndent(script)
     return this.compileAsPromise('script', script, lang, filePath)
+        .then((res) => {
+          return {code: res.code}
+        })
   }
   /**
    * @param {Node} node
-   * @param {string} path
+   * @param {string} filePath
    * @param {string} content
    */
-  processStyle (node, path, content) {}
+  processStyle (node, filePath, content) {
+    const lang = checkLang(node) || 'css'
+    let style = this.checkSrc(node, filePath)
+    const injectFnName = '__$styleInject'
+    if (!style) {
+      style = parse5.serialize(node)
+      const location = content.indexOf(style)
+      const before = padContent(content.slice(0, location))
+      style = before + style
+    }
+    let options = this.options.postcss
+    options.from = filePath
+    options.to = filePath
+    return this.compileAsPromise('style', style, lang, filePath)
+        .then((res) => {
+          return postcss(this.options.postcss.plugins || [])
+              .process(res.code, options)
+              .then((res) => {
+                const code = `export ${injectFnName}(${JSON.stringify(res.css)});`
+                return {code: code, type: 'style'}
+              })
+        })
+  }
+
   compileAsPromise (type, code, lang, filePath) {
     var compiler = compilers[lang]
     if (compiler) {

src/index.js

@@ -2,9 +2,10 @@ import {createFilter} from 'rollup-pluginutils'
 import Compiler from './compiler'
 import objectAssign from 'object-assign'
 import path from 'path'
+import defaultOptions from './options'
 
 export default function plugin (options = {}) {
-  options = objectAssign({}, options, {extensions: ['.vue'] })
+  options = objectAssign({}, defaultOptions, options, {extensions: ['.vue'] })
   let filter = createFilter(options.include, options.exclude)
   const extensions = options.extensions
   delete options.extensions

src/options.js

@@ -34,5 +34,9 @@ export default {
     useShortDoctype: true,
     removeEmptyAttributes: true,
     removeOptionalTags: true
+  },
+  postcss: {
+    plugins: [],
+    options: {}
   }
 }

test/expects/style.js

@@ -0,0 +1,11 @@
+var evens = [2, 4, 6, 8];
+var odds = evens.map(function (v) {
+  return v + 1;
+});
+var style = { template: "<h1 :id=id @click=hi>hello</h1><input type=text>",
+  data: function data() {
+    return odds;
+  }
+};
+
+export default style;

test/fixtures/style.vue

@@ -0,0 +1,20 @@
+<template>
+  <h1 :id="id" @click="hi">hello</h1>
+  <input type="text">
+</template>
+
+<script>
+var evens = [2,4,6,8]
+var odds = evens.map(v => v + 1)
+export default {
+  data() {
+    return odds
+  }
+}
+</script>
+
+<style>
+  input[type=text] {
+    color: red;
+  }
+</style>