Ts export behavior

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

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<void> {
     allowArbitraryExtensions: argv.a,
     silent: argv.s,
     listDifferent: argv.l,
+    esModule: argv.m,
   });
 }

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;
+
 `,
         );
       });

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
     );
   }
 

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;

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<void> {