Switch to named exports from CSS modules

.vscode/dim.code-snippets

@@ -25,30 +25,30 @@
       "\t\t$0",
       "\t);",
       "}",
-      ""
+      "",
     ],
     "description": "TypeScript Stateless Functional Component",
-    "scope": "javascriptreact,typescriptreact"
+    "scope": "javascriptreact,typescriptreact",
   },
 
   "import i18next": {
     "prefix": "imt",
     "body": ["import { t } from 'app/i18next-t';"],
     "description": "Import t helper from i18next",
-    "scope": "javascriptreact,typescriptreact"
+    "scope": "javascriptreact,typescriptreact",
   },
 
   "import clsx": {
     "prefix": "imc",
     "body": ["import clsx from 'clsx';"],
     "description": "Import clsx",
-    "scope": "javascriptreact,typescriptreact"
+    "scope": "javascriptreact,typescriptreact",
   },
 
   "import styles": {
     "prefix": "ims",
-    "body": ["import styles from './$TM_FILENAME_BASE.m.scss';"],
+    "body": ["import * as styles from './$TM_FILENAME_BASE.m.scss';"],
     "description": "Import CSS module",
-    "scope": "javascriptreact,typescriptreact"
+    "scope": "javascriptreact,typescriptreact",
   },
 }

config/webpack.ts

@@ -124,7 +124,7 @@ export default (env: Env) => {
           },
           client: {
             overlay: false,
-            logging: "none", // we don't need to see build errors in the console log
+            logging: 'none', // we don't need to see build errors in the console log
           },
           historyApiFallback: true,
           hot: 'only',
@@ -273,9 +273,12 @@ export default (env: Env) => {
           use: [
             env.dev ? 'style-loader' : MiniCssExtractPlugin.loader,
             {
-              loader: 'css-modules-typescript-loader',
+              loader: 'css-modules-dts-loader',
               options: {
                 mode: process.env.CI ? 'verify' : 'emit',
+                namedExport: true,
+                sort: true,
+                camelCase: true,
               },
             },
             {
@@ -286,11 +289,6 @@ export default (env: Env) => {
                     ? '[name]_[local]-[contenthash:base64:8]'
                     : '[contenthash:base64:8]',
                   exportLocalsConvention: 'camelCaseOnly',
-                  // TODO: It's possible that setting this to true would allow
-                  // us to eliminate some original CSS names that still get into
-                  // the bundle, but it breaks css-modules-typescript-loader so
-                  // we'd need to fork/replace it.
-                  namedExport: false,
                 },
                 importLoaders: 2,
               },

package.json

@@ -124,7 +124,7 @@
     "content-security-policy-builder": "^2.3.0",
     "copy-webpack-plugin": "^13.0.1",
     "css-loader": "^7.1.2",
-    "css-modules-typescript-loader": "^4.0.1",
+    "css-modules-dts-loader": "^1.1.0",
     "cssnano": "^7.1.1",
     "eslint": "^9.19.0",
     "eslint-plugin-array-func": "^5.0.2",
@@ -267,4 +267,4 @@
       ]
     }
   }
-}
+}

src/app/App.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Suspense, lazy } from 'react';
 import { useSelector } from 'react-redux';
 import { Navigate, Route, Routes, useLocation } from 'react-router';
-import styles from './App.m.scss';
+import * as styles from './App.m.scss';
 import Developer from './developer/Developer';
 import AutoRefresh from './dim-ui/AutoRefresh';
 import ClickOutsideRoot from './dim-ui/ClickOutsideRoot';

src/app/accounts/Account.tsx

@@ -2,7 +2,7 @@ import { compareBy } from 'app/utils/comparators';
 import { BungieMembershipType } from 'bungie-api-ts/destiny2';
 import clsx from 'clsx';
 import { AppIcon } from '../shell/icons';
-import styles from './Account.m.scss';
+import * as styles from './Account.m.scss';
 import { DestinyAccount, PLATFORM_ICONS, PLATFORM_LABELS } from './destiny-account';
 
 /**

src/app/accounts/MenuAccounts.tsx

@@ -7,7 +7,7 @@ import { useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router';
 import { AppIcon, signOutIcon } from '../shell/icons';
 import Account from './Account';
-import styles from './MenuAccounts.m.scss';
+import * as styles from './MenuAccounts.m.scss';
 import { logOut } from './platforms';
 import { accountsSelector, currentAccountSelector } from './selectors';
 

src/app/accounts/SelectAccount.tsx

@@ -6,7 +6,7 @@ import { chainComparator, compareBy, reverseComparator } from 'app/utils/compara
 import { useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router';
 import Account from './Account';
-import styles from './SelectAccount.m.scss';
+import * as styles from './SelectAccount.m.scss';
 import { logOut } from './platforms';
 import { accountsSelector } from './selectors';
 

src/app/armory/AllWishlistRolls.tsx

@@ -12,7 +12,7 @@ import { wishListInfosSelector, wishListRollsForItemHashSelector } from 'app/wis
 import { WishListRoll } from 'app/wishlists/types';
 import { partition } from 'es-toolkit';
 import { useSelector } from 'react-redux';
-import styles from './AllWishlistRolls.m.scss';
+import * as styles from './AllWishlistRolls.m.scss';
 import { getCraftingTemplate } from './crafting-utils';
 import { consolidateRollsForOneWeapon, consolidateSecondaryPerks } from './wishlist-collapser';
 

src/app/armory/Armory.tsx

@@ -43,7 +43,7 @@ import { ItemCategoryHashes } from 'data/d2/generated-enums';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import AllWishlistRolls from './AllWishlistRolls';
-import styles from './Armory.m.scss';
+import * as styles from './Armory.m.scss';
 import ArmorySheet from './ArmorySheet';
 import Links from './Links';
 import WishListEntry from './WishListEntry';

src/app/armory/ArmorySheet.tsx

@@ -4,7 +4,7 @@ import { DimItem } from 'app/inventory/item-types';
 import { filterMap } from 'app/utils/collections';
 import focusingItemOutputs from 'data/d2/focusing-item-outputs.json';
 import { Suspense, useMemo } from 'react';
-import styles from './ArmorySheet.m.scss';
+import * as styles from './ArmorySheet.m.scss';
 import Armory from './LazyArmory';
 
 export default function ArmorySheet({

src/app/armory/Links.tsx

@@ -14,7 +14,7 @@ import foundry from 'images/foundry.png';
 import ishtarLogo from 'images/ishtar-collective.svg';
 import lightgg from 'images/lightgg.png';
 import { useSelector } from 'react-redux';
-import styles from './Links.m.scss';
+import * as styles from './Links.m.scss';
 
 export default function Links({ item }: { item: DimItem }) {
   const language = useSelector(languageSelector);

src/app/armory/WishListEntry.tsx

@@ -7,7 +7,7 @@ import { filterMap } from 'app/utils/collections';
 import { isKillTrackerSocket } from 'app/utils/item-utils';
 import { getSocketsWithStyle } from 'app/utils/socket-utils';
 import { DestinySocketCategoryStyle } from 'bungie-api-ts/destiny2';
-import styles from './WishListEntry.m.scss';
+import * as styles from './WishListEntry.m.scss';
 
 /**
  * Add a control for people to copy out the wish list line for the currently configured roll.