Fixed: CLI watcher now works watchs correctl multiples @import (1.8.2)

Close #123

Author: MoOx

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 1.8.2 - 2015-07-23
+
+- Fixed: CLI watcher now works watchs correctl multiples `@import`
+([#123](https://github.com/cssnext/cssnext/issues/123))
+
 # 1.8.1 - 2015-07-15
 
 - Added: cssnext now throw an error if used as a webpack loader to prevent

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssnext",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "Use tomorrow's CSS syntax, today",
   "keywords": [
     "css",

src/__tests__/cli.js

@@ -1,12 +1,14 @@
 /**
  * Test dependencies
  */
-const exec = require("child_process").exec
+import {exec} from "child_process"
 
-const test = require("tape")
+import test from "tape"
 
-const utils = require("./utils")
-const cssnext = require("..")
+import utils from "./utils"
+import cssnext from ".."
+
+import isBabel from "./utils/isBabel"
 
 /**
  * CLI tests
@@ -15,7 +17,7 @@ const input = utils.readFixture("cli")
 const output = utils.readFixture("cli.expected")
 
 // node bin is used to help for windows
-const cssnextBin = "node dist/bin"
+const cssnextBin = isBabel ? "babel-node src/bin" : "node dist/bin"
 
 test("cli", function(t) {
   let planned = 0

src/__tests__/cli.watcher.js

@@ -1,25 +1,27 @@
 /**
  * Test dependencies
  */
-const exec = require("child_process").exec
-const spawn = require("child_process").spawn
-const fs = require("fs")
+import {exec, spawn} from "child_process"
+import fs from "fs"
 
-const test = require("tape")
+import test from "tape"
 
-const utils = require("./utils")
+import utils from "./utils"
+
+import isBabel from "./utils/isBabel"
 
 // I don't success to call the kill() process from node and both Travis CI and
 // Appveyor so we avoid this test on this environnements
 if (!(process.env.TRAVIS || process.env.APPVEYOR)) {
   // node bin is used to help for windows
-  const cssnextBin = "node dist/bin"
+  const nodeBin = isBabel ? "babel-node" : "node"
+  const cssnextBin = isBabel ? "src/bin" : "dist/bin"
 
   test("cli/watcher", function(t) {
     let planned = 0
 
     const watchProcess = exec(
-      cssnextBin +
+      `${ nodeBin } ${ cssnextBin }` +
         " --watch src/__tests__/fixtures/cli.error.css" +
         " src/__tests__/fixtures/cli.output--watch.css",
       function(err) {
@@ -51,9 +53,10 @@ if (!(process.env.TRAVIS || process.env.APPVEYOR)) {
     const watchOut = "src/__tests__/fixtures/cli.output--watch-import.css"
 
     const watchImportProcess = spawn(
-      "node",
+      nodeBin,
       [
-        "dist/bin",
+        cssnextBin,
+        // "--verbose",
         "--watch",
         "src/__tests__/fixtures/cli.watch-import.css",
         watchOut,
@@ -69,7 +72,9 @@ if (!(process.env.TRAVIS || process.env.APPVEYOR)) {
     // cli.import2.css
     fs.writeFileSync(
       "src/__tests__/fixtures/cli.watch-import.css",
-      "/**/ @import 'cli.watch-import-import.css';"
+      "/**/ " +
+        "@import 'cli.watch-import-import.css';" +
+        "@import 'cli.watch-import-import2.css';"
     )
 
     // we are using setTimeout for the watcher to do his job
@@ -80,7 +85,7 @@ if (!(process.env.TRAVIS || process.env.APPVEYOR)) {
           watchOut,
           {encoding: "utf8"}
         ),
-        "/**/ watch{}",
+        "/**/ watch{}er{}",
         "should update the file"
       )
 

src/__tests__/fixtures/cli.watch-import-import.css

@@ -1 +1 @@
-watch{}
+watch{}

src/__tests__/fixtures/cli.watch-import-import2.css

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

src/__tests__/utils/isBabel.js

@@ -0,0 +1 @@
+export default typeof _babelPolyfill !== "undefined" && _babelPolyfill === true

src/bin.js

@@ -116,6 +116,20 @@ if (config.watch) {
 
   watcher = require("chokidar").watch(input, {ignoreInitial: true})
 
+  if (verbose) {
+    log(color.cyan("Watching"), input)
+  }
+
+  // https://github.com/paulmillr/chokidar/issues/288
+  // ready event might not be triggered at all
+  // watcher.on("ready", function() {
+  //   if (verbose) {
+  //     log(color.cyan("Watcher ready"), input)
+  //   }
+  // })
+
+  watcher.on("change", transform)
+
   // watch `@import`ed files
   if (config.import) {
     // keep a up to date list of imported files
@@ -131,10 +145,12 @@ if (config.watch) {
     }
 
     const watcherOnImport = function(imported) {
-      arrayDiff(importedFiles, imported).forEach(function(file) {
+      const toUnwatch = arrayDiff(importedFiles, imported)
+      const toWatch = arrayDiff(imported, importedFiles)
+      toUnwatch.forEach(function(file) {
         watcher.unwatch(rebaseFile(file))
       })
-      arrayDiff(imported, importedFiles).forEach(function(file) {
+      toWatch.forEach(function(file) {
         watcher.add(rebaseFile(file))
       })
       importedFiles = imported
@@ -195,16 +211,6 @@ function transform() {
 
 transform()
 
-if (watcher) {
-  watcher.on("ready", function() {
-    if (verbose) {
-      log(color.cyan("Watching"), input)
-    }
-
-    watcher.on("change", transform)
-  })
-}
-
 /**
  * log content prefixed by time
  *