Convert to ESM TypeScript build

Author: deanc

.github/workflows/release_package.yml

@@ -58,7 +58,6 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: "10"
           run_install: false
 
       # Setup Node.js environment
@@ -86,6 +85,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build
+        run: pnpm build
+
       # Configure Git
       - name: Git configuration
         run: |

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .output
+dist
 .DS_Store

.nvmrc

@@ -1 +1 @@
-v10.16.0
+v22.0.0

README.md

@@ -39,9 +39,9 @@ import "./test.css";
 Create file `build.js`:
 
 ```js
-const esbuild = require("esbuild");
-const autoprefixer = require("autoprefixer");
-const postCssPlugin = require("@deanc/esbuild-plugin-postcss");
+import esbuild from "esbuild";
+import autoprefixer from "autoprefixer";
+import postCssPlugin from "@deanc/esbuild-plugin-postcss";
 
 esbuild
   .build({

index.d.ts

@@ -2,17 +2,24 @@
   "name": "@deanc/esbuild-plugin-postcss",
   "version": "1.0.1",
   "description": "Plugin for esbuild to support postcss",
-  "main": "index.js",
-  "exports": "./index.js",
-  "types": "./index.d.ts",
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
   "packageManager": "pnpm@10.0.0",
   "files": [
-    "index.js",
-    "index.d.ts",
-    "README.md"
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
-    "test": "node --test tests/*.js"
+    "build": "tsc -p tsconfig.json",
+    "test": "pnpm build && node --test tests/*.js"
   },
   "author": {
     "name": "Dean Clatworthy",
@@ -36,7 +43,8 @@
     "esbuild": "^0.27.0"
   },
   "devDependencies": {
-    "esbuild": "^0.27.0"
+    "esbuild": "^0.27.0",
+    "typescript": "^5.7.3"
   },
   "engines": {
     "node": ">=22"

index.js

@@ -0,0 +1,65 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import postcss, { type AcceptedPlugin } from "postcss";
+import type { Plugin } from "esbuild";
+
+export interface PostCssPluginOptions {
+  plugins?: AcceptedPlugin[];
+}
+
+export default function postCssPlugin(
+  options: PostCssPluginOptions = {},
+): Plugin {
+  const plugins = options.plugins ?? [];
+
+  return {
+    name: "postcss",
+    setup(build) {
+      build.onResolve({ filter: /\.css$/, namespace: "file" }, async (args) => {
+        // Use esbuild path resolution for node_modules, tsconfig paths, etc.
+        // https://esbuild.github.io/plugins/#resolve
+        const resolution = await build.resolve(args.path, {
+          resolveDir: args.resolveDir,
+          kind: args.kind,
+        });
+
+        if (resolution.errors.length > 0) {
+          return { errors: resolution.errors };
+        }
+
+        return {
+          path: resolution.path,
+          namespace: "postcss",
+        };
+      });
+
+      build.onLoad(
+        { filter: /\.css$/, namespace: "postcss" },
+        async (args) => {
+          const sourceFullPath = args.path;
+          const css = await fs.readFile(sourceFullPath, "utf8");
+
+          if (plugins.length === 0) {
+            return {
+              contents: css,
+              loader: "css",
+              resolveDir: path.dirname(sourceFullPath),
+              watchFiles: [sourceFullPath],
+            };
+          }
+
+          const result = await postcss(plugins).process(css, {
+            from: sourceFullPath,
+          });
+
+          return {
+            contents: result.css,
+            loader: "css",
+            resolveDir: path.dirname(sourceFullPath),
+            watchFiles: [sourceFullPath],
+          };
+        },
+      );
+    },
+  };
+}

package.json

@@ -1,22 +1,23 @@
-const test = require("node:test");
-const assert = require("node:assert/strict");
-const path = require("node:path");
-const autoprefixer = require("autoprefixer");
-const fs = require("node:fs");
+import test from "node:test";
+import assert from "node:assert/strict";
+import path from "node:path";
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import autoprefixer from "autoprefixer";
+import esbuild from "esbuild";
+import postCssPlugin from "../dist/index.js";
 
 const autoPrefixerPlugin = autoprefixer({
   overrideBrowserslist: ["last 2 versions", "chrome >= 4"],
 });
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 process.chdir(path.resolve(__dirname));
 
-const postCssPlugin = require("../index.js");
-
 test("simplest case", async () => {
   fs.rmSync(".output", { recursive: true, force: true });
 
-  const esbuild = require("esbuild");
-
   await esbuild.build({
     entryPoints: ["basic/index.js"],
     bundle: true,