diff --git a/package.json b/package.json index a39bc0b..e5f47e0 100644 --- a/package.json +++ b/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" diff --git a/src/index.ts b/src/index.ts index 1af1693..4b0b401 100644 --- a/src/index.ts +++ b/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, @@ -165,7 +165,9 @@ const postCSSPlugin = ({ ? "file" : "postcss-text", path: tmpFilePath, - watchFiles: getFilesRecursive(sourceDir), + watchFiles: [result.opts.from].concat( + getPostCssDependencies(result.messages) + ), pluginData: { originalPath: sourceFullPath, css: result.css @@ -263,4 +265,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; diff --git a/test/index.js b/test/index.js index 53c2a56..0095822 100644 --- a/test/index.js +++ b/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) { diff --git a/test/styles/watch2.css b/test/styles/watch2.css new file mode 100644 index 0000000..29af4d0 --- /dev/null +++ b/test/styles/watch2.css @@ -0,0 +1,5 @@ +@import "./watch3.css"; + +.Test { + display: block; +} diff --git a/test/styles/watch3.css b/test/styles/watch3.css new file mode 100644 index 0000000..55d7059 --- /dev/null +++ b/test/styles/watch3.css @@ -0,0 +1,3 @@ +.Test { + display: block; +} diff --git a/test/tests/watch2.ts b/test/tests/watch2.ts new file mode 100644 index 0000000..0132a11 --- /dev/null +++ b/test/tests/watch2.ts @@ -0,0 +1 @@ +import "../styles/watch2.css"; diff --git a/yarn.lock b/yarn.lock index b2a1667..06beac4 100644 --- a/yarn.lock +++ b/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==