Take postcss dir-dependencies into account

package.json

@@ -51,6 +51,7 @@
     "esbuild": "^0.11.2",
     "mocha": "^8.3.2",
     "normalize.css": "^8.0.1",
+    "postcss-import": "^14.0.2",
     "prettier": "^2.2.1",
     "typescript": "^4.2.3",
     "yorkie": "^2.0.0"

src/index.ts

@@ -1,5 +1,5 @@
 import { Plugin } from "esbuild";
-import { Plugin as PostCSSPlugin } from "postcss";
+import { Plugin as PostCSSPlugin, Message } from "postcss";
 import {
   ensureDir,
   readFile,
@@ -157,7 +157,9 @@ const postCSSPlugin = ({
         return {
           namespace: isModule ? "postcss-module" : "file",
           path: tmpFilePath,
-          watchFiles: getFilesRecursive(sourceDir),
+          watchFiles: [result.opts.from].concat(
+            getPostCssDependencies(result.messages)
+          ),
           pluginData: {
             originalPath: sourceFullPath
           }
@@ -240,4 +242,16 @@ function uniqueId(): string {
   return Date.now().toString(16) + (idCounter++).toString(16);
 }
 
+function getPostCssDependencies(messages: Message[]): string[] {
+  let dependencies = [];
+  for (const message of messages) {
+    if (message.type == "dir-dependency") {
+      dependencies.push(...getFilesRecursive(message.dir));
+    } else if (message.type == "dependency") {
+      dependencies.push(message.file);
+    }
+  }
+  return dependencies;
+}
+
 export default postCSSPlugin;

test/index.js

@@ -1,4 +1,5 @@
 const autoprefixer = require("autoprefixer"),
+  postCssImport = require("postcss-import"),
   { build } = require("esbuild"),
   postCSS = require("../dist"),
   { assert } = require("chai"),
@@ -45,7 +46,7 @@ describe("PostCSS esbuild tests", () => {
       })
       .catch(done);
   });
-  it("Works while waching css files", (done) => {
+  it("Works while waching css files directly", (done) => {
     let notTriggerTimeout = null;
     build({
       entryPoints: ["tests/watch.ts"],
@@ -77,6 +78,39 @@ describe("PostCSS esbuild tests", () => {
       })
       .catch(() => process.exit(1));
   });
+
+  it("Works while waching css files through dependencies", (done) => {
+    let notTriggerTimeout = null;
+    build({
+      entryPoints: ["tests/watch2.ts"],
+      bundle: true,
+      outdir: "dist",
+      watch: {
+        onRebuild: (error, result) => {
+          notTriggerTimeout = null;
+          if (error) return done(error);
+          assert(result);
+          done();
+        }
+      },
+      plugins: [
+        postCSS.default({
+          plugins: [autoprefixer, postCssImport]
+        })
+      ]
+    })
+      .then(() => {
+        // test if modifying the css actually triggers the onRebuild event
+        const data = `.Test { display: block; }`;
+        fs.writeFile("./styles/watch3.css", data, (err) => {
+          if (err) return done(err);
+          notTriggerTimeout = setTimeout(() => {
+            done("Watch file not triggered!");
+          }, 1000);
+        });
+      })
+      .catch(() => process.exit(1));
+  });
 });
 
 function test(entryPoint) {

test/styles/watch2.css

@@ -0,0 +1,5 @@
+@import "./watch3.css";
+
+.Test {
+  display: block;
+}

test/styles/watch3.css

@@ -0,0 +1,3 @@
+.Test {
+  display: block;
+}

test/tests/watch2.ts

@@ -0,0 +1 @@
+import "../styles/watch2.css";

yarn.lock

@@ -1002,11 +1002,25 @@ picomatch@^2.0.4, picomatch@^2.2.1:
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
+
 pify@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
+postcss-import@^14.0.2:
+  version "14.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.0.2.tgz#60eff77e6be92e7b67fe469ec797d9424cae1aa1"
+  integrity sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz"
@@ -1059,7 +1073,7 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
     uniq "^1.0.1"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^4.1.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
@@ -1095,6 +1109,13 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
+  dependencies:
+    pify "^2.3.0"
+
 readdirp@~3.5.0:
   version "3.5.0"
   resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz"
@@ -1133,7 +1154,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.2.0:
+resolve@^1.1.7, resolve@^1.2.0:
   version "1.20.0"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==