v3.0.1: add ability to custom emit dts outdir

Author: indooorsman

changelog.md

@@ -1,3 +1,6 @@
+## V3.0.1
+- add ability to custom ts declaration file outdir
+
 ## V3.0.0
 This version has some breaking changes:
 - drop postcss-module, as a result most of postcss-module configurations are removed as well

index.d.ts

@@ -1,5 +1,7 @@
 import type { Plugin, PluginBuild } from 'esbuild';
 
+declare type EmitDtsConfig = Partial<Record<'.d.css.ts' | '.css.d.ts' | '*', string>>;
+
 declare interface BuildOptions {
   /**
    * force to build css modules files even if `bundle` is disabled in esbuild
@@ -16,9 +18,19 @@ declare interface BuildOptions {
    * - `.css.d.ts` : emit `xxx.css.d.ts`
    * - `.d.css.ts` : emit `xxx.d.css.ts` (from typescript@5, see https://www.typescriptlang.org/tsconfig#allowArbitraryExtensions)
    * - `true` : emit both `xxx.css.d.ts` and `xxx.d.css.ts`
+   * by default the dts files would be generated in `outdir` of esbuild config, if you want to custom outdir of these dts files:
+   * ```js
+   * {
+   *   emitDeclarationFile: {
+   *     '*': 'custom/path/for/all',
+   *     '.css.d.ts': 'custom/path/for/*.css.d.ts',
+   *     '.d.css.ts': 'custom/path/for/*.d.css.ts'
+   *   }
+   * }
+   * ```
    * @default false
    */
-  emitDeclarationFile?: boolean | '.d.css.ts' | '.css.d.ts';
+  emitDeclarationFile?: boolean | '.d.css.ts' | '.css.d.ts' | EmitDtsConfig;
   /**
    * set to false to not inject generated css into page;
    * @description
@@ -98,6 +110,8 @@ declare interface BuildOptions {
 declare function CssModulesPlugin(options?: BuildOptions): Plugin;
 
 declare namespace CssModulesPlugin {
+  export type EmitDts = EmitDtsConfig;
+
   export interface Options extends BuildOptions {}
 
   export interface BuildContext {

index.js

@@ -105,16 +105,31 @@ export const setup = (build, _options) => {
     });
 
     if (emitDts) {
+      /** @type {('.d.css.ts'|'.css.d.ts')[]} */
       const dtsExts = [];
+      /** @type {import('./index.js').EmitDts} */
+      let outdirs = {};
       if (emitDts === '.d.css.ts' || emitDts === '.css.d.ts') {
         dtsExts.push(emitDts);
-      } else {
+      } else if (emitDts === true) {
         dtsExts.push('.d.css.ts', '.css.d.ts');
+      } else if (typeof emitDts === 'object') {
+        outdirs = { ...emitDts };
+        if (emitDts['*']) {
+          dtsExts.push('.d.css.ts', '.css.d.ts');
+        } else {
+          emitDts['.css.d.ts'] && dtsExts.push('.css.d.ts');
+          emitDts['.d.css.ts'] && dtsExts.push('.d.css.ts');
+        }
       }
       const outdir = resolve(buildRoot, patchedBuild.initialOptions.outdir ?? '');
       const outbase = patchedBuild.initialOptions.outbase;
       dtsExts.forEach(async (dtsExt) => {
         let outDtsfile = resolve(outdir, rpath).replace(/\.css$/i, dtsExt);
+        const dtsOutdir = outdirs[dtsExt] || outdirs['*'];
+        if (dtsOutdir) {
+          outDtsfile = resolve(buildRoot, dtsOutdir, rpath).replace(/\.css$/i, dtsExt);
+        }
         if (outbase) {
           let normalized = normalize(outbase);
           if (normalized.endsWith(sep)) {
@@ -248,13 +263,13 @@ export const setup = (build, _options) => {
       });
 
       await Promise.all([
-        ...(moduleJsFiles.map(([src, dist]) => {
+        ...moduleJsFiles.map(([src, dist]) => {
           const fp = resolve(buildRoot, dist);
           const filename = basename(src) + outJsExt;
           const finalPath = resolve(dirname(fp), filename);
           log(`rename ${dist} to ${filename}`);
           return rename(fp, finalPath);
-        })),
+        }),
         ...jsFiles.map(([js, places]) => {
           const fulljs = resolve(buildRoot, js);
           return readFile(fulljs, { encoding: 'utf8' })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "esbuild-css-modules-plugin",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A esbuild plugin to bundle css modules into js(x)/ts(x).",
   "main": "./index.cjs",
   "module": "./index.js",

test/test.js

@@ -108,7 +108,8 @@ import cssModulesPlugin from '../index.js';
     plugins: [
       cssModulesPlugin({
         inject: false,
-        namedExports: true
+        namedExports: true,
+        emitDeclarationFile: true
       })
     ],
     logLevel: 'debug'
@@ -133,7 +134,10 @@ import cssModulesPlugin from '../index.js';
     write: true,
     plugins: [
       cssModulesPlugin({
-        emitDeclarationFile: true,
+        emitDeclarationFile: {
+          '.css.d.ts': './dist/no-bundle',
+          '.d.css.ts': './generated-dts'
+        },
         force: true,
         forceInlineImages: true,
         inject: '#my-styles-container'