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

Author: lgraziani2712

README.md

@@ -117,6 +117,10 @@ export = styles;
 
 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.
+
 #### named exports (enable tree shaking)
 
 With `-e` or `--namedExports`, types are exported as named exports as opposed to default exports.
@@ -177,6 +181,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.namedExports`: Use named exports as opposed to default exports to enable tree shaking. Requires `import * as style from './file.module.css';` (default: `false`)
 - `option.EOL`: EOL (end of line) for the generated `d.ts` files. Possible values `'\n'` or `'\r\n'`(default: `os.EOL`).
 

src/cli.ts

@@ -28,6 +28,9 @@ const yarg = yargs
   .alias('c', 'camelCase')
   .describe('c', 'Convert CSS class tokens to camelcase')
   .boolean('c')
+  .alias('sq', 'singleQuote')
+  .describe('sq', 'Use single quotes for writing the keys when they have a dash')
+  .boolean('sq')
   .alias('e', 'namedExports')
   .describe('e', 'Use named exports as opposed to default exports to enable tree shaking.')
   .boolean('e')
@@ -66,6 +69,7 @@ async function main(): Promise<void> {
     outDir: argv.o,
     watch: argv.w,
     camelCase: argv.c,
+    singleQuote: argv.sq,
     namedExports: argv.e,
     dropExtension: argv.d,
     silent: argv.s,

src/dts-content.ts

@@ -21,6 +21,7 @@ interface DtsContentOptions {
   rawTokenList: string[];
   namedExports: boolean;
   camelCase: CamelCaseOption;
+  singleQuote?: boolean;
   EOL: string;
 }
 
@@ -33,6 +34,7 @@ export class DtsContent {
   private rawTokenList: string[];
   private namedExports: boolean;
   private camelCase: CamelCaseOption;
+  private singleQuote?: boolean;
   private resultList: string[];
   private EOL: string;
 
@@ -45,6 +47,7 @@ export class DtsContent {
     this.rawTokenList = options.rawTokenList;
     this.namedExports = options.namedExports;
     this.camelCase = options.camelCase;
+    this.singleQuote = options.singleQuote;
     this.EOL = options.EOL;
 
     // when using named exports, camelCase must be enabled by default
@@ -71,11 +74,13 @@ export class DtsContent {
       );
     }
 
-    return (
+    const data = (
       ['declare const styles: {', ...this.resultList.map(line => '  ' + line), '};', 'export = styles;', ''].join(
         os.EOL,
       ) + this.EOL
     );
+
+    return this.singleQuote ? data.replace(/\"/g, "'") : data;
   }
 
   public get tokens(): string[] {

src/dts-creator.ts

@@ -10,6 +10,7 @@ interface DtsCreatorOptions {
   searchDir?: string;
   outDir?: string;
   camelCase?: CamelCaseOption;
+  singleQuote?: boolean;
   namedExports?: boolean;
   dropExtension?: boolean;
   EOL?: string;
@@ -24,6 +25,7 @@ export class DtsCreator {
   private inputDirectory: string;
   private outputDirectory: string;
   private camelCase: CamelCaseOption;
+  private singleQuote?: boolean;
   private namedExports: boolean;
   private dropExtension: boolean;
   private EOL: string;
@@ -36,6 +38,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.namedExports = !!options.namedExports;
     this.dropExtension = !!options.dropExtension;
@@ -60,6 +63,7 @@ export class DtsCreator {
 
       const content = new DtsContent({
         dropExtension: this.dropExtension,
+        singleQuote: this.singleQuote,
         rootDir: this.rootDir,
         searchDir: this.searchDir,
         outDir: this.outDir,

src/run.ts

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

test/dts-creator.spec.ts

@@ -233,6 +233,40 @@ declare const styles: {
 };
 export = styles;
 
+`,
+          );
+          done();
+        });
+      });
+    });
+
+    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();