Update style behaviour

Author: thgh

dist/rollup-plugin-vue.common.js

@@ -7,14 +7,14 @@
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var humanSize = _interopDefault(require('human-size'));
 var rollupPluginutils = require('rollup-pluginutils');
+var fs = require('fs');
 var deIndent = _interopDefault(require('de-indent'));
 var htmlMinifier = _interopDefault(require('html-minifier'));
 var parse5 = _interopDefault(require('parse5'));
 var validateTemplate = _interopDefault(require('vue-template-validator'));
 var path = require('path');
-var fs = require('fs');
-var humanSize = _interopDefault(require('human-size'));
 
 var options = {
   htmlMinifier: {
@@ -145,25 +145,6 @@ function vueTransform (code, filePath) {
   return output
 }
 
-function writeStyles (content, lang, bundle) {
-  // Merge content and lang
-  var data = {}
-  for (var key in content) {
-    data[lang[key]] = (data[lang[key]] || '') + content[key]
-  }
-
-  // Write files
-  for (var key$1 in data) {
-    var ext = '.' + key$1
-    var dest = bundle.replace('.js', ext)
-    if (dest.indexOf(ext) === -1) {
-      dest += ext
-    }
-    console.log('Writing', humanSize(data[key$1].length), 'to', dest)
-    fs.writeFileSync(dest, data[key$1])
-  }
-}
-
 function vue (options) {
   if ( options === void 0 ) options = {};
 
@@ -174,10 +155,6 @@ function vue (options) {
 
   return {
     name: 'vue',
-    options: function options$1 (options) {
-      // Get the bundle destination
-      dest = options.dest
-    },
     transform: function transform (source, id) {
       if (!filter(id) || !id.endsWith('.vue')) {
         return null
@@ -194,16 +171,30 @@ function vue (options) {
       // Component javascript with inlined html template
       return ref.js
     },
-    banner: function banner () {
-      // Abusing the banner method to write styles
-      var count = 0
+    ongenerate: function ongenerate (opts) {
+
+      // Combine all stylesheets
+      var css = ''
       for (var key in cssContent) {
-        count += cssContent[key].length
+        css += cssContent[key]
       }
-      if (count) {
-        writeStyles(cssContent, cssLang, dest)
+
+      // Emit styles through callback or file
+      if (typeof options.css === 'function') {
+        return options.css(css)
+      }
+
+      // Guess destination filename
+      if (typeof options.css !== 'string') {
+        dest = opts.dest || 'bundle.js'
+        if (dest.endsWith('.js')) {
+          dest = dest.slice(0, -3)
+        }
+        options.css = dest + '.css'
       }
-      return ''
+
+      console.log('Writing', humanSize(css.length), 'to', options.css)
+      fs.writeFileSync(options.css, css)
     }
   }
 }

src/index.js

@@ -1,6 +1,8 @@
+import humanSize from 'human-size'
 import {createFilter} from 'rollup-pluginutils'
+import {writeFileSync} from 'fs'
+
 import vueTransform from './vueTransform'
-import writeStyles from './writeStyles'
 
 export default function vue (options = {}) {
   let filter = createFilter(options.include, options.exclude)
@@ -10,10 +12,6 @@ export default function vue (options = {}) {
 
   return {
     name: 'vue',
-    options (options) {
-      // Get the bundle destination
-      dest = options.dest
-    },
     transform (source, id) {
       if (!filter(id) || !id.endsWith('.vue')) {
         return null
@@ -30,16 +28,30 @@ export default function vue (options = {}) {
       // Component javascript with inlined html template
       return ref.js
     },
-    banner () {
-      // Abusing the banner method to write styles
-      var count = 0
+    ongenerate (opts) {
+
+      // Combine all stylesheets
+      var css = ''
       for (let key in cssContent) {
-        count += cssContent[key].length
+        css += cssContent[key]
       }
-      if (count) {
-        writeStyles(cssContent, cssLang, dest)
+
+      // Emit styles through callback or file
+      if (typeof options.css === 'function') {
+        return options.css(css)
       }
-      return ''
+
+      // Guess destination filename
+      if (typeof options.css !== 'string') {
+        dest = opts.dest || 'bundle.js'
+        if (dest.endsWith('.js')) {
+          dest = dest.slice(0, -3)
+        }
+        options.css = dest + '.css'
+      }
+
+      console.log('Writing', humanSize(css.length), 'to', options.css)
+      writeFileSync(options.css, css)
     }
   }
 }

src/writeStyles.js

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

test/expects/imports.js

@@ -0,0 +1,4 @@
+
+  input[type=text] {
+    color: red;
+  }

test/expects/style.css

@@ -0,0 +1,15 @@
+<template>
+  <main>
+    <basic></basic>
+  </main>
+</template>
+
+<script>
+import Basic from './Basic.vue'
+
+export default {
+  components: {
+    Basic
+  }
+}
+</script>

test/fixtures/imports.vue

@@ -16,23 +16,36 @@ function test (name) {
 
     var entry = './fixtures/' + name + '.vue'
     var expected = read('expects/' + name + '.js').replace(/\r/g, '')
+    var actualCss
     return rollup.rollup({
       format: 'cjs',
       entry: entry,
-      plugins: [vuePlugin()]
+      plugins: [vuePlugin({
+        css (css) {
+          actualCss = css
+        }
+      })]
     }).then(function (bundle) {
       var result = bundle.generate()
       var code = result.code
-      assert.equal(code, expected, 'should compile correctly')
+      assert.equal(code, expected, 'should compile code correctly')
+
+      // Check css output
+      if (name === 'style') {
+        var css = read('expects/' + name + '.css').replace(/\r/g, '')
+        assert.equal(actualCss, css, 'should output style tag content')
+      } else {
+        assert.equal(actualCss, '', 'should always call css()')
+      }
     }).catch(function (error) {
       throw error
     })
   })
 }
 
 describe('rollup-plugin-vue', function () {
-  fs.readdirSync(path.resolve(__dirname, 'expects'))
+  fs.readdirSync(path.resolve(__dirname, 'fixtures'))
     .forEach(function (file) {
-      test(file.substr(0, file.length - 3))
+      test(file.substr(0, file.length - 4))
     })
 })