chore: Update readme

This reverts commit 07545133649c7ec93e18da9960080b318ec222da.

This feature used convert css files to js (mostly because it esbuild internally was using js loader because of export statement 🤷‍♂️)

README.md

@@ -25,7 +25,7 @@ const postCssPlugin = require("esbuild-plugin-postcss2");
 esbuild.build({
   ...
   plugins: [
-    postCssPlugin()
+    postCssPlugin.default()
   ]
   ...
 });
@@ -41,7 +41,7 @@ const autoprefixer = require("autoprefixer");
 esbuild.build({
   ...
   plugins: [
-    postCssPlugin({
+    postCssPlugin.default({
       plugins: [autoprefixer]
     })
   ]
@@ -54,7 +54,7 @@ esbuild.build({
 PostCSS modules are enabled by default. You can pass in a config or disable it with the `modules` field:
 
 ```js
-postCssPlugin({
+postCssPlugin.default({
   // pass in `postcss-modules` custom options
   // set to false to disable
   modules: {
@@ -69,6 +69,17 @@ postCssPlugin({
 });
 ```
 
+As per standard any file having `module` before the extension (ie `somefile.module.css`) will be treated as a module.
+The option `fileIsModule` allows to override this behavior.
+
+```js
+postCssPlugin.default({
+  // pass a custom `fileIsModule` option to tell whether a file should be treated as a module
+  // in this example we want everything to be a module except file finishing with `global.css`
+  fileIsModule: (filepath) => !filepath.endsWith(".global.css")
+});
+```
+
 ### Preprocessors
 
 To use preprocessors (`sass`, `scss`, `stylus`, `less`), just add the desired preprocessor as a `devDependency`:

package.json

@@ -1,8 +1,11 @@
 {
-  "name": "esbuild-plugin-postcss2",
-  "version": "0.0.9",
+  "name": "@frappe/esbuild-plugin-postcss2",
+  "version": "0.1.3",
   "description": "Use postcss with esbuild",
-  "repository": "https://github.com/martonlederer/esbuild-plugin-postcss2",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/frappe/esbuild-plugin-postcss2.git"
+  },
   "author": "Marton Lederer <marton@lederer.hu>",
   "license": "MIT",
   "private": false,
@@ -30,7 +33,6 @@
     "autoprefixer": "^10.2.5",
     "fs-extra": "^9.1.0",
     "less": "^4.x",
-    "postcss": "8.x",
     "postcss-modules": "^4.0.0",
     "resolve-file": "^0.3.0",
     "sass": "^1.x",
@@ -51,6 +53,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"
@@ -60,5 +63,9 @@
     "postcss": "8.x",
     "sass": "^1.x",
     "stylus": "^0.x"
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/frappe/esbuild-plugin-postcss2/issues"
+  },
+  "homepage": "https://github.com/frappe/esbuild-plugin-postcss2#readme"
 }

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,
@@ -30,6 +30,7 @@ interface PostCSSPluginOptions {
   sassOptions?: SassOptions;
   lessOptions?: Less.Options;
   stylusOptions?: StylusRenderOptions;
+  fileIsModule?: (filename: string) => boolean;
 }
 
 interface CSSModule {
@@ -39,14 +40,25 @@ interface CSSModule {
   };
 }
 
+export const defaultOptions: PostCSSPluginOptions = {
+  plugins: [],
+  modules: true,
+  rootDir: process.cwd(),
+  sassOptions: {},
+  lessOptions: {},
+  stylusOptions: {},
+  fileIsModule: null
+};
+
 const postCSSPlugin = ({
   plugins = [],
   modules = true,
   rootDir = process.cwd(),
   sassOptions = {},
   lessOptions = {},
-  stylusOptions = {}
-}: PostCSSPluginOptions): Plugin => ({
+  stylusOptions = {},
+  fileIsModule
+}: PostCSSPluginOptions = defaultOptions): Plugin => ({
   name: "postcss2",
   setup(build) {
     // get a temporary path where we can save compiled CSS
@@ -89,8 +101,11 @@ const postCSSPlugin = ({
 
         const sourceExt = path.extname(sourceFullPath);
         const sourceBaseName = path.basename(sourceFullPath, sourceExt);
-        const isModule = sourceBaseName.match(/\.module$/);
+        const isModule = fileIsModule
+          ? fileIsModule(sourceFullPath)
+          : sourceBaseName.match(/\.module$/);
         const sourceDir = path.dirname(sourceFullPath);
+        const watchFiles = [sourceFullPath];
 
         let tmpFilePath: string;
         if (args.kind === "entry-point") {
@@ -125,10 +140,14 @@ const postCSSPlugin = ({
         let css = sourceExt === ".css" ? fileContent : "";
 
         // parse files with preprocessors
-        if (sourceExt === ".sass" || sourceExt === ".scss")
-          css = (
-            await renderSass({ ...sassOptions, file: sourceFullPath })
-          ).css.toString();
+        if (sourceExt === ".sass" || sourceExt === ".scss") {
+          const sassResult = await renderSass({
+            ...sassOptions,
+            file: sourceFullPath
+          });
+          css = sassResult.css.toString();
+          watchFiles.push(...sassResult.stats.includedFiles);
+        }
         if (sourceExt === ".styl")
           css = await renderStylus(new TextDecoder().decode(fileContent), {
             ...stylusOptions,
@@ -150,6 +169,7 @@ const postCSSPlugin = ({
           from: sourceFullPath,
           to: tmpFilePath
         });
+        watchFiles.push(...getPostCssDependencies(result.messages));
 
         // Write result CSS
         await writeFile(tmpFilePath, result.css);
@@ -157,7 +177,7 @@ const postCSSPlugin = ({
         return {
           namespace: isModule ? "postcss-module" : "file",
           path: tmpFilePath,
-          watchFiles: getFilesRecursive(sourceDir),
+          watchFiles,
           pluginData: {
             originalPath: sourceFullPath
           }
@@ -226,7 +246,7 @@ function getFilesRecursive(directory: string): string[] {
     const name = path.join(directory, file);
 
     return statSync(name).isDirectory()
-      ? [...files, getFilesRecursive(name)]
+      ? [...files, ...getFilesRecursive(name)]
       : [...files, name];
   }, []);
 }
@@ -240,4 +260,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,66 @@ 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));
+  });
+
+  it("Works with custom module function", (done) => {
+    let testFilename = null;
+    build({
+      entryPoints: ["tests/basic.ts"],
+      bundle: true,
+      outdir: "dist",
+      plugins: [
+        postCSS.default({
+          plugins: [autoprefixer, postCssImport],
+          modules: true,
+          fileIsModule: (filename) => {
+            testFilename = filename;
+            return false;
+          }
+        })
+      ]
+    })
+      .then(() => {
+        // ensure the proper filename was passed
+        assert.match(testFilename, /styles\/basic\.css/);
+      })
+      .catch((e) => {
+        console.error(e);
+        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==