✨ Convert styles to import (#45) & Mark transpiled render (#44)

* ✨ Convert styles to import dependencies

* 🚧 Mark transpiled render function

Mark transpiled render functions with `_withStripped`
Fixes #44

* 💄 CS fixes

Author: znck

package.json

@@ -58,6 +58,7 @@
     "mocha-lcov-reporter": "^1.2.0",
     "rollup": "^0.37.0",
     "rollup-plugin-buble": "^0.14.0",
+    "rollup-plugin-css-only": "^0.1.0",
     "rollup-plugin-replace": "^1.1.1",
     "uglify-js": "^2.7.3",
     "vue-hot-reload-api": "^2.0.6"

src/index.js

@@ -51,25 +51,36 @@ export default function vue (options = {}) {
 
     return {
         name: 'vue',
+        resolveId (id) {
+            if (id.indexOf('.vue.component.') > -1) {
+                return id
+            }
+        },
+        load (id) {
+            if (id.indexOf('.vue.component.') > -1) {
+                const parts = id.split('.')
+                const component = parts.slice(0, parts.length - 4).join('.')
+                const index = parseInt(parts[parts.length - 4])
+
+                return styles[component][index] || ''
+            }
+        },
         transform (source, id) {
             if (!filter(id) || !id.endsWith('.vue')) {
                 debug(`Ignore: ${id}`)
                 return null
             }
 
-            debug(`Transform: ${id}`)
-
             const { code, css, map } = vueTransform(source, id, options)
-
             styles[id] = css
 
-            debug(`Transformed: ${id}`)
-
             return { code, map }
         },
 
         ongenerate () {
-            compileStyle(styles, options)
+            if (options.styleToImports !== true) {
+                compileStyle(styles, options)
+            }
         }
     }
 }

src/options.js

@@ -33,5 +33,6 @@ export default {
             templateString: false,
             unicodeRegExp: false
         }
-    }
+    },
+    styleToImports: false
 }

src/vueTransform.js

@@ -43,10 +43,15 @@ function injectRender (script, render, lang, options) {
     if (['js', 'babel'].indexOf(lang.toLowerCase()) > -1) {
         const matches = /(export default[^{]*\{)/g.exec(script)
         if (matches) {
-            const renderScript = transpileVueTemplate('module.exports={' +
+            let renderScript = 'module.exports={' +
                   `render: ${wrapRenderFunction(render.render)},` +
                   'staticRenderFns: [' +
-                  `${render.staticRenderFns.map(wrapRenderFunction).join(',')}],}`, options.vue)
+                  `${render.staticRenderFns.map(wrapRenderFunction).join(',')}],}`
+
+            if (options.stripWith !== false) {
+                renderScript = transpileVueTemplate(renderScript, options.vue)
+            }
+
             const result = script.split(matches[1])
                   .join(renderScript.replace('module.exports={', 'export default {').replace(/\}$/, ''))
 
@@ -168,5 +173,18 @@ export default function vueTransform (code, id, options) {
     const js = processScript(nodes.script[0], id, code, options, nodes)
     const css = processStyle(nodes.style, id, code, options, nodes)
 
+    const isProduction = process.env.NODE_ENV === 'production'
+    const isWithStripped = options.stripWith !== false
+
+    if (!isProduction && !isWithStripped) {
+        js.code = js.code + '\nmodule.exports.render._withStripped = true'
+    }
+
+    if (options.styleToImports === true) {
+        const style = css.map((s, i) => 'import ' + JSON.stringify(`${id}.${i}.vue.component.${s.lang}`) + ';').join(' ')
+
+        return { css, code: style + js.code, map: js.map }
+    }
+
     return { css, code: js.code, map: js.map }
 }

test/test.js

@@ -1,5 +1,6 @@
 /* global describe, it */
 var vuePlugin = require('../')
+var cssPlugin = require('rollup-plugin-css-only')
 var assert = require('assert')
 var fs = require('fs')
 var rollup = require('rollup')
@@ -52,3 +53,32 @@ describe('rollup-plugin-vue', function () {
               test(file.substr(0, file.length - 4))
           })
 })
+
+describe('styleToImports', function () {
+ it('should convert style to import', function () {
+   var entry = './fixtures/style.vue'
+   var expectedCss = read('expects/style.css')
+   var actualCss
+
+   return rollup.rollup({
+       format: 'cjs',
+       entry: entry,
+       plugins: [
+         vuePlugin({
+           styleToImports: true,
+         }),
+         cssPlugin({
+           output: function (css) {
+             actualCss = css
+           },
+         }),
+       ],
+   }).then(function (bundle) {
+     bundle.generate()
+
+     assert.equal(expectedCss.trim(), actualCss.trim(), 'should import style')
+   }).catch(function (error) {
+       throw error
+   })
+ })
+})

yarn.lock

@@ -1509,6 +1509,12 @@ rollup-plugin-buble@^0.14.0:
     buble "^0.14.0"
     rollup-pluginutils "^1.5.0"
 
+rollup-plugin-css-only@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-css-only/-/rollup-plugin-css-only-0.1.0.tgz#1a9f20c034400a3ab600df3bf6490afab0bbfc48"
+  dependencies:
+    rollup-pluginutils "^1.5.2"
+
 rollup-plugin-replace@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/rollup-plugin-replace/-/rollup-plugin-replace-1.1.1.tgz#396315ded050a6ce43b9518a886a3f60efb1ea33"