feat: optionally allow any additional classes

Author: mrmckeb

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

@@ -9,6 +9,56 @@ 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`] = `
+"declare let classes: {
+  'localClassInsideGlobal': string;
+  'localClass': string;
+  'localClass2': string;
+  'localClassInsideLocal': string;
+  'reservedWords': string;
+  'default': string;
+  'const': string;
+  'nestedClassParent': string;
+  'childClass': string;
+  'nestedClassParentExtended': string;
+  'section1': string;
+  'section2': string;
+  'section3': string;
+  'section4': string;
+  'section5': string;
+  'section6': string;
+  'section7': string;
+  'section8': string;
+  'section9': string;
+  'classWithMixin': string;
+  'appLogo': string;
+  'appLogo': string;
+  [key: string]: string;
+};
+export default classes;
+export let localClassInsideGlobal: string;
+export let localClass: string;
+export let localClass2: string;
+export let localClassInsideLocal: string;
+export let reservedWords: string;
+export let nestedClassParent: string;
+export let childClass: string;
+export let nestedClassParentExtended: string;
+export let section1: string;
+export let section2: string;
+export let section3: string;
+export let section4: string;
+export let section5: string;
+export let section6: string;
+export let section7: string;
+export let section8: string;
+export let section9: string;
+export let classWithMixin: string;
+export let appLogo: string;
+export let appLogo: string;
+"
+`;
+
 exports[`utils / cssSnapshots with baseUrl and paths in compilerOptions sass should find the files 1`] = `
 {
   "big-font": "tsconfig-paths-module__big-font---3FOK9",
@@ -19,7 +69,7 @@ exports[`utils / cssSnapshots with baseUrl and paths in compilerOptions sass sho
 
 exports[`utils / cssSnapshots with file 'empty.module.less' createExports should create an exports file 1`] = `
 "declare let classes: {
-  
+
 };
 export default classes;
 "
@@ -30,7 +80,7 @@ exports[`utils / cssSnapshots with file 'empty.module.less' getCssExports should
 exports[`utils / cssSnapshots with file 'empty.module.less' with a custom template should transform the generated dts 1`] = `
 "/* eslint-disable */
 declare let classes: {
-  
+
 };
 export default classes;
 
@@ -40,7 +90,7 @@ export type AllClassNames = '';"
 
 exports[`utils / cssSnapshots with file 'empty.module.sass' createExports should create an exports file 1`] = `
 "declare let classes: {
-  
+
 };
 export default classes;
 "
@@ -51,7 +101,7 @@ exports[`utils / cssSnapshots with file 'empty.module.sass' getCssExports should
 exports[`utils / cssSnapshots with file 'empty.module.sass' with a custom template should transform the generated dts 1`] = `
 "/* eslint-disable */
 declare let classes: {
-  
+
 };
 export default classes;
 
@@ -61,7 +111,7 @@ export type AllClassNames = '';"
 
 exports[`utils / cssSnapshots with file 'empty.module.scss' createExports should create an exports file 1`] = `
 "declare let classes: {
-  
+
 };
 export default classes;
 "
@@ -72,7 +122,7 @@ exports[`utils / cssSnapshots with file 'empty.module.scss' getCssExports should
 exports[`utils / cssSnapshots with file 'empty.module.scss' with a custom template should transform the generated dts 1`] = `
 "/* eslint-disable */
 declare let classes: {
-  
+
 };
 export default classes;
 
@@ -82,7 +132,7 @@ export type AllClassNames = '';"
 
 exports[`utils / cssSnapshots with file 'empty.module.styl' createExports should create an exports file 1`] = `
 "declare let classes: {
-  
+
 };
 export default classes;
 "
@@ -93,7 +143,7 @@ exports[`utils / cssSnapshots with file 'empty.module.styl' getCssExports should
 exports[`utils / cssSnapshots with file 'empty.module.styl' with a custom template should transform the generated dts 1`] = `
 "/* eslint-disable */
 declare let classes: {
-  
+
 };
 export default classes;
 

src/helpers/__tests__/getDtsSnapshot.test.ts

@@ -290,4 +290,33 @@ describe('utils / cssSnapshots', () => {
       expect(dts).toMatchSnapshot();
     });
   });
+
+  describe('with allowAdditionalClasses enabled', () => {
+    const fileName = join(__dirname, 'fixtures', 'test.module.scss');
+    const css = readFileSync(fileName, 'utf8');
+    const options: Options = {
+      classnameTransform: 'camelCaseOnly',
+      allowAdditionalClasses: true,
+    };
+
+    const cssExports = getCssExports({
+      css,
+      fileName,
+      logger,
+      options,
+      processor,
+      compilerOptions,
+      directory: __dirname,
+    });
+
+    it('should return a dts file that allows any string value', () => {
+      const dts = createDtsExports({
+        cssExports,
+        fileName,
+        logger,
+        options,
+      });
+      expect(dts).toMatchSnapshot();
+    });
+  });
 });

src/helpers/createDtsExports.ts

@@ -42,7 +42,9 @@ export const createDtsExports = ({
 
   let dts = `\
 declare let classes: {
-  ${processedClasses.map(classNameToProperty).join('\n  ')}
+  ${processedClasses.map(classNameToProperty).join('\n  ')}${
+    options.allowAdditionalClasses ? '\n  [key: string]: string;' : ''
+  }
 };
 export default classes;
 `;

src/options.ts

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