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.
@@ -183,6 +187,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.allowArbitraryExtensions`: Output filenames that will be compatible with the "arbitrary file extensions" TypeScript feature
 - `option.EOL`: EOL (end of line) for the generated `d.ts` files. Possible values `'\n'` or `'\r\n'`(default: `os.EOL`).

src/cli.ts

@@ -37,6 +37,11 @@ const yarg = yargs(hideBin(process.argv))
       type: 'boolean',
       alias: 'camelCase',
     },
+    sq: {
+      desc: 'Use single quotes for writing the keys when they have a dash',
+      type: 'boolean',
+      alias: 'singleQuote',
+    },
     e: {
       type: 'boolean',
       desc: 'Use named exports as opposed to default exports to enable tree shaking.',
@@ -87,6 +92,7 @@ async function main(): Promise<void> {
     outDir: argv.o,
     watch: argv.w,
     camelCase: argv.c,
+    singleQuote: argv.sq,
     namedExports: argv.e,
     dropExtension: argv.d,
     allowArbitraryExtensions: argv.a,

src/dts-content.ts

@@ -18,6 +18,7 @@ interface DtsContentOptions {
   namedExports: boolean;
   allowArbitraryExtensions: boolean;
   camelCase: CamelCaseOption;
+  singleQuote?: boolean;
   EOL: string;
 }
 
@@ -31,6 +32,7 @@ export class DtsContent {
   private namedExports: boolean;
   private allowArbitraryExtensions: boolean;
   private camelCase: CamelCaseOption;
+  private quote: '"' | "'";
   private resultList: string[];
   private EOL: string;
 
@@ -44,6 +46,7 @@ export class DtsContent {
     this.namedExports = options.namedExports;
     this.allowArbitraryExtensions = options.allowArbitraryExtensions;
     this.camelCase = options.camelCase;
+    this.quote = options.singleQuote ? "'" : '"';
     this.EOL = options.EOL;
 
     // when using named exports, camelCase must be enabled by default
@@ -71,11 +74,12 @@ export class DtsContent {
       );
     }
 
-    return (
+    const data =
       ['declare const styles: {', ...this.resultList.map(line => '  ' + line), '};', 'export = styles;', ''].join(
         this.EOL,
-      ) + this.EOL
-    );
+      ) + this.EOL;
+
+    return data;
   }
 
   public get tokens(): string[] {
@@ -152,7 +156,7 @@ export class DtsContent {
 
     const result = this.rawTokenList
       .map(k => convertKey(k))
-      .map(k => (!this.namedExports ? 'readonly "' + k + '": string;' : 'const ' + k + ': string;'))
+      .map(k => (!this.namedExports ? `readonly ${this.quote}${k}${this.quote}: string;` : 'const ' + k + ': string;'))
       .sort();
 
     return result;

src/dts-creator.ts

@@ -12,6 +12,7 @@ interface DtsCreatorOptions {
   searchDir?: string;
   outDir?: string;
   camelCase?: CamelCaseOption;
+  singleQuote?: boolean;
   namedExports?: boolean;
   allowArbitraryExtensions?: boolean;
   dropExtension?: boolean;
@@ -26,6 +27,7 @@ export class DtsCreator {
   private loader: FileSystemLoader;
   private inputDirectory: string;
   private camelCase: CamelCaseOption;
+  private singleQuote?: boolean;
   private namedExports: boolean;
   private allowArbitraryExtensions: boolean;
   private dropExtension: boolean;
@@ -38,6 +40,7 @@ export class DtsCreator {
     this.outDir = options.outDir || this.searchDir;
     this.loader = new FileSystemLoader(this.rootDir, options.loaderPlugins);
     this.inputDirectory = path.join(this.rootDir, this.searchDir);
+    this.singleQuote = options.singleQuote;
     this.camelCase = options.camelCase;
     this.namedExports = !!options.namedExports;
     this.allowArbitraryExtensions = !!options.allowArbitraryExtensions;
@@ -79,6 +82,7 @@ export class DtsCreator {
       namedExports: this.namedExports,
       allowArbitraryExtensions: this.allowArbitraryExtensions,
       camelCase: this.camelCase,
+      singleQuote: this.singleQuote,
       EOL: this.EOL,
     });
 

src/run.ts

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