feat: add new allow unknown classnames feature (#182)

Author: mrmckeb

.prettierignore

@@ -1,2 +1,3 @@
 pnpm-lock.yaml
 /dist/
+*.snap

README.md

@@ -99,6 +99,7 @@ Please note that no options are required. However, depending on your configurati
 
 | Option                     | Default value                      | Description                                                                                            |
 | -------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `allowUnknownClassnames`   | `false`                            | Disables TypeScript warnings on unknown classnames (for default imports only).                         |
 | `classnameTransform`       | `asIs`                             | See [`classnameTransform`](#classnameTransform) below.                                                 |
 | `customMatcher`            | `"\\.module\\.(c\|le\|sa\|sc)ss$"` | Changes the file extensions that this plugin processes.                                                |
 | `customRenderer`           | `false`                            | See [`customRenderer`](#customRenderer) below.                                                         |

src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap

@@ -9,7 +9,7 @@ exports[`utils / cssSnapshots with a custom renderer should process a file and l
 }
 `;
 
-exports[`utils / cssSnapshots with allowAdditionalClasses enabled should return a dts file that allows any string value 1`] = `
+exports[`utils / cssSnapshots with allowUnknownClassnames enabled should return a dts file that allows any string value 1`] = `
 "declare let classes: {
   'localClassInsideGlobal': string;
   'localClass': string;

src/helpers/__tests__/classTransforms.test.ts

@@ -2,7 +2,7 @@ import { transformClasses } from '../classTransforms';
 import { ClassnameTransformOptions } from '../../options';
 
 describe('utils / classTransforms', () => {
-  const classNames = [
+  const classnames = [
     'class-name-a',
     'classNameB',
     'class-Name-C',
@@ -18,14 +18,14 @@ describe('utils / classTransforms', () => {
 
   it('should not transform classes when no option is set', () => {
     const transformer = transformClasses();
-    const transformedClasses = classNames.map(transformer);
+    const transformedClasses = classnames.map(transformer);
     expect(transformedClasses).toMatchSnapshot();
   });
 
   tests.forEach((option) => {
     it(`should transform classes correctly when \`classnameTransform\` set to \`${option}\``, () => {
       const transformer = transformClasses(option);
-      const transformedClasses = classNames.map(transformer);
+      const transformedClasses = classnames.map(transformer);
       expect(transformedClasses).toMatchSnapshot();
     });
   });

src/helpers/__tests__/getDtsSnapshot.test.ts

@@ -291,12 +291,12 @@ describe('utils / cssSnapshots', () => {
     });
   });
 
-  describe('with allowAdditionalClasses enabled', () => {
+  describe('with allowUnknownClassnames enabled', () => {
     const fileName = join(__dirname, 'fixtures', 'test.module.scss');
     const css = readFileSync(fileName, 'utf8');
     const options: Options = {
       classnameTransform: 'camelCaseOnly',
-      allowAdditionalClasses: true,
+      allowUnknownClassnames: true,
     };
 
     const cssExports = getCssExports({

src/helpers/classTransforms.ts

@@ -4,42 +4,42 @@ import { ClassnameTransformOptions } from '../options';
 // The below is based on the CSS Modules implementation found here:
 // https://github.com/webpack-contrib/css-loader
 
-const dashCase = (className: string): string =>
-  className.replace(/-+(\w)/g, (_match: string, firstLetter: string) =>
+const dashCase = (classname: string): string =>
+  classname.replace(/-+(\w)/g, (_match: string, firstLetter: string) =>
     firstLetter.toUpperCase(),
   );
 
 export const transformClasses =
   (camelCaseOption?: ClassnameTransformOptions) =>
-  (className: string): string[] => {
+  (classname: string): string[] => {
     const entries: string[] = [];
 
     switch (camelCaseOption) {
       case 'camelCase': {
-        entries.push(className);
-        const targetClassName = camelCase(className);
-        if (targetClassName !== className) {
+        entries.push(classname);
+        const targetClassName = camelCase(classname);
+        if (targetClassName !== classname) {
           entries.push(targetClassName);
         }
         break;
       }
       case 'camelCaseOnly':
-        entries.push(camelCase(className));
+        entries.push(camelCase(classname));
         break;
       case 'dashes': {
-        entries.push(className);
-        const targetClassName = dashCase(className);
-        if (targetClassName !== className) {
+        entries.push(classname);
+        const targetClassName = dashCase(classname);
+        if (targetClassName !== classname) {
           entries.push(targetClassName);
         }
         break;
       }
       case 'dashesOnly':
-        entries.push(dashCase(className));
+        entries.push(dashCase(classname));
         break;
       case 'asIs':
       default:
-        entries.push(className);
+        entries.push(classname);
         break;
     }
 

src/helpers/createDtsExports.ts

@@ -5,8 +5,8 @@ import { CSSExportsWithSourceMap } from './getCssExports';
 import { VALID_VARIABLE_REGEXP } from './validVarRegexp';
 import { Logger } from './logger';
 
-const isValidVariable = (className: string) =>
-  VALID_VARIABLE_REGEXP.test(className);
+const isValidVariable = (classname: string) =>
+  VALID_VARIABLE_REGEXP.test(classname);
 
 const flattenClassNames = (
   previousValue: string[] = [],
@@ -28,22 +28,22 @@ export const createDtsExports = ({
 
   const possiblyUndefined = Boolean(options.noUncheckedIndexedAccess);
 
-  const classNameToProperty = (className: string) =>
-    `'${className}'${possiblyUndefined ? '?' : ''}: string;`;
-  const classNameToNamedExport = (className: string) =>
-    `export let ${className}${possiblyUndefined ? '?' : ''}: string;`;
+  const classnameToProperty = (classname: string) =>
+    `'${classname}'${possiblyUndefined ? '?' : ''}: string;`;
+  const classnameToNamedExport = (classname: string) =>
+    `export let ${classname}${possiblyUndefined ? '?' : ''}: string;`;
 
   const processedClasses = Object.keys(classes)
     .map(transformClasses(options.classnameTransform))
     .reduce(flattenClassNames, []);
   const filteredClasses = processedClasses
     .filter(isValidVariable)
-    .map(classNameToNamedExport);
+    .map(classnameToNamedExport);
 
   let dts = `\
 declare let classes: {
-  ${processedClasses.map(classNameToProperty).join('\n  ')}${
-    options.allowAdditionalClasses ? '\n  [key: string]: string;' : ''
+  ${processedClasses.map(classnameToProperty).join('\n  ')}${
+    options.allowUnknownClassnames ? '\n  [key: string]: string;' : ''
   }
 };
 export default classes;
@@ -65,15 +65,15 @@ export default classes;
 
     // Create a list of filtered classnames and hashed classnames.
     const filteredClasses = Object.entries(cssExports.classes)
-      .map(([className, hashedClassName]) => [
+      .map(([classname, hashedClassname]) => [
         // TODO: Improve this. It may return multiple valid classnames and we
         // want to handle all of those.
-        transformClasses(options.classnameTransform)(className)[0],
-        hashedClassName,
+        transformClasses(options.classnameTransform)(classname)[0],
+        hashedClassname,
       ])
-      .filter(([className]) => isValidVariable(className));
+      .filter(([classname]) => isValidVariable(classname));
 
-    filteredClasses.forEach(([className, hashedClassName]) => {
+    filteredClasses.forEach(([classname, hashedClassName]) => {
       const matchedLine = cssLines.findIndex((line) =>
         line.includes(hashedClassName),
       );
@@ -85,7 +85,7 @@ export default classes;
         column: matchedColumn >= 0 ? matchedColumn : 0,
       });
       dtsLines[lineNumber ? lineNumber - 1 : 0] +=
-        classNameToNamedExport(className);
+        classnameToNamedExport(classname);
     });
 
     dts = dtsLines.join('\n');

src/options.ts

@@ -20,7 +20,7 @@ export interface RendererOptions {
 }
 
 export interface Options {
-  allowAdditionalClasses?: boolean;
+  allowUnknownClassnames?: boolean;
   classnameTransform?: ClassnameTransformOptions;
   customMatcher?: string;
   customRenderer?: string;