feat: add singleQuote option to allow custom style for keys with dashes

Author: lgraziani2712

README.md

@@ -106,6 +106,10 @@ export const SomeComponent: string;
 
 See also [webpack css-loader's camelCase option](https://github.com/webpack/css-loader#camelcase).
 
+#### Use single quotes to class names in the .d.ts files
+
+With `-sq` or `--singleQuote`, you can configure what quote to use. Useful when tools like prettier format your .d.ts files.
+
 ## API
 
 ```sh
@@ -132,6 +136,7 @@ You can set the following options:
 * `option.searchDir`: Directory which includes target `*.css` files(default: `'./'`).
 * `option.outDir`: Output directory(default: `option.searchDir`).
 * `option.camelCase`: Camelize CSS class tokens.
+* `option.singleQuote`: Use single quotes on dashed keys.
 * `option.EOL`: EOL (end of line) for the generated `d.ts` files. Possible values `'\n'` or `'\r\n'`(default: `os.EOL`).
 
 #### `create(filepath, contents) => Promise(dtsContent)`

src/cli.ts

@@ -14,6 +14,10 @@ const yarg = yargs.usage('Create .css.d.ts from CSS modules *.css files.\nUsage:
   .alias('o', 'outDir').describe('o', 'Output directory')
   .alias('w', 'watch').describe('w', 'Watch input directory\'s css files or pattern').boolean('w')
   .alias('c', 'camelCase').describe('c', 'Convert CSS class tokens to camelcase')
+  .alias('sq', 'singleQuote').describe(
+    'sq',
+    'Use single quotes for writing the keys when they have a dash'
+  )
   .alias('d', 'dropExtension').describe('d', 'Drop the input files extension').boolean('d')
   .alias('s', 'silent').describe('s', 'Silent output. Do not show "files written" messages').boolean('s')
   .alias('h', 'help').help('h')
@@ -45,6 +49,7 @@ async function main(): Promise<void> {
     outDir: argv.o,
     watch: argv.w,
     camelCase: argv.c,
+    singleQuote: argv.sq,
     dropExtension: argv.d,
     silent: argv.s
   });

src/dts-content.ts

@@ -17,13 +17,15 @@ interface DtsContentOptions {
     rawTokenList: string[];
     resultList: string[];
     EOL: string;
+    singleQuote?: boolean;
 }
 
 export class DtsContent {
     private dropExtension: boolean;
     private rootDir: string;
     private searchDir: string;
     private outDir: string;
+    private singleQuote?: boolean;
     private rInputPath: string;
     private rawTokenList: string[];
     private resultList: string[];
@@ -34,6 +36,7 @@ export class DtsContent {
         this.rootDir = options.rootDir;
         this.searchDir = options.searchDir;
         this.outDir = options.outDir;
+        this.singleQuote = options.singleQuote;
         this.rInputPath = options.rInputPath;
         this.rawTokenList = options.rawTokenList;
         this.resultList = options.resultList;
@@ -46,13 +49,14 @@ export class DtsContent {
 
     public get formatted(): string {
         if(!this.resultList || !this.resultList.length) return '';
-        return [
+        const data = [
             'declare const styles: {',
             ...this.resultList.map(line => '  ' + line),
             '};',
             'export = styles;',
             ''
-        ].join(os.EOL) + this.EOL;
+        ].join(this.EOL);
+        return this.singleQuote ? data.replace(/\"/g, "'") : data;
     }
 
     public get tokens(): string[] {

src/dts-creator.ts

@@ -14,6 +14,7 @@ interface DtsCreatorOptions {
   searchDir?: string;
   outDir?: string;
   camelCase?: CamelCaseOption;
+  singleQuote?: boolean;
   dropExtension?: boolean;
   EOL?: string;
   loaderPlugins?: Plugin<any>[];
@@ -26,6 +27,7 @@ export class DtsCreator {
   private loader: FileSystemLoader;
   private inputDirectory: string;
   private outputDirectory: string;
+  private singleQuote?: boolean;
   private camelCase: boolean | 'dashes' | undefined;
   private dropExtension: boolean;
   private EOL: string;
@@ -38,6 +40,7 @@ export class DtsCreator {
     this.loader = new FileSystemLoader(this.rootDir, options.loaderPlugins);
     this.inputDirectory = path.join(this.rootDir, this.searchDir);
     this.outputDirectory = path.join(this.rootDir, this.outDir);
+    this.singleQuote = options.singleQuote;
     this.camelCase = options.camelCase;
     this.dropExtension = !!options.dropExtension;
     this.EOL = options.EOL || os.EOL;
@@ -63,10 +66,11 @@ export class DtsCreator {
 
       const result = keys
         .map(k => convertKey(k))
-        .map(k => 'readonly "' + k + '": string;')
+        .map(k => `readonly ${k.includes('-') ? `"${k}"` : k}: string;`);
 
       const content = new DtsContent({
         dropExtension: this.dropExtension,
+        singleQuote: this.singleQuote,
         rootDir: this.rootDir,
         searchDir: this.searchDir,
         outDir: this.outDir,

src/run.ts

@@ -14,6 +14,7 @@ interface RunOptions {
     outDir?: string;
     watch?: boolean;
     camelCase?: boolean;
+    singleQuote?: boolean;
     dropExtension?: boolean;
     silent?: boolean;
 }
@@ -27,6 +28,7 @@ export async function run(searchDir: string, options: RunOptions = {}): Promise<
         outDir: options.outDir,
         camelCase: options.camelCase,
         dropExtension: options.dropExtension,
+        singleQuote: options.singleQuote,
     });
 
     const writeFile = async (f: string): Promise<void> => {

test/dts-creator.spec.ts

@@ -179,6 +179,40 @@ export = styles;
     });
   });
 
+  describe('#singleQuote option', () => {
+    it('singleQuote == undefined: returns same as before', done => {
+      new DtsCreator().create('test/kebabed.css').then(content => {
+        assert.equal(
+          content.formatted,
+          `\
+declare const styles: {
+  readonly "my-class": string;
+};
+export = styles;
+`
+        );
+        done();
+      });
+    });
+
+    it('singleQuote == true: returns kebab keys with single quote', done => {
+      new DtsCreator({ singleQuote: true, EOL: '\n' })
+        .create('test/kebabedUpperCase.css')
+        .then(content => {
+          assert.equal(
+            content.formatted,
+            `\
+declare const styles: {
+  readonly 'My-class': string;
+};
+export = styles;
+`
+          );
+          done();
+        });
+      });
+    });
+
   describe('#writeFile', () => {
     it('accepts a postprocessor function', done => {
       new DtsCreator()