@better-css-modules/esbuild 0.1.2 → 0.2.0

package/README.md

@@ -1,41 +1,34 @@
 # @better-css-modules/esbuild
 
-esbuild plugin for better-css-modules. Automatically generates `.d.ts` type definitions for CSS Modules.
+esbuild plugin for better-css-modules. It generates the `.d.ts` files for CSS Modules when a build starts, and puts every module in the cascade layer the config names.
 
 ## Install
 
 ```bash
-pnpm add -D @better-css-modules/esbuild
+pnpm add -D @better-css-modules/esbuild @better-css-modules/core @better-css-modules/cli
 ```
 
+The config file imports `defineConfig` from `@better-css-modules/core`, and the CLI runs `check`. The plugin needs esbuild 0.28.
+
 ## Usage
 
 ```ts
 import esbuild from "esbuild";
 import betterCssModules from "@better-css-modules/esbuild";
 
-esbuild.build({
+await esbuild.build({
+  entryPoints: ["src/index.tsx"],
+  bundle: true,
+  outdir: "dist",
   plugins: [betterCssModules()],
 });
 ```
 
-## Options
+With a `layer`, esbuild's source map of a module points into the text with the layer wrapped around it, a few lines below where a rule was written.
 
-```ts
-betterCssModules({
-  include: ["src/**/*.module.css"],
-  exclude: [],
-  outDir: "__generated__",
-  silent: false,
-});
-```
+## Configuration
 
-| Option    | Type       | Default                   | Description                                  |
-| --------- | ---------- | ------------------------- | -------------------------------------------- |
-| `include` | `string[]` | `["src/**/*.module.css"]` | Glob patterns for target CSS Modules files   |
-| `exclude` | `string[]` | `[]`                      | Glob patterns to exclude                     |
-| `outDir`  | `string`   | `"__generated__"`         | Output directory for generated `.d.ts` files |
-| `silent`  | `boolean`  | `false`                   | Suppress console output                      |
+The plugin takes one option, the config file to use, relative to the working directory: `betterCssModules({ config: "apps/web/better-css-modules.config.ts" })`. By default it reads the `better-css-modules.config.*` in the working directory, the same file the CLI reads. The directory of the config file is the project root, and `include`, `outDir` and the search for sources stay inside it, so put the config in a directory that holds the stylesheets and the sources. See the project README for the [Quick Start](https://github.com/k35o/better-css-modules#quick-start), which sets up `tsconfig.json`, the [configuration](https://github.com/k35o/better-css-modules#configuration) and [cascade layers](https://github.com/k35o/better-css-modules#cascade-layers).
 
 ## License
 

package/dist/index.d.mts

@@ -1,6 +1,15 @@
-import { Options } from "@better-css-modules/unplugin";
-
+import { Plugin } from "esbuild";
+//#region ../unplugin/dist/index.d.mts
 //#region src/index.d.ts
-declare const _default: any;
+interface Options {
+  /**
+   * Path of the config file, relative to the working directory. By default,
+   * the `better-css-modules.config.*` in the working directory.
+   */
+  config?: string;
+}
 //#endregion
-export { type Options, _default as default };
+//#region src/index.d.ts
+declare const plugin: (options?: Options) => Plugin;
+//#endregion
+export { type Options, plugin as default };

package/dist/index.mjs

@@ -1,5 +1,63 @@
-import { unplugin } from "@better-css-modules/unplugin";
+import { createUnplugin } from "unplugin";
+import { loadConfig } from "@better-css-modules/core";
+import { createLayerWrapper, createSync, generateAndPrint } from "@better-css-modules/core/internal";
+//#region ../unplugin/dist/index.mjs
+const generations = /* @__PURE__ */ new Map();
+//#endregion
 //#region src/index.ts
-var src_default = unplugin.esbuild;
+const plugin = createUnplugin((options = {}, meta) => {
+	const cwd = process.cwd();
+	let setup;
+	const load = async () => {
+		const config = await loadConfig({
+			cwd,
+			config: options.config
+		});
+		return {
+			config,
+			sync: createSync(config),
+			wrap: createLayerWrapper(config)
+		};
+	};
+	return {
+		name: "better-css-modules",
+		enforce: "pre",
+		async buildStart() {
+			const { config } = await (setup = load());
+			if (meta.framework !== "vite") {
+				await generateAndPrint(config);
+				return;
+			}
+			const key = JSON.stringify(config);
+			if (!generations.has(key)) {
+				const generation = generateAndPrint(config);
+				generations.set(key, generation);
+				generation.catch(() => {
+					if (generations.get(key) === generation) generations.delete(key);
+				});
+			}
+			await generations.get(key);
+		},
+		transform: {
+			order: "pre",
+			filter: { id: /\.css$/ },
+			async handler(code, id) {
+				const { wrap } = await (setup ??= load());
+				const wrapped = await wrap(code, id, (file) => this.addWatchFile(file));
+				if (!wrapped) return;
+				return meta.framework === "esbuild" ? wrapped.code : wrapped;
+			}
+		},
+		esbuild: {
+			onLoadFilter: /\.css$/,
+			loader: "default"
+		},
+		async watchChange(id) {
+			if (meta.framework !== "vite") return;
+			generations.clear();
+			await (await setup?.catch(() => void 0))?.sync(id);
+		}
+	};
+}).esbuild;
 //#endregion
-export { src_default as default };
+export { plugin as default };

package/package.json

@@ -1,6 +1,14 @@
 {
   "name": "@better-css-modules/esbuild",
-  "version": "0.1.2",
+  "version": "0.2.0",
+  "description": "esbuild plugin for better-css-modules",
+  "keywords": [
+    "css-modules",
+    "design-tokens",
+    "dts",
+    "esbuild",
+    "typescript"
+  ],
   "license": "MIT",
   "author": "k8o",
   "repository": {
@@ -12,20 +20,29 @@
     "dist"
   ],
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "exports": {
     ".": {
-      "types": {
-        "import": "./dist/index.d.mts",
-        "require": "./dist/index.d.cts"
-      },
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     }
   },
   "dependencies": {
-    "@better-css-modules/unplugin": "0.1.2"
+    "unplugin": "3.0.0",
+    "@better-css-modules/core": "0.2.0"
+  },
+  "devDependencies": {
+    "esbuild": "0.28.2",
+    "@better-css-modules/unplugin": "0.1.3"
+  },
+  "peerDependencies": {
+    "esbuild": "^0.28.0"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
   }
 }

package/dist/index.cjs

@@ -1,4 +0,0 @@
-//#region src/index.ts
-var src_default = require("@better-css-modules/unplugin").unplugin.esbuild;
-//#endregion
-module.exports = src_default;

package/dist/index.d.cts

@@ -1,6 +0,0 @@
-import { Options } from "@better-css-modules/unplugin";
-
-//#region src/index.d.ts
-declare const _default: any;
-//#endregion
-export { type Options, _default as default };