feat(export-type): add support for default export types

Author: skovy

__tests__/typescript/class-names-to-type-definitions.test.ts

@@ -1,17 +1,52 @@
-import { classNamesToTypeDefinitions } from "../../lib/typescript";
+import { classNamesToTypeDefinitions, ExportType } from "../../lib/typescript";
 
 describe("classNamesToTypeDefinitions", () => {
-  it("converts an array of class name strings to type definitions", () => {
-    const definition = classNamesToTypeDefinitions(["myClass", "yourClass"]);
+  describe("named", () => {
+    it("converts an array of class name strings to type definitions", () => {
+      const definition = classNamesToTypeDefinitions(
+        ["myClass", "yourClass"],
+        "named"
+      );
 
-    expect(definition).toEqual(
-      "export const myClass: string;\nexport const yourClass: string;\n"
-    );
+      expect(definition).toEqual(
+        "export const myClass: string;\nexport const yourClass: string;\n"
+      );
+    });
+
+    it("returns null if there are no class names", () => {
+      const definition = classNamesToTypeDefinitions([], "named");
+
+      expect(definition).toBeNull;
+    });
+  });
+
+  describe("default", () => {
+    it("converts an array of class name strings to type definitions", () => {
+      const definition = classNamesToTypeDefinitions(
+        ["myClass", "yourClass"],
+        "default"
+      );
+
+      expect(definition).toEqual(
+        "interface Styles {\n  'myClass': string;\n  'yourClass': string;\n}\n\ndeclare const styles: Styles;\n\nexport default styles;\n"
+      );
+    });
+
+    it("returns null if there are no class names", () => {
+      const definition = classNamesToTypeDefinitions([], "default");
+
+      expect(definition).toBeNull;
+    });
   });
 
-  it("returns null if there are no class names", () => {
-    const definition = classNamesToTypeDefinitions([]);
+  describe("invalid export type", () => {
+    it("returns null", () => {
+      const definition = classNamesToTypeDefinitions(
+        ["myClass"],
+        "invalid" as ExportType
+      );
 
-    expect(definition).toBeNull;
+      expect(definition).toBeNull;
+    });
   });
 });

examples/basic/README.md

@@ -1,17 +1,17 @@
 # Basic Example
 
-This example has several pieces:
+This example contains:
 
 - Core variables (`core/variables.scss`) which contains things like colors, etc. To make the import of these variables easier, it's expected that this directory is included in the search path. This demonstrates the need for `includePaths`.
 - An alias. This is most common using a [webpack alias](https://webpack.js.org/configuration/resolve/#resolve-alias). This demonstrates the need for `aliases`.
 
-The command to generate the proper type files could look like this (_in the root of this repository_):
+The command to generate the proper type files would look like this (_in the root of this repository_):
 
 ```bash
-yarn ts-node ./lib/cli.ts "examples/basic/**/*.scss" --includePaths examples/basic/core --aliases.~alias variables
+yarn tsm "examples/basic/**/*.scss" --includePaths examples/basic/core --aliases.~alias variables
 ```
 
 - The glob pattern is wrapped in quotes to pass it as a string and avoid executing.
 - `includePaths` with `examples/basic/core` so that `@import 'variables'` is found.
 - `aliases` with `~alias: variables` meaning any `@import '~alias'` resolves to `@import 'variables'`.
-- No file will be output for `variables.scss` since there are no classes.
+- No file will be output for `variables.scss` since there are no classes.

examples/default-export/README.md

@@ -0,0 +1,12 @@
+# Default Export Example
+
+This example contains:
+
+- Class names that are expected to be kebab (param) cased. Since variables cannot contain a `-` this can be achieved using an interface with default export.
+- Class names that are TypeScript keywords (eg: `while`) that cannot be used as named constants.
+
+The command to generate the proper type files would look like this (_in the root of this repository_):
+
+```bash
+yarn tsm "examples/default-export/**/*.scss" --exportType default --nameFormat kebab
+```

examples/default-export/feature-a/index.ts

@@ -0,0 +1,4 @@
+import styles from "./style.scss";
+
+console.log(styles.i);
+console.log(styles["i-am-kebab-cased"]);

examples/default-export/feature-a/style.scss

@@ -0,0 +1,15 @@
+.i {
+  color: orange;
+
+  &-am {
+    &-kebab {
+      &-cased {
+        color: red;
+      }
+    }
+  }
+}
+
+.while {
+  color: blue;
+}

lib/cli.ts

@@ -3,11 +3,13 @@
 import yargs from "yargs";
 
 import { Aliases, NAME_FORMATS, NameFormat } from "./sass";
+import { ExportType, EXPORT_TYPES } from "./typescript";
 import { main } from "./main";
 
 const nameFormatDefault: NameFormat = "camel";
+const exportTypeDefault: ExportType = "named";
 
-const { _: patterns, includePaths, aliases, nameFormat } = yargs
+const { _: patterns, includePaths, aliases, nameFormat, exportType } = yargs
   .usage(
     "Generate .scss.d.ts from CSS module .scss files.\nUsage: $0 <glob pattern> [options]"
   )
@@ -36,11 +38,17 @@ const { _: patterns, includePaths, aliases, nameFormat } = yargs
     alias: "n",
     describe: "The name format that should be used to transform class names."
   })
+  .option("exportType", {
+    choices: EXPORT_TYPES,
+    default: exportTypeDefault,
+    alias: "e",
+    describe: "The type of export used for defining the type defintions."
+  })
   .option("includePaths", {
     array: true,
     string: true,
     alias: "i",
     describe: "Additional paths to include when trying to resolve imports."
   }).argv;
 
-main(patterns[0], { includePaths, aliases, nameFormat });
+main(patterns[0], { includePaths, aliases, nameFormat, exportType });

lib/main.ts

@@ -5,14 +5,18 @@ import glob from "glob";
 import chalk from "chalk";
 
 import { Options, fileToClassNames } from "./sass";
-import { classNamesToTypeDefinitions } from "./typescript";
+import { classNamesToTypeDefinitions, ExportType } from "./typescript";
+
+interface MainOptions extends Options {
+  exportType: ExportType;
+}
 
 const error = (message: string) => console.log(chalk.red(`[ERROR] ${message}`));
 const warn = (message: string) => console.log(chalk.yellowBright(`${message}`));
 const notice = (message: string) => console.log(chalk.gray(`${message}`));
 const success = (message: string) => console.log(chalk.green(message));
 
-export const main = (pattern: string, options: Options): void => {
+export const main = (pattern: string, options: MainOptions): void => {
   // When the provided pattern is a directory construct the proper glob to find
   // all .scss files within that directory. Also, add the directory to the
   // included paths so any imported with a path relative to the root of the
@@ -28,8 +32,7 @@ export const main = (pattern: string, options: Options): void => {
     pattern = path.resolve(pattern, "**/*.scss");
   }
 
-  // Find all the files that match the provied pattern. Always ignore
-  // node_modules anywhere in the directory tree.
+  // Find all the files that match the provied pattern.
   const files = glob.sync(pattern);
 
   if (!files || !files.length) {
@@ -52,7 +55,10 @@ export const main = (pattern: string, options: Options): void => {
 
     fileToClassNames(file, options)
       .then(classNames => {
-        const typeDefinition = classNamesToTypeDefinitions(classNames);
+        const typeDefinition = classNamesToTypeDefinitions(
+          classNames,
+          options.exportType
+        );
         const path = `${file}.d.ts`;
 
         if (!typeDefinition) {

lib/typescript/class-names-to-type-definition.ts

@@ -1,16 +1,37 @@
 import { ClassNames, ClassName } from "lib/sass/file-to-class-names";
 
-const classNameToTypeDefinition = (className: ClassName) =>
+export type ExportType = "named" | "default";
+export const EXPORT_TYPES: ExportType[] = ["named", "default"];
+
+const classNameToNamedTypeDefinition = (className: ClassName) =>
   `export const ${className}: string;`;
 
+const classNameToInterfaceKey = (className: ClassName) =>
+  `  '${className}': string;`;
+
 export const classNamesToTypeDefinitions = (
-  classNames: ClassNames
+  classNames: ClassNames,
+  exportType: ExportType
 ): string | null => {
   if (classNames.length) {
-    const typeDefinitions = classNames.map(classNameToTypeDefinition);
+    let typeDefinitions;
+
+    switch (exportType) {
+      case "default":
+        typeDefinitions = "interface Styles {\n";
+        typeDefinitions += classNames.map(classNameToInterfaceKey).join("\n");
+        typeDefinitions += "\n}\n\n";
+        typeDefinitions += "declare const styles: Styles;\n\n";
+        typeDefinitions += "export default styles;\n";
+        return typeDefinitions;
+      case "named":
+        typeDefinitions = classNames.map(classNameToNamedTypeDefinition);
 
-    // Sepearte all type definitions be a newline with a trailing newline.
-    return typeDefinitions.join("\n") + "\n";
+        // Sepearte all type definitions be a newline with a trailing newline.
+        return typeDefinitions.join("\n") + "\n";
+      default:
+        return null;
+    }
   } else {
     return null;
   }

lib/typescript/index.ts

@@ -1 +1,5 @@
-export { classNamesToTypeDefinitions } from "./class-names-to-type-definition"
+export {
+  classNamesToTypeDefinitions,
+  ExportType,
+  EXPORT_TYPES
+} from "./class-names-to-type-definition";