diff --git a/README.md b/README.md index 5b341ed6..baaaa2bf 100644 --- a/README.md +++ b/README.md @@ -155,6 +155,17 @@ With `-a` or `--allowArbitraryExtensions`, output filenames will be compatible w In essence, the `*.css.d.ts` extension now becomes `*.d.css.ts` so that you can import CSS modules in projects using ESM module resolution. +#### ESM style exports + +With `-m` or `--esModule`, the default exports will follow the ESM style of exports/imports. + +```typescript +declare const styles: { + readonly SomeComponent: string; +}; +export default styles; +``` + ## API ```sh diff --git a/src/cli.ts b/src/cli.ts index fecf33b0..a01477c3 100644 --- a/src/cli.ts +++ b/src/cli.ts @@ -33,7 +33,7 @@ const yarg = yargs(hideBin(process.argv)) alias: 'watch', }, c: { - desc: "Watch input directory's css files or pattern", + desc: 'Convert CSS class tokens to camelcase', type: 'boolean', alias: 'camelCase', }, @@ -57,6 +57,11 @@ const yarg = yargs(hideBin(process.argv)) alias: 'silent', desc: 'Silent output. Do not show "files written" messages', }, + m: { + type: 'boolean', + alias: 'esModule', + desc: 'sets target module style to ESM', + }, }) .alias('h', 'help') .help('h') @@ -92,5 +97,6 @@ async function main(): Promise { allowArbitraryExtensions: argv.a, silent: argv.s, listDifferent: argv.l, + esModule: argv.m, }); } diff --git a/src/dts-content.test.ts b/src/dts-content.test.ts index 0e20751c..0b846170 100644 --- a/src/dts-content.test.ts +++ b/src/dts-content.test.ts @@ -151,6 +151,22 @@ declare const styles: { }; export = styles; +`, + ); + }); + }); + + describe('#esModule option', () => { + it('esModule = true: returns esm style default export', async () => { + const content = await new DtsCreator({ esModule: true }).create('fixtures/testStyle.css'); + assert.equal( + content.formatted, + `\ +declare const styles: { + readonly "myClass": string; +}; +export default styles; + `, ); }); diff --git a/src/dts-content.ts b/src/dts-content.ts index 46448442..20e38f59 100644 --- a/src/dts-content.ts +++ b/src/dts-content.ts @@ -19,6 +19,7 @@ interface DtsContentOptions { allowArbitraryExtensions: boolean; camelCase: CamelCaseOption; EOL: string; + esModule: boolean; } export class DtsContent { @@ -33,6 +34,7 @@ export class DtsContent { private camelCase: CamelCaseOption; private resultList: string[]; private EOL: string; + private esModule: boolean; constructor(options: DtsContentOptions) { this.dropExtension = options.dropExtension; @@ -45,6 +47,7 @@ export class DtsContent { this.allowArbitraryExtensions = options.allowArbitraryExtensions; this.camelCase = options.camelCase; this.EOL = options.EOL; + this.esModule = options.esModule; // when using named exports, camelCase must be enabled by default // (see https://webpack.js.org/loaders/css-loader/#namedexport) @@ -72,9 +75,13 @@ export class DtsContent { } return ( - ['declare const styles: {', ...this.resultList.map(line => ' ' + line), '};', 'export = styles;', ''].join( - this.EOL, - ) + this.EOL + [ + 'declare const styles: {', + ...this.resultList.map(line => ' ' + line), + '};', + this.esModule ? 'export default styles;' : 'export = styles;', + '', + ].join(this.EOL) + this.EOL ); } diff --git a/src/dts-creator.ts b/src/dts-creator.ts index 230d5ca4..6c2e251f 100644 --- a/src/dts-creator.ts +++ b/src/dts-creator.ts @@ -17,6 +17,7 @@ interface DtsCreatorOptions { dropExtension?: boolean; EOL?: string; loaderPlugins?: Plugin[]; + esModule?: boolean; } export class DtsCreator { @@ -30,6 +31,7 @@ export class DtsCreator { private allowArbitraryExtensions: boolean; private dropExtension: boolean; private EOL: string; + private esModule: boolean; constructor(options?: DtsCreatorOptions) { if (!options) options = {}; @@ -43,6 +45,7 @@ export class DtsCreator { this.allowArbitraryExtensions = !!options.allowArbitraryExtensions; this.dropExtension = !!options.dropExtension; this.EOL = options.EOL || os.EOL; + this.esModule = !!options.esModule; } public async create( @@ -80,6 +83,7 @@ export class DtsCreator { allowArbitraryExtensions: this.allowArbitraryExtensions, camelCase: this.camelCase, EOL: this.EOL, + esModule: this.esModule, }); return content; diff --git a/src/run.ts b/src/run.ts index 05bd19ea..52f0dc02 100644 --- a/src/run.ts +++ b/src/run.ts @@ -14,6 +14,7 @@ interface RunOptions { dropExtension?: boolean; silent?: boolean; listDifferent?: boolean; + esModule?: boolean; } export async function run(searchDir: string, options: RunOptions = {}): Promise {