Add orderAlphabetically to the loader options.

Use this option to sort the module key strings alphabetically

Author: FinestV

src/cssModuleToInterface.js

@@ -6,18 +6,24 @@ const filenameToInterfaceName = (filename) => {
     .replace(/\W+(\w)/g, (_, c) => c.toUpperCase());
 };
 
-const cssModuleToTypescriptInterfaceProperties = (cssModuleKeys, indent = '  ') => {
-  return cssModuleKeys
+const cssModuleToTypescriptInterfaceProperties = (cssModuleKeys, orderAlphabetically, indent = '  ') => {
+  return sortCssModuleKeys(cssModuleKeys, orderAlphabetically)
     .map((key) => `${indent}'${key}': string;`)
     .join('\n');
 };
 
-const cssModuleToNamedExports = (cssModuleKeys) => {
-  return cssModuleKeys
+const cssModuleToNamedExports = (cssModuleKeys, orderAlphabetically) => {
+  return sortCssModuleKeys(cssModuleKeys, orderAlphabetically)
     .map((key) => `export const ${key}: string;`)
     .join('\n');
 };
 
+const sortCssModuleKeys = (cssModuleKeys, orderAlphabetically) => {
+  return orderAlphabetically
+    ? [...cssModuleKeys].sort()
+    : [...cssModuleKeys]
+};
+
 const allWordsRegexp = /^\w+$/i;
 export const filterNonWordClasses = (cssModuleKeys) => {
   const filteredClassNames = cssModuleKeys.filter(classname => allWordsRegexp.test(classname));
@@ -80,15 +86,15 @@ export const filenameToTypingsFilename = (filename) => {
   return path.join(dirName, `${baseName}.d.ts`);
 };
 
-export const generateNamedExports = (cssModuleKeys) => {
-  const namedExports = cssModuleToNamedExports(cssModuleKeys);
+export const generateNamedExports = (cssModuleKeys, orderAlphabetically) => {
+  const namedExports = cssModuleToNamedExports(cssModuleKeys, orderAlphabetically);
   return (`${namedExports}
 `);
 };
 
-export const generateGenericExportInterface = (cssModuleKeys, filename, indent) => {
+export const generateGenericExportInterface = (cssModuleKeys, filename, orderAlphabetically, indent) => {
   const interfaceName = filenameToInterfaceName(filename);
-  const interfaceProperties = cssModuleToTypescriptInterfaceProperties(cssModuleKeys, indent);
+  const interfaceProperties = cssModuleToTypescriptInterfaceProperties(cssModuleKeys, orderAlphabetically, indent);
   return (
 `export interface ${interfaceName} {
 ${interfaceProperties}

src/index.js

@@ -51,9 +51,11 @@ module.exports = function(...input) {
       }
     }
 
+    query.orderAlphabetically = !!query.orderAlphabetically;
+
     let cssModuleDefinition;
     if (!query.namedExport) {
-      cssModuleDefinition = generateGenericExportInterface(cssModuleKeys, filename);
+      cssModuleDefinition = generateGenericExportInterface(cssModuleKeys, filename, query.orderAlphabetically);
     } else {
       const [cleanedDefinitions, skippedDefinitions,] = filterNonWordClasses(cssModuleKeys);
       if (skippedDefinitions.length > 0 && !query.camelCase) {
@@ -72,7 +74,7 @@ These can be accessed using the object literal syntax; eg styles['delete'] inste
 `.yellow);
       }
 
-      cssModuleDefinition = generateNamedExports(nonReservedWordDefinitions);
+      cssModuleDefinition = generateNamedExports(nonReservedWordDefinitions, query.orderAlphabetically);
     }
     if (cssModuleDefinition.trim() === '') {
       // Ensure empty CSS modules export something