support CSS extraction

yyx990803 · yyx990803 · commit 13291e2a31f1 · 2016-06-18T13:38:17.000-04:00
diff --git a/index.js b/index.js
@@ -9,21 +9,28 @@ module.exports = function vueify (file, options) {
 
   var data = ''
   var stream = through(write, end)
+  stream.vueify = true
 
   function dependency(file) {
     stream.emit('file', file)
   }
 
+  function emitStyle (style) {
+    stream.emit('vueify-style', style)
+  }
+
   function write(buf) {
     data += buf
   }
 
   function end () {
     stream.emit('file', file)
     compiler.on('dependency', dependency)
+    compiler.on('style', emitStyle)
 
     compiler.compile(data, file, function(error, result) {
       compiler.removeListener('dependency', dependency)
+      compiler.removeListener('style', emitStyle)
       if (error) {
         stream.emit('error', error)
         // browserify doesn't log the stack by default...
diff --git a/lib/compiler.js b/lib/compiler.js
@@ -91,9 +91,16 @@ compiler.compile = function (content, filePath, cb) {
     // styles
     var style = resolvedParts.styles.join('\n')
     if (style) {
-      style = JSON.stringify(style)
-      output +=
-        'var __vueify_style_dispose__ = require("' + insertCSSPath + '").insert(' + style + ')\n'
+      // emit style
+      compiler.emit('style', {
+        file: filePath,
+        style: style
+      })
+      if (!process.env.VUEIFY_EXTRACT_CSS) {
+        style = JSON.stringify(style)
+        output +=
+          'var __vueify_style_dispose__ = require("' + insertCSSPath + '").insert(' + style + ')\n'
+      }
     }
     // script
     var script = resolvedParts.script
@@ -127,7 +134,9 @@ compiler.compile = function (content, filePath, cb) {
         '  if (!hotAPI.compatible) return\n' +
         '  module.hot.accept()\n' +
         // remove style tag on dispose
-        (style ? '  module.hot.dispose(__vueify_style_dispose__)\n' : '') +
+        (style && !process.env.VUEIFY_EXTRACT_CSS
+          ? '  module.hot.dispose(__vueify_style_dispose__)\n'
+          : '') +
         '  if (!module.hot.data) {\n' +
         // initial insert
         '    hotAPI.createRecord("' + id + '", __vue__options__)\n' +
diff --git a/plugins/extract-css.js b/plugins/extract-css.js
@@ -0,0 +1,29 @@
+process.env.VUEIFY_EXTRACT_CSS = true
+
+var fs = require('fs')
+
+module.exports = function (b, opts) {
+  var outPath = opts.out || opts.o || 'bundle.css'
+  var styles = Object.create(null)
+
+  b.on('bundle', function (bs) {
+    bs.on('end', function () {
+      fs.writeFile(outPath, Object.keys(styles)
+        .map(function (file) { return styles[file] })
+        .join('\n'))
+    })
+  })
+
+  b.on('reset', listen)
+  listen()
+
+  function listen () {
+    b.on('transform', function (tr, file) {
+      if (tr.vueify) {
+        tr.on('vueify-style', function (e) {
+          styles[e.file] = e.style
+        })
+      }
+    })
+  }
+}
