Prevent empty css

Problems addressed: - When there are no styles on a Vue single-file-component and there is an out path defined in the extract-css plugin, the file is created anyway. - When the directory provided by the out path doesn't exist, the css file isn't created and the write action silently fails. This proposal tries to block the write action on empty styles (can be bypassed with the allowEmpty option) and creates the directory if it does not exist.
vuejs · pedro-mm-pereira · Jan 29, 2018 · Jan 29, 2018 · 11652bf532b5634cc9c8a1923902c63c875768ce
commit 11652bf532b5634cc9c8a1923902c63c875768ce
diff --git a/plugins/extract-css.js b/plugins/extract-css.js
@@ -1,4 +1,5 @@
 var fs = require('fs')
+var path = require('path')
 var compiler = require('../lib/compiler')
 
 module.exports = function (b, opts) {
@@ -8,17 +9,23 @@ module.exports = function (b, opts) {
 
   var styles = Object.create(null)
   var outPath = opts.out || opts.o || 'bundle.css'
+  var allowEmpty = opts.allowEmpty || opts.empty || false
 
   b.on('bundle', function (bs) {
     bs.on('end', function () {
-      var css = Object.keys(styles)
-        .map(function (file) { return styles[file] })
-        .join('\n')
-      if (typeof outPath === 'object' && outPath.write) {
-        outPath.write(css)
-        outPath.end()
-      } else if (typeof outPath === 'string') {
-        fs.writeFile(outPath, css, function () {})
+      if (allowEmpty || (!allowEmpty && Object.keys(styles)[0] !== undefined)) {
+        var css = Object.keys(styles)
+          .map(function (file) { return styles[file] })
+          .join('\n')
+        if (typeof outPath === 'object' && outPath.write) {
+          outPath.write(css)
+          outPath.end()
+        } else if (typeof outPath === 'string') {
+          if (!fs.existsSync(path.dirname(outPath))) {
+            fs.mkdirSync(path.dirname(outPath))
+          }
+          fs.writeFile(outPath, css, function () {})
+        }
       }
     })
   })