diff --git a/changelog.md b/changelog.md index b3a041f..de91344 100644 --- a/changelog.md +++ b/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 diff --git a/index.d.ts b/index.d.ts index b544ba9..77a3eb1 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,5 +1,7 @@ import type { Plugin, PluginBuild } from 'esbuild'; +declare type EmitDtsConfig = Partial>; + 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 { diff --git a/index.js b/index.js index 990e7ff..3856765 100644 --- a/index.js +++ b/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' }) diff --git a/package.json b/package.json index 0b4cc6f..8256678 100644 --- a/package.json +++ b/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", diff --git a/test/test.js b/test/test.js index ebf22ce..0447834 100644 --- a/test/test.js +++ b/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'