feat(css): Add css watching

conveyal · Oct 4, 2016 · d0bf120 · d0bf120
1 parent e9f0991
commit d0bf120
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 68 deletions.
diff --git a/lib/budo.js b/lib/budo.js
@@ -3,7 +3,6 @@ const path = require('path')
 
 const transformJs = require('./jsTransform')
 const transformCss = require('./cssTransform')
-const util = require('./util')
 
 module.exports = function ({
   config,
@@ -55,22 +54,19 @@ module.exports = function ({
     })
   }
 
-  const organizedFiles = util.separateCssFiles(files)
+  const budoFiles = []
 
-  // build css files
-  for (var i = 0; i < organizedFiles.css.length; i++) {
-    const file = organizedFiles.css[i]
-    transformCss({
-      filename: file[0],
-      outfile: file[1]
-    })
-  }
-
-  // prepare array of js file for budo
-  const budoFiles = organizedFiles.notCss.reduce((prev, cur) => {
-    prev.push(cur.join(':'))
-    return prev
-  }, [])
+  files.map((file) => {
+    if (file[1].split('.').pop() === 'css') {
+      transformCss({
+        filename: file[0],
+        outfile: file[1],
+        watch: true
+      })
+    } else {
+      budoFiles.push(file.join(':'))
+    }
+  })
 
   budo
     .cli(budoFiles, budoOpts)

diff --git a/lib/build.js b/lib/build.js
@@ -3,7 +3,6 @@ const exorcist = require('exorcist')
 
 const browserify = require('./browserify')
 const transformCss = require('./cssTransform')
-const util = require('./util')
 
 module.exports = function ({
   config,
@@ -37,15 +36,15 @@ module.exports = function ({
     bundle()
   }
 
-  function buildCss ([filename, outfile]) {
-    transformCss({
-      filename,
-      outfile
-    })
-  }
-
-  const organizedFiles = util.separateCssFiles(files)
-
-  organizedFiles.css.forEach(buildCss)
-  organizedFiles.notCss.forEach(buildJs)
+  files.map((file) => {
+    if (file[1].split('.').pop() === 'css') {
+      transformCss({
+        filename: file[0],
+        outfile: file[1],
+        watch
+      })
+    } else {
+      buildJs(file)
+    }
+  })
 }
diff --git a/lib/cssTransform.js b/lib/cssTransform.js
@@ -1,39 +1,61 @@
 const fs = require('fs')
 const path = require('path')
 
+const chokidar = require('chokidar')
 const mimeType = require('mime')
 const postcss = require('postcss')
 
 module.exports = function ({
   filename,
-  outfile
+  outfile,
+  watch
 }) {
   if (!/\.css$/i.test(filename)) { return }
 
-  postcss([
-    require('postcss-import')({
-      plugins: [
-        base64ify(process.cwd()) // inline all url files
-      ]
-    }),
-    require('postcss-cssnext')(),
-    require('postcss-safe-parser'),
-    require('postcss-reporter')({ clearMessages: true })
-  ])
-    .process(fs.readFileSync(filename, 'utf8'), {
-      map: true,
-      to: `${path.basename(outfile, '.js')}.css`
-    })
-    .then(function (results) {
-      fs.writeFileSync(outfile, results.css)
-      if (results.map) {
-        fs.writeFile(`${outfile}.map`, results.map, handleErr)
-      }
-    })
-    .catch(function (err) {
-      console.error(err.stack)
-      process.exit(1)
-    })
+  let watcher
+
+  const transform = () => {
+    postcss([
+      require('postcss-import')({
+        plugins: [
+          base64ify(process.cwd()) // inline all url files
+        ],
+        onImport: (sources) => {
+          if (watch) {
+            sources.forEach((source) => {
+              watcher.add(source)
+            })
+          }
+        }
+      }),
+      require('postcss-cssnext')(),
+      require('postcss-safe-parser'),
+      require('postcss-reporter')({ clearMessages: true })
+    ])
+      .process(fs.readFileSync(filename, 'utf8'), {
+        map: true,
+        to: `${path.basename(outfile, '.js')}.css`
+      })
+      .then(function (results) {
+        fs.writeFileSync(outfile, results.css)
+        if (results.map) {
+          fs.writeFile(`${outfile}.map`, results.map, handleErr)
+        }
+      })
+      .catch(function (err) {
+        console.error(err.stack)
+        process.exit(1)
+      })
+  }
+
+  if (watch) {
+    watcher = chokidar.watch(filename)
+    watcher.on('add', transform)
+      .on('change', transform)
+      .on('unlink', transform)
+  }
+
+  transform()
 }
 
 const base64ify = postcss.plugin('postcss-base64ify', function () {

diff --git a/lib/util.js b/lib/util.js
@@ -56,21 +56,6 @@ exports.popMastarmFromArgv = function () {
   process.argv = process.argv.slice(0, 1).concat(process.argv.slice(2))
 }
 
-exports.separateCssFiles = function (files) {
-  const divided = {
-    css: [],
-    notCss: []
-  }
-  for (var i = 0; i < files.length; i++) {
-    if (files[i][1].split('.').pop() === 'css') {
-      divided.css.push(files[i])
-    } else {
-      divided.notCss.push(files[i])
-    }
-  }
-  return divided
-}
-
 exports.updateDependencies = function () {
   const checkDependenciesSync = require('check-dependencies').sync
   return checkDependenciesSync({

diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "browserify-markdown": "1.0.0",
     "budo": "^9.0.0",
     "check-dependencies": "^1.0.1",
+    "chokidar": "^1.6.0",
     "commander": "^2.9.0",
     "commitizen": "^2.8.2",
     "concat-stream": "^1.5.1",