Merge pull request MoOx#86 from cssnext/watch-imported

Watch imported

Author: MoOx

CHANGELOG.md

@@ -1,6 +1,7 @@
 # 1.2.0 - 2015-04-02
 
 - Added: pseudoElements single colon fallback for pseudoElements double colons
+- Added: `--watch` CLI option now checks for changes in imported files
 
 # 1.1.0 - 2015-03-05
 

bin/cssnext.js

@@ -84,6 +84,55 @@ if (input && !fs.existsSync(input)) {
 
 config.from = input
 
+// init & adjust watcher with postcss-import dependencies
+var watcher
+if (config.watch) {
+  if (!input || !output) {
+    console.error(colors.red("--watch option need both <input> & <output> files to work"))
+    exit(3)
+  }
+
+  watcher = require("chokidar").watch(input, {ignoreInitial: true})
+
+  // watch `@import`ed files
+  if (config.import) {
+    // keep a up to date list of imported files
+    var importedFiles = [input]
+    var arrayDiff = function(array, array2) {
+      return array.filter(function(i) {
+        return array2.indexOf(i) < 0
+      })
+    }
+
+    var watcherOnImport = function(imported) {
+      var filesToUnWatch = arrayDiff(importedFiles, imported)
+      console.log("unwtach: ", filesToUnWatch)
+      watcher.unwatch(filesToUnWatch)
+      importedFiles = imported
+      console.log("add:", importedFiles)
+      watcher.add(importedFiles)
+    }
+
+    // import need an object so we can pass onImport() cb
+    if (typeof config.import !== "object") {
+      config.import = {}
+    }
+
+    // keep the existing onImport callback if any
+    if (config.import.onImport) {
+      config.import.onImport = function(files) {
+        var originalOnImport = config.import.onImport
+        watcherOnImport(files)
+        originalOnImport(files)
+      }
+    }
+    // or just add the watcher updater onImport() cb
+    else {
+      config.import.onImport = watcherOnImport
+    }
+  }
+}
+
 function transform() {
   require("read-file-stdin")(input, function(err, buffer) {
     if (err) {
@@ -119,15 +168,13 @@ function transform() {
 
 transform()
 
-if (config.watch) {
-  if (!input || !output) {
-    console.error(colors.red("--watch option need both <input> & <output> files to work"))
-    exit(3)
-  }
-  require("node-watch")(input, transform)
-  if (verbose) {
-    log(colors.cyan("Watching"), input)
-  }
+if (watcher) {
+  watcher.on("ready", function() {
+    if (verbose) {
+      log(colors.cyan("Watching"), input)
+    }
+    watcher.on("all", transform)
+  })
 }
 
 /**

index.js

@@ -110,12 +110,12 @@ function cssnext(string, options) {
 
   // features
   Object.keys(cssnext.features).forEach(function(key) {
-    // feature is enabled if: not force disable && (force enabled || no data yet || !supported yet)
+    // feature is auto enabled if: not disable && (enabled || no data yet || !supported yet)
     if (
-      // feature is force disabled
+      // feature is not disabled
       features[key] !== false &&
       (
-        // feature is forced enabled
+        // feature is enabled
         features[key] === true ||
 
         // feature don't have any browsers data (yet)

package.json

@@ -29,11 +29,11 @@
   "dependencies": {
     "autoprefixer-core": "^5.0.0",
     "caniuse-api": "^1.2.1",
+    "chokidar": "^1.0.0-rc4",
     "colors": "^1.0.2",
     "commander": "^2.3.0",
     "csswring": "^3.0.0",
     "exit": "^0.1.2",
-    "node-watch": "^0.3.4",
     "object-assign": "^2.0.0",
     "pixrem": "^1.1.0",
     "pleeease-filters": "^1.0.0",

test/cli.js

@@ -2,6 +2,7 @@
  * Test dependencies
  */
 var exec = require("child_process").exec
+var fs = require("fs")
 
 var test = require("tape")
 
@@ -41,7 +42,7 @@ test("cli", function(t) {
   childProcess.stdin.end()
   planned+=1
 
-  exec(cssnextBin + " test/fixtures/cli.wtf.css", function(err, stdout, stderr) {
+  exec(cssnextBin + " test/fixtures/cli.dont-exist.css", function(err, stdout, stderr) {
     t.ok(err && err.code === 1, "should return an error when input file is unreadable")
     t.ok(utils.contains(stderr, "Unable to read file"), "should show that the input file is not found")
   })
@@ -133,6 +134,7 @@ test("cli", function(t) {
       t.ok(err && err.signal === "SIGTERM", "should only be killed by an interrupt when `--watch` option passed")
       if (err && !err.killed) { throw err }
     })
+
     var msgWatch = "should output error messages when `--watch` option passed"
     var watchTimeout = setTimeout(function() {
       t.fail(msgWatch)
@@ -146,6 +148,54 @@ test("cli", function(t) {
       }
     })
     planned+=2
+
+    // watch/import tests
+    var watchOut = "test/fixtures/cli.output--watch-import.css"
+    var watchImportProcess = exec(cssnextBin + " --watch test/fixtures/cli.watch-import.css " + watchOut, function(err) {
+      if (err && !err.killed) { throw err }
+    })
+
+    // watch an empty file doesn't seems to work great, so I am using
+    // /**/ to get a content
+    // yeah...
+
+    // trigger a change in cli.import.css to add a new watched file cli.import2.css
+    fs.writeFileSync("test/fixtures/cli.watch-import.css", "/**/ @import 'cli.watch-import-import.css';")
+
+    // we are using setTimeout for the watcher to do his job
+    setTimeout(function() {
+      // check the output has been updated (watcher works)
+      t.equal(fs.readFileSync(watchOut, {encoding:"utf8"}), "/**/ watch{}", "should update the file")
+
+      // remove this newly imported file
+      fs.writeFileSync("test/fixtures/cli.watch-import.css", "/**/")
+
+      // check the output has been update
+      setTimeout(function() {
+        t.equal(fs.readFileSync(watchOut, {encoding:"utf8"}), "/**/", "should update the file, again")
+
+        // previously imported file should not be watched anymore
+        // to check that we read output mtime, modify the file that should not be watched
+        // and check back that the output file has the same mtime
+        var outStat = fs.statSync(watchOut)
+        setTimeout(function() {
+          // trigger a change in previously imported file
+          var now = (new Date()).getTime()
+          fs.utimesSync("test/fixtures/cli.watch-import-import.css", now, now)
+
+          setTimeout(function() {
+            // this time, it should not trigger anything
+            var outStatAfter = fs.statSync(watchOut)
+            t.equal(outStat.mtime.getTime(), outStatAfter.mtime.getTime(), "should not modify a file if a previously imported file is modified")
+
+            utils.remove("cli.output--watch-import")
+            watchImportProcess.kill()
+          }, 2000)
+        }, 2000)
+      }, 2000)
+    }, 2000)
+
+    planned+=3
   }
 
   t.plan(planned)

test/fixtures/cli.watch-import-import.css

@@ -0,0 +1 @@
+watch{}

test/fixtures/cli.watch-import.css

@@ -0,0 +1 @@
+/**/