feat(casing): add support for transforming classnames

Author: skovy

lib/cli.ts

@@ -1,16 +1,17 @@
 import yargs from "yargs";
-import { SassError } from "node-sass";
 
-import { fileToClassNames, Aliases } from "./sass/file-to-class-names";
+import { parse, Aliases, NAME_FORMATS, NameFormat } from "./sass";
 
-const { _: files, includePaths, aliases } = yargs
+const nameFormatDefault: NameFormat = "camel";
+
+const { _: files, includePaths, aliases, nameFormat } = yargs
   .demandOption("_")
-  .option("aliases", { coerce: (obj): Aliases => obj })
+  .option("aliases", { coerce: (obj): Aliases => obj, alias: "a" })
+  .option("nameFormat", {
+    choices: NAME_FORMATS,
+    default: nameFormatDefault,
+    alias: "n"
+  })
   .option("includePaths", { array: true, string: true }).argv;
 
-fileToClassNames(files[0], { includePaths, aliases })
-  .then(console.log)
-  .catch((err: SassError) => {
-    console.error(err.message);
-    console.error(`${err.file}[${err.line}:${err.column}]`);
-  });
+parse(files[0], { includePaths, aliases, nameFormat });

lib/sass/__tests__/file-to-class-names.test.ts

@@ -1,8 +1,25 @@
 import { fileToClassNames } from "../file-to-class-names";
 
 describe("fileToClassNames", () => {
-  test("converts a file path to an array of class names", async () => {
+  test("it converts a file path to an array of class names (default camel cased)", async () => {
     const result = await fileToClassNames(`${__dirname}/style.scss`);
+
+    expect(result).toEqual(["someStyles", "nestedClass", "nestedAnother"]);
+  });
+
+  test("it converts a file path to an array of class names with kebab as the name format", async () => {
+    const result = await fileToClassNames(`${__dirname}/style.scss`, {
+      nameFormat: "kebab"
+    });
+
+    expect(result).toEqual(["some-styles", "nested-class", "nested-another"]);
+  });
+
+  test("it converts a file path to an array of class names with param as the name format", async () => {
+    const result = await fileToClassNames(`${__dirname}/style.scss`, {
+      nameFormat: "param"
+    });
+
     expect(result).toEqual(["some-styles", "nested-class", "nested-another"]);
   });
 });

lib/sass/file-to-class-names.ts

@@ -1,4 +1,7 @@
 import sass from "node-sass";
+import camelcase from "camelcase";
+import paramcase from "param-case";
+
 import { sourceToClassNames } from "./source-to-class-names";
 
 export type ClassName = string;
@@ -8,11 +11,16 @@ export interface Aliases {
   [index: string]: string;
 }
 
+export type NameFormat = "camel" | "kebab" | "param";
+
 export interface Options {
   includePaths?: string[];
   aliases?: Aliases;
+  nameFormat?: NameFormat;
 }
 
+export const NAME_FORMATS: NameFormat[] = ["camel", "kebab", "param"];
+
 const importer = (aliases: Aliases) => (url: string) => {
   if (url in aliases) {
     return {
@@ -25,8 +33,14 @@ const importer = (aliases: Aliases) => (url: string) => {
 
 export const fileToClassNames = (
   file: string,
-  { includePaths = [], aliases = {} }: Options = {}
+  {
+    includePaths = [],
+    aliases = {},
+    nameFormat = "camel"
+  }: Options = {} as Options
 ) => {
+  const transformer = classNameTransformer(nameFormat);
+
   return new Promise<ClassNames>((resolve, reject) => {
     sass.render(
       {
@@ -41,9 +55,26 @@ export const fileToClassNames = (
         }
 
         sourceToClassNames(result.css).then(({ exportTokens }) => {
-          resolve(Object.keys(exportTokens));
+          const classNames = Object.keys(exportTokens);
+          const transformedClassNames = classNames.map(transformer);
+
+          resolve(transformedClassNames);
         });
       }
     );
   });
 };
+
+interface Transformer {
+  (value: string): string;
+}
+
+const classNameTransformer = (nameFormat: NameFormat): Transformer => {
+  switch (nameFormat) {
+    case "kebab":
+    case "param":
+      return paramcase;
+    case "camel":
+      return camelcase;
+  }
+};

lib/sass/index.ts

@@ -0,0 +1,2 @@
+export { Aliases, NameFormat, NAME_FORMATS } from "./file-to-class-names";
+export { parse } from "./parse";

lib/sass/parse.ts

@@ -0,0 +1,12 @@
+import { SassError } from "node-sass";
+
+import { Options, fileToClassNames } from "./file-to-class-names";
+
+export const parse = (file: string, options: Options): void => {
+  fileToClassNames(file, options)
+    .then(console.log)
+    .catch((err: SassError) => {
+      console.error(err.message);
+      console.error(`${err.file}[${err.line}:${err.column}]`);
+    });
+};

package.json

@@ -5,12 +5,19 @@
   "main": "index.js",
   "author": "Spencer Miskoviak <smiskoviak@gmail.com>",
   "license": "MIT",
+  "scripts": {
+    "test": "jest"
+  },
   "devDependencies": {
+    "@types/camelcase": "^4.1.0",
     "@types/jest": "^24.0.0",
     "@types/node-sass": "^3.10.32",
+    "@types/param-case": "^1.1.2",
     "@types/yargs": "^12.0.8",
+    "camelcase": "^5.0.0",
     "jest": "^24.1.0",
     "node-sass": "^4.11.0",
+    "param-case": "^2.1.1",
     "ts-jest": "^23.10.5",
     "typescript": "^3.3.3"
   },

tsconfig.json

@@ -4,6 +4,12 @@
     "module": "commonjs",
     "strict": true,
     "esModuleInterop": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "css-modules-loader-core": [
+        "./typings/css-modules-loader-core/index.d.ts"
+      ]
+    }
   }
 }

yarn.lock

@@ -117,6 +117,10 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@types/camelcase@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@types/camelcase/-/camelcase-4.1.0.tgz#e054f7986f31658d49936261b5cd4588ef29d1ee"
+
 "@types/jest@^24.0.0":
   version "24.0.0"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.0.0.tgz#848492026c327b3548d92be0352a545c36a21e8a"
@@ -131,6 +135,12 @@
   version "10.12.24"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.24.tgz#b13564af612a22a20b5d95ca40f1bffb3af315cf"
 
+"@types/param-case@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@types/param-case/-/param-case-1.1.2.tgz#e1fac15b59c7d9cd8c2dd15962c7ad3cf960325f"
+  dependencies:
+    param-case "*"
+
 "@types/yargs@^12.0.8":
   version "12.0.8"
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.8.tgz#0b45bf0607a5509b921335658d87489c12955176"
@@ -1948,6 +1958,10 @@ loud-rejection@^1.0.0:
     currently-unhandled "^0.4.1"
     signal-exit "^3.0.0"
 
+lower-case@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+
 lru-cache@^4.0.1:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -2144,6 +2158,12 @@ nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
 
+no-case@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  dependencies:
+    lower-case "^1.1.1"
+
 node-gyp@^3.8.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
@@ -2410,6 +2430,12 @@ p-try@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
 
+param-case@*, param-case@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  dependencies:
+    no-case "^2.2.0"
+
 parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"