Exclude reserved words from named exports

Author: johnnyreilly

src/cssModuleToInterface.js

@@ -28,6 +28,52 @@ export const filterNonWordClasses = (cssModuleKeys) => {
   return [filteredClassNames, nonWordClassNames,];
 };
 
+// Documented here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Reserved_keywords_as_of_ECMAScript_2015
+const reservedWords = [
+  'break',
+  'case',
+  'catch',
+  'class',
+  'const',
+  'continue',
+  'debugger',
+  'default',
+  'delete',
+  'do',
+  'else',
+  'export',
+  'extends',
+  'finally',
+  'for',
+  'function',
+  'if',
+  'import',
+  'in',
+  'instanceof',
+  'new',
+  'return',
+  'super',
+  'switch',
+  'this',
+  'throw',
+  'try',
+  'typeof',
+  'var',
+  'void',
+  'while',
+  'with',
+  'yield'
+];
+export const filterReservedWordClasses = (cssModuleKeys) => {
+  const filteredClassNames = cssModuleKeys.filter(classname => reservedWords.indexOf(classname) === -1);
+  if (filteredClassNames.length === cssModuleKeys.length) {
+    return [filteredClassNames, [],];
+  }
+  const reservedWordClassNames = cssModuleKeys.filter(classname => reservedWords.indexOf(classname) !== -1);
+  return [filteredClassNames, reservedWordClassNames,];
+};
+
+
 export const filenameToTypingsFilename = (filename) => {
   const dirName = path.dirname(filename);
   const baseName = path.basename(filename);

src/index.js

@@ -5,6 +5,7 @@ import 'colour';
 
 import {
   filterNonWordClasses,
+  filterReservedWordClasses,
   generateNamedExports,
   generateGenericExportInterface,
   filenameToTypingsFilename,
@@ -61,7 +62,17 @@ The following classes will not be available as named exports:
 ${skippedDefinitions.map(sd => ` - "${sd}"`).join('\n').red}
 `.yellow);
       }
-      cssModuleDefinition = generateNamedExports(cleanedDefinitions);
+
+      const [nonReservedWordDefinitions, reservedWordDefinitions,] = filterReservedWordClasses(cleanedDefinitions);
+      if (reservedWordDefinitions.length > 0) {
+        logger('warn', `Your css contains classes which are reserved words in JavaScript.
+Consequently the following classes will not be available as named exports:
+${reservedWordDefinitions.map(rwd => ` - "${rwd}"`).join('\n').red}
+These can be accessed using the object literal syntax; eg styles['delete'] instead of styles.delete.
+`.yellow);
+      }
+
+      cssModuleDefinition = generateNamedExports(nonReservedWordDefinitions);
     }
     if (cssModuleDefinition.trim() === '') {
       // Ensure empty CSS modules export something

test/example-namedexport.css

@@ -5,3 +5,104 @@
 .bar-baz {
   color: green;
 }
+
+/* All of the below are reserved words in JavaScript and cannot be emitted as a named export */
+.break {
+  color: red;
+}
+.case {
+  color: red;
+}
+.catch {
+  color: red;
+}
+.class {
+  color: red;
+}
+.const {
+  color: red;
+}
+.continue {
+  color: red;
+}
+.debugger {
+  color: red;
+}
+.default {
+  color: red;
+}
+.delete {
+  color: red;
+}
+.do {
+  color: red;
+}
+.else {
+  color: red;
+}
+.export {
+  color: red;
+}
+.extends {
+  color: red;
+}
+.finally {
+  color: red;
+}
+.for {
+  color: red;
+}
+.function {
+  color: red;
+}
+.if {
+  color: red;
+}
+.import {
+  color: red;
+}
+.in {
+  color: red;
+}
+.instanceof {
+  color: red;
+}
+.new {
+  color: red;
+}
+.return {
+  color: red;
+}
+.super {
+  color: red;
+}
+.switch {
+  color: red;
+}
+.this {
+  color: red;
+}
+.throw {
+  color: red;
+}
+.try {
+  color: red;
+}
+.typeof {
+  color: red;
+}
+.var {
+  color: red;
+}
+.void {
+  color: red;
+}
+.while {
+  color: red;
+}
+.with {
+  color: red;
+}
+.yield {
+  color: red;
+}