chore: Ensure class names conform to PascalCase (#5716)

Co-authored-by: Jon Rohan <[email protected]>

Author: hussam-i-am

.changeset/seven-falcons-fry.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+chore: Ensure class names conform to PascalCase

.gitignore

@@ -40,3 +40,6 @@ blob-report
 
 # ESLint
 .eslintcache
+
+# CSS modules type definitions
+*.module.css.d.ts

examples/theming/src/app/components/PageHeader/PageHeader.module.css

@@ -1,12 +1,12 @@
-.header {
+.Header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   min-height: 4rem;
   padding: var(--base-size-16);
 }
 
-.logo {
+.Logo {
   color: inherit;
   text-decoration: none;
 }

examples/theming/src/app/components/PageHeader/PageHeader.tsx

@@ -4,8 +4,8 @@ import classes from './PageHeader.module.css'
 
 export function PageHeader() {
   return (
-    <header className={classes.header}>
-      <Link href="/" className={classes.logo}>
+    <header className={classes.Header}>
+      <Link href="/" className={classes.Logo}>
         Primer
       </Link>
       <ThemePreference />

examples/theming/src/app/components/ThemePreference/ThemePreference.module.css

@@ -1,9 +1,9 @@
 /* stylelint-disable selector-no-qualifying-type */
-html[data-color-mode='dark'] .light {
+html[data-color-mode='dark'] .Light {
   display: none !important;
 }
 
-html[data-color-mode='light'] .dark,
-html[data-color-mode='auto'] .dark {
+html[data-color-mode='light'] .Dark,
+html[data-color-mode='auto'] .Dark {
   display: none !important;
 }

examples/theming/src/app/components/ThemePreference/ThemePreference.tsx

@@ -2,7 +2,6 @@
 
 import {SunIcon, MoonIcon} from '@primer/octicons-react'
 import {Button, useTheme} from '@primer/react'
-import {clsx} from 'clsx'
 import classes from './ThemePreference.module.css'
 
 export function ThemePreference() {
@@ -30,8 +29,8 @@ export function ThemePreference() {
         })
       }}
     >
-      <SunIcon className={clsx(classes.icon, classes.light)} />
-      <MoonIcon className={clsx(classes.icon, classes.dark)} />
+      <SunIcon className={classes.Light} />
+      <MoonIcon className={classes.Dark} />
     </Button>
   )
 }

package-lock.json

@@ -20,7 +20,7 @@
     "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
     "build:components.json": "npm run build:components.json -w @primer/react",
     "build:hooks.json": "npm run build:hooks.json -w @primer/react",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --ignore-pattern '**/*.module.css.d.ts'",
     "lint:css": "stylelint --rd -q '**/*.css'",
     "lint:css:fix": "npm run lint:css -- --fix",
     "lint:fix": "npm run lint -- --fix",
@@ -29,8 +29,9 @@
     "test:update": "npm run test -- --updateSnapshot",
     "test:watch": "npm run test -- --watch",
     "test:coverage": "npm run test -- --coverage",
-    "test:type-check": "tsc --noEmit",
-    "type-check": "tsc --noEmit && npm run type-check -ws --if-present",
+    "test:type-check": "npm run type-css-modules && tsc --noEmit",
+    "type-check": "npm run type-css-modules && tsc --noEmit && npm run type-check -ws --if-present",
+    "type-css-modules": "tcm -p **/packages/react/src/**/*.module.css",
     "release": "npm run build && changeset publish",
     "reset": "script/reset",
     "size": "size-limit"
@@ -46,8 +47,8 @@
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.1",
     "@github/axe-github": "0.6.1",
-    "@github/mini-throttle": "2.1.1",
     "@github/markdownlint-github": "^0.6.0",
+    "@github/mini-throttle": "2.1.1",
     "@github/prettier-config": "0.0.6",
     "@mdx-js/react": "1.6.22",
     "@playwright/test": "^1.50.0",
@@ -80,6 +81,7 @@
     "rimraf": "5.0.5",
     "size-limit": "11.1.5",
     "stylelint": "16.9.0",
+    "typed-css-modules": "0.9.1",
     "typescript": "^5.7.2"
   },
   "optionalDependencies": {