Refactor CSS modules to use a consistent import name and provide a type definition file so dot syntax does not fail lint

Author: webstackdev

.github/instructions/general.instructions.md

@@ -17,6 +17,7 @@ applyTo: "**"
 - Do not leave trailing spaces on lines.
 - Do not use run-astro-dev, always use "npm run dev".
 - Always create TypeScript files, not JavaScript files.
+- For every `*.module.css` file, also create the matching `*.module.css.d.ts` file, import it as `styles`, and access classnames via dot syntax (e.g., `styles.someClass`) instead of bracket syntax.
 - Prefer destructured imports over namespace imports when importing specific functions from modules (e.g., `import { resolve } from 'path'` instead of `import * as path from 'path'`).
 - Do not access nanostore observables (e.g., `$consent`) directly from components; expose helper/action methods in `@components/scripts/store` and import those instead.
 - Preact exists only for the Markdown E2E harness under `src/lib/markdown/__tests__/e2e`; all production UI components must use Lit web components instead of Preact.

_TODO.md

@@ -153,24 +153,6 @@ Google Calendar, Apple Calendar,  Yahoo Calender,  Microsoft 365, Outlook, and T
 `https://github.com/add2cal/add-to-calendar-button`
 `https://add-to-calendar-button.com/`
 
-In a number of components where we've moved styles into a *.module.css file and imported it into the Astro layout, we've been inconsistent with naming the import and resolved lint errors concerning accessing object properties by using bracket access, such as:
-
-import menuStyles from './menu.module.css'
-menuStyles['navItemActive']
-
-In all of these cases, we need to refactor to use the pattern show in the Button and Footer components, where we create a *.module.css.d.ts to provide types, name the import consistently as "styles", and access those styles as follows:
-
-styles.footerGrid
-
-Components that need refactoring are as follows. Let's do this next.
-
-src/components/Navigation/Menu.astro
-src/components/Navigation/NavToggle.astro
-src/components/Social/Shares/client/index.ts
-src/components/ThemePicker/index.astro
-src/components/Toasts/NetworkStatus/index.astro
-
-
 ## Set up webmentions
 
 Needs to add real API key and test

src/components/Navigation/Menu.astro

@@ -1,6 +1,6 @@
 ---
 import { navigationItems } from '@components/Navigation/server'
-import menuStyles from './menu.module.css'
+import styles from './menu.module.css'
 export interface Props {
   path: string
 }
@@ -12,15 +12,15 @@ const isActiveMenuItem = (url: string) => {
 }
 
 const activeMenuItem = (url: string) => {
-  return isActiveMenuItem(url) ? ['nav-item-active', menuStyles['navItemActive']] : []
+  return isActiveMenuItem(url) ? ['nav-item-active', styles.navItemActive] : []
 }
 ---
 
 <nav id="main-nav" class="main-nav" role="navigation" aria-label="Main">
   <ul
     class:list={[
       'main-nav-menu',
-      menuStyles['mainNavMenu'],
+      styles.mainNavMenu,
       'w-full font-heading text-[0.85rem] uppercase tracking-[0.22em] text-primary',
       'lg:relative lg:text-[0.8rem] lg:tracking-[0.12em]'
     ]}
@@ -30,14 +30,14 @@ const activeMenuItem = (url: string) => {
       navigationItems.map((navItem) => {
         const isActive = isActiveMenuItem(navItem.url)
         return (
-          <li class:list={['main-nav-item', menuStyles['mainNavItem'], 'lg:relative', ...activeMenuItem(navItem.url)]}>
+          <li class:list={['main-nav-item', styles.mainNavItem, 'lg:relative', ...activeMenuItem(navItem.url)]}>
             <a
               href={navItem.url}
               aria-current={isActive ? 'page' : undefined}
               class:list={[
                 'block text-primary text-xl font-bold tracking-[5px] uppercase no-underline text-center p-4 focus:outline-0',
                 'lg:text-lg lg:lowercase lg:tracking-normal lg:px-5 lg:py-3 lg:flex lg:items-center lg:relative lg:whitespace-nowrap lg:z-10',
-                menuStyles['mainNavLink'],
+                styles.mainNavLink,
               ]}
             >
               {navItem.title}

src/components/Navigation/NavToggle.astro

@@ -1,5 +1,5 @@
 ---
-import navToggleStyles from './navToggle.module.css'
+import styles from './navToggle.module.css'
 /**
  * Menu Toggle Button
  */
@@ -9,26 +9,26 @@ import navToggleStyles from './navToggle.module.css'
   class:list={[
     'nav-toggle-btn',
     'lg:hidden inline-flex items-center justify-center rounded-full border-0 bg-primary-offset text-bg transition-colors duration-150 ease-linear hover:bg-primary focus:bg-primary focus:outline-none',
-    navToggleStyles['button'],
+    styles.button,
   ]}
   type="button"
   aria-expanded="false"
   aria-controls="main-nav"
   aria-label="Open main menu"
 >
   <svg
-    class:list={['nav-toggle-svg', 'h-(--header-icon-size) w-(--header-icon-size)', navToggleStyles['icon']]}
+    class:list={['nav-toggle-svg', 'h-(--header-icon-size) w-(--header-icon-size)', styles.icon]}
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 50 50"
     aria-hidden="true"
     focusable="false"
   >
     <g>
-      <line class:list={['nav-toggle-bar', navToggleStyles['bar']]} x1="13" y1="16.5" x2="37" y2="16.5"></line>
-      <line class:list={['nav-toggle-bar', navToggleStyles['bar']]} x1="13" y1="24.5" x2="37" y2="24.5"></line>
-      <line class:list={['nav-toggle-bar', navToggleStyles['bar']]} x1="13" y1="24.5" x2="37" y2="24.5"></line>
-      <line class:list={['nav-toggle-bar', navToggleStyles['bar']]} x1="13" y1="32.5" x2="37" y2="32.5"></line>
-      <circle class:list={['nav-toggle-circle', navToggleStyles['circle']]} r="23" cx="25" cy="25"></circle>
+      <line class:list={['nav-toggle-bar', styles.bar]} x1="13" y1="16.5" x2="37" y2="16.5"></line>
+      <line class:list={['nav-toggle-bar', styles.bar]} x1="13" y1="24.5" x2="37" y2="24.5"></line>
+      <line class:list={['nav-toggle-bar', styles.bar]} x1="13" y1="24.5" x2="37" y2="24.5"></line>
+      <line class:list={['nav-toggle-bar', styles.bar]} x1="13" y1="32.5" x2="37" y2="32.5"></line>
+      <circle class:list={['nav-toggle-circle', styles.circle]} r="23" cx="25" cy="25"></circle>
     </g>
   </svg>
 </button>

src/components/Navigation/menu.module.css.d.ts

@@ -0,0 +1,8 @@
+declare const styles: {
+  readonly mainNavMenu: string
+  readonly mainNavItem: string
+  readonly navItemActive: string
+  readonly mainNavLink: string
+}
+
+export default styles

src/components/Navigation/navToggle.module.css.d.ts

@@ -0,0 +1,8 @@
+declare const styles: {
+  readonly button: string
+  readonly icon: string
+  readonly bar: string
+  readonly circle: string
+}
+
+export default styles

src/components/Social/Shares/client/index.ts

@@ -70,7 +70,7 @@ export class SocialShareElement extends LitElement {
     const shareData = this.getShareData()
     const shareText = `${shareData.text} ${shareData.url}`.trim()
     const containerClassList = [
-      styles['container'],
+      styles.container,
       'social-share',
       this.layout === 'vertical' ? 'flex flex-col gap-2' : 'flex flex-wrap gap-3',
       this.containerClass,
@@ -79,7 +79,7 @@ export class SocialShareElement extends LitElement {
       .join(' ')
 
     const labelClassList = [
-      styles['label'],
+      styles.label,
       'social-share__label text-sm font-semibold text-text-offset mr-2 self-center',
     ]
       .filter(Boolean)
@@ -125,7 +125,7 @@ export class SocialShareElement extends LitElement {
   private renderPlatform(platform: SharePlatform, shareData: ShareData, shareText: string) {
     const icon = PLATFORM_ICONS[platform.id]?.()
     const buttonClassList = [
-      styles['button'],
+      styles.button,
       'social-share__button inline-flex items-center gap-2 px-4 py-2 rounded-lg text-white font-medium transition-colors hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500',
       platform.colorClasses,
     ]

src/components/Social/Shares/index.module.css.d.ts

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly button: string
+  readonly container: string
+  readonly label: string
+}
+
+export default styles

src/components/ThemePicker/index.astro

@@ -6,7 +6,7 @@
  */
 import { themes } from '@components/ThemePicker/server'
 import Icon from '@components/Icon/index.astro'
-import themePickerStyles from './themePicker.module.css'
+import styles from './themePicker.module.css'
 
 export interface Props {
   closeComponent?: string
@@ -18,7 +18,7 @@ const { closeComponent = 'close', label = 'Select theme' } = Astro.props
 
 <theme-picker transition:name="theme-picker-island" transition:persist>
   <div
-    class:list={[themePickerStyles['themePicker'], 'themepicker', 'bg-bg-offset block overflow-hidden relative w-full']}
+    class:list={[styles.themePicker, 'themepicker', 'bg-bg-offset block overflow-hidden relative w-full']}
     data-theme-modal
     data-nosnippet
     id="theme-picker-panel"
@@ -35,7 +35,7 @@ const { closeComponent = 'close', label = 'Select theme' } = Astro.props
     <ul
       id="theme-menu"
       class:list={[
-        themePickerStyles['list'],
+        styles.list,
         'themepicker__list',
         'block mb-[0.25em] overflow-x-auto overflow-y-hidden py-4 px-6 pb-8 text-center whitespace-nowrap w-full',
       ]}
@@ -44,7 +44,7 @@ const { closeComponent = 'close', label = 'Select theme' } = Astro.props
         themes.map(theme => (
           <li
             class:list={[
-              themePickerStyles['item'],
+              styles.item,
               'themepicker__item',
               'inline-block relative rounded-lg scale-100 ml-4 first:ml-0 hover:shadow-md hover:scale-105 hover:z-1',
             ]}
@@ -58,35 +58,35 @@ const { closeComponent = 'close', label = 'Select theme' } = Astro.props
               <span class="block py-0.5">
                 <span
                   class:list={[
-                    themePickerStyles['hue'],
+                    styles.hue,
                     'themepicker__hue',
                     'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-primary',
                   ]}
                 />
                 <span
                   class:list={[
-                    themePickerStyles['hue'],
+                    styles.hue,
                     'themepicker__hue',
                     'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-secondary',
                   ]}
                 />
                 <span
                   class:list={[
-                    themePickerStyles['hue'],
+                    styles.hue,
                     'themepicker__hue',
                     'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-border',
                   ]}
                 />
                 <span
                   class:list={[
-                    themePickerStyles['hue'],
+                    styles.hue,
                     'themepicker__hue',
                     'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-text-offset',
                   ]}
                 />
                 <span
                   class:list={[
-                    themePickerStyles['hue'],
+                    styles.hue,
                     'themepicker__hue',
                     'rounded-full shadow-[0_0_0_2px_var(--color-text)] inline-block h-6 w-6 overflow-hidden text-left indent-full align-bottom whitespace-nowrap bg-text',
                   ]}

src/components/ThemePicker/themePicker.module.css.d.ts

@@ -0,0 +1,8 @@
+declare const styles: {
+  readonly themePicker: string
+  readonly item: string
+  readonly list: string
+  readonly hue: string
+}
+
+export default styles