Add support for dir-dependency messages (#383)

* Add support for `dir-dependency` messages

* Fix DependencyGraph test

* update `if` statement for consistency

* Deduplicate recompile files using a set

* Add dependency tests

index.js

@@ -123,13 +123,17 @@ Promise.resolve()
 
         if (input.includes(file)) recompile.push(file)
 
+        const dependants = depGraph
+          .dependantsOf(file)
+          .concat(getAncestorDirs(file).flatMap(depGraph.dependantsOf))
+
         recompile = recompile.concat(
-          depGraph.dependantsOf(file).filter((file) => input.includes(file))
+          dependants.filter((file) => input.includes(file))
         )
 
         if (!recompile.length) recompile = input
 
-        return files(recompile)
+        return files([...new Set(recompile)])
           .then((results) => watcher.add(dependencies(results)))
           .then(printMessage)
           .catch(error)
@@ -271,9 +275,17 @@ function dependencies(results) {
     if (result.messages <= 0) return
 
     result.messages
-      .filter((msg) => (msg.type === 'dependency' ? msg : ''))
+      .filter((msg) =>
+        msg.type === 'dependency' || msg.type === 'dir-dependency' ? msg : ''
+      )
       .map(depGraph.add)
-      .forEach((dependency) => messages.push(dependency.file))
+      .forEach((dependency) => {
+        if (dependency.type === 'dir-dependency') {
+          messages.push(dependency.dir)
+        } else {
+          messages.push(dependency.file)
+        }
+      })
   })
 
   return messages
@@ -298,3 +310,14 @@ function error(err) {
   if (argv.watch) return
   process.exit(1)
 }
+
+// Input: '/imports/components/button.css'
+// Output: ['/imports/components', '/imports', '/']
+function getAncestorDirs(fileOrDir) {
+  const { root } = path.parse(fileOrDir)
+  if (fileOrDir === root) {
+    return []
+  }
+  const parentDir = path.dirname(fileOrDir)
+  return [parentDir, ...getAncestorDirs(parentDir)]
+}

lib/DependencyGraph.js

@@ -7,11 +7,18 @@ module.exports = function () {
   return {
     add(message) {
       message.parent = path.resolve(message.parent)
-      message.file = path.resolve(message.file)
-
       graph.addNode(message.parent)
-      graph.addNode(message.file)
-      graph.addDependency(message.parent, message.file)
+
+      if (message.type === 'dir-dependency') {
+        message.dir = path.resolve(message.dir)
+        graph.addNode(message.dir)
+        graph.addDependency(message.parent, message.dir)
+      } else {
+        message.file = path.resolve(message.file)
+        graph.addNode(message.file)
+        graph.addDependency(message.parent, message.file)
+      }
+
       return message
     },
     dependantsOf(node) {

test/watch.js

@@ -299,3 +299,198 @@ testCb('--watch does exit on closing stdin (Ctrl-D/EOF)', (t) => {
   })
   cp.stdin.end()
 })
+
+testCb('--watch watches dependencies', (t) => {
+  let cp
+
+  t.plan(2)
+
+  ENV('', ['s.css', 'a.css', 'b.css']).then((dir) => {
+    fs.writeFile(
+      path.join(dir, 'postcss.config.js'),
+      `
+        const fs = require('fs')
+        module.exports = {
+          plugins: [
+            (root, result) => {
+              const file = '${path.resolve(dir, 'a.css')}'
+              result.messages.push({
+                plugin: 'test',
+                type: 'dependency',
+                file,
+                parent: result.opts.from,
+              })
+              root.nodes = []
+              root.append(fs.readFileSync(file, 'utf8'))
+              return root
+            }
+          ]
+        }
+      `
+    )
+      .then(() => {
+        // Init watcher:
+        const watcher = chokidar.watch('.', {
+          cwd: dir,
+          ignoreInitial: true,
+          awaitWriteFinish: true,
+        })
+
+        // On the first output:
+        watcher.on('add', (p) => {
+          // Assert, then change the source file
+          if (p === 'output.css') {
+            isEqual(p, 'test/fixtures/a.css')
+              .then(() => read('test/fixtures/b.css'))
+              .then((css) => fs.writeFile(path.join(dir, 'a.css'), css))
+              .catch(done)
+          }
+        })
+
+        // When the change is picked up:
+        watcher.on('change', (p) => {
+          if (p === 'output.css') {
+            isEqual(p, 'test/fixtures/b.css')
+              .then(() => done())
+              .catch(done)
+          }
+        })
+
+        // Start postcss-cli:
+        watcher.on('ready', () => {
+          // Using exec() and quoting "*.css" to test watch's glob handling:
+          cp = exec(
+            `node ${path.resolve(
+              'bin/postcss'
+            )} "s.css" -o output.css --no-map -w`,
+            { cwd: dir }
+          )
+          cp.on('error', t.end)
+          cp.on('exit', (code) => {
+            if (code) t.end(code)
+          })
+        })
+
+        // Helper functions:
+        function isEqual(p, expected) {
+          return Promise.all([read(path.join(dir, p)), read(expected)]).then(
+            ([a, e]) => t.is(a, e)
+          )
+        }
+
+        function done(err) {
+          try {
+            cp.kill()
+          } catch {}
+
+          t.end(err)
+        }
+      })
+      .catch(t.end)
+  })
+
+  // Timeout:
+  setTimeout(() => t.end('test timeout'), 50000)
+})
+
+testCb('--watch watches directory dependencies', (t) => {
+  let cp
+
+  t.plan(2)
+
+  ENV('', ['s.css', 'base/level-1/b.css', 'base/level-1/level-2/a.css']).then(
+    (dir) => {
+      fs.writeFile(
+        path.join(dir, 'postcss.config.js'),
+        `
+          const fs = require('fs')
+          module.exports = {
+            plugins: [
+              (root, result) => {
+                result.messages.push({
+                  plugin: 'test',
+                  type: 'dir-dependency',
+                  dir: '${path.resolve(dir, 'base')}',
+                  parent: result.opts.from,
+                })
+                root.nodes = []
+                root.append(fs.readFileSync('${path.resolve(
+                  dir,
+                  'base/level-1/level-2/a.css'
+                )}', 'utf8'))
+                return root
+              }
+            ]
+          }
+        `
+      )
+        .then(() => {
+          // Init watcher:
+          const watcher = chokidar.watch('.', {
+            cwd: dir,
+            ignoreInitial: true,
+            awaitWriteFinish: true,
+          })
+
+          // On the first output:
+          watcher.on('add', (p) => {
+            // Assert, then change the source file
+            if (p === 'output.css') {
+              isEqual(p, 'test/fixtures/base/level-1/level-2/a.css')
+                .then(() => read('test/fixtures/base/level-1/b.css'))
+                .then((css) =>
+                  fs.writeFile(
+                    path.join(dir, 'base/level-1/level-2/a.css'),
+                    css
+                  )
+                )
+                .catch(done)
+            }
+          })
+
+          // When the change is picked up:
+          watcher.on('change', (p) => {
+            if (p === 'output.css') {
+              isEqual(p, 'test/fixtures/base/level-1/b.css')
+                .then(() => done())
+                .catch(done)
+            }
+          })
+
+          // Start postcss-cli:
+          watcher.on('ready', () => {
+            // Using exec() and quoting "*.css" to test watch's glob handling:
+            cp = exec(
+              `node ${path.resolve(
+                'bin/postcss'
+              )} "s.css" -o output.css --no-map -w`,
+              { cwd: dir }
+            )
+            cp.on('error', t.end)
+            cp.on('exit', (code) => {
+              if (code) t.end(code)
+            })
+          })
+
+          // Helper functions:
+          function isEqual(p, expected) {
+            return Promise.all([read(path.join(dir, p)), read(expected)]).then(
+              ([a, e]) => t.is(a, e)
+            )
+          }
+
+          function done(err) {
+            try {
+              cp.kill()
+            } catch {}
+
+            t.end(err)
+          }
+        })
+        .catch(t.end)
+    }
+  )
+
+  // Timeout:
+  setTimeout(() => t.end('test timeout'), 50000)
+})