feat: Support all possible class names characters

BREAKING CHANGE: Updates the declaration template. This change allows any possible class name to be exported - even those whose names don't comply with typescript variable name constraints. Resolves seek-oss#6.
laverdet · Apr 9, 2019 · e7342df · e7342df
1 parent 90f3131
commit e7342df
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -14,8 +14,6 @@ There are currently a lot of [solutions to this problem](https://www.npmjs.com/s
 
 - Ensures committed TypeScript declarations are in sync with the code that generated them via the [`verify` mode](#verify-mode).
 
-- Doesn't silently ignore invalid TypeScript identifiers. If a class name is not valid TypeScript (e.g. `.foo-bar`, instead of `.fooBar`), `tsc` should report an error.
-
 ## Usage
 
 Place `css-modules-typescript-loader` directly after `css-loader` in your webpack config.

diff --git a/index.js b/index.js
@@ -6,6 +6,8 @@ const LineDiff = require('line-diff');
 const bannerMessage =
   '// This file is automatically generated.\n// Please do not change this file!';
 
+const cssModuleExport = 'declare var cssExports: CssExports;\nexport = cssExports;\n';
+
 const getNoDeclarationFileError = ({ filename }) =>
   new Error(
     `Generated type declaration does not exist. Run webpack and commit the type declaration for '${filename}'`
@@ -19,12 +21,13 @@ const getTypeMismatchError = ({ filename, expected, actual }) => {
   );
 };
 
-const cssModuleToNamedExports = cssModuleKeys => {
-  return cssModuleKeys
+const cssModuleToInterface = (cssModuleKeys) => {
+  const interfaceFields = cssModuleKeys
     .sort()
-    .map(key => `export const ${key}: string;`)
-    .join('\n')
-    .concat('\n');
+    .map(key => `  '${key}': string;`)
+    .join('\n');
+
+  return `interface CssExports {\n${interfaceFields}\n}`;
 };
 
 const filenameToTypingsFilename = filename => {
@@ -70,9 +73,7 @@ module.exports = function(content, ...rest) {
     }
   }
 
-  const cssModuleDefinition = `${bannerMessage}\n${cssModuleToNamedExports(
-    cssModuleKeys
-  )}`;
+  const cssModuleDefinition = `${bannerMessage}\n${cssModuleToInterface(cssModuleKeys)}\n${cssModuleExport}`;
 
   if (mode === 'verify') {
     read((err, fileContents) => {

diff --git a/test/emit-declaration/__snapshots__/emit-declaration.test.js.snap b/test/emit-declaration/__snapshots__/emit-declaration.test.js.snap
@@ -3,8 +3,12 @@
 exports[`Can emit valid declaration 1`] = `
 "// This file is automatically generated.
 // Please do not change this file!
-export const otherClass: string;
-export const someClass: string;
-export const validClass: string;
+interface CssExports {
+  'otherClass': string;
+  'someClass': string;
+  'validClass': string;
+}
+declare var cssExports: CssExports;
+export = cssExports;
 "
 `;
diff --git a/test/verify-invalid-declaration/__snapshots__/verify-invalid-declaration.test.js.snap b/test/verify-invalid-declaration/__snapshots__/verify-invalid-declaration.test.js.snap
@@ -5,9 +5,13 @@ exports[`Can error on invalid declaration 1`] = `
 
    // This file is automatically generated.
    // Please do not change this file!
-   export const classInBothFiles: string;
- - export const classInTypeScriptFile: string;
- + export const classInCssFile: string;
+   interface CssExports {
+     'classInBothFiles': string;
+ -   'classInTypeScriptFile': string;
+ +   'classInCssFile': string;
+   }
+   declare var cssExports: CssExports;
+   export = cssExports;
    
 
 "

diff --git a/test/verify-invalid-declaration/index.css.d.ts b/test/verify-invalid-declaration/index.css.d.ts
@@ -1,4 +1,8 @@
 // This file is automatically generated.
 // Please do not change this file!
-export const classInBothFiles: string;
-export const classInTypeScriptFile: string;
+interface CssExports {
+  'classInBothFiles': string;
+  'classInTypeScriptFile': string;
+}
+declare var cssExports: CssExports;
+export = cssExports;
diff --git a/test/verify-valid-declaration/index.css b/test/verify-valid-declaration/index.css
@@ -9,3 +9,8 @@
 .otherClass {
   display: block;
 }
+
+.hyphened-classname,
+.underscored_classname {
+  color: papayawhip;
+}
diff --git a/test/verify-valid-declaration/index.css.d.ts b/test/verify-valid-declaration/index.css.d.ts
@@ -1,5 +1,11 @@
 // This file is automatically generated.
 // Please do not change this file!
-export const otherClass: string;
-export const someClass: string;
-export const validClass: string;
+interface CssExports {
+  'hyphened-classname': string;
+  'otherClass': string;
+  'someClass': string;
+  'underscored_classname': string;
+  'validClass': string;
+}
+declare var cssExports: CssExports;
+export = cssExports;