Use CSS Modules in Footer component

Author: webstackdev

src/components/Footer/index.astro

@@ -6,16 +6,16 @@ import { formatPhoneNumber } from '@components/Footer/server'
 import Sprite from '@components/Sprite/index.astro'
 import type { SpriteName } from '@components/Sprite/sprites'
 import AuthorAvatar from '@assets/images/avatars/kevin-brown.webp'
-import '@components/Footer/footer.css'
+import styles from './footer.module.css'
 
 const year = new Date().getFullYear()
 ---
 
 <site-footer>
   <footer class="bg-bg-offset text-text w-full mt-6 pt-4" role="contentinfo">
-    <div class="flex flex-col footer-grid mx-auto max-w-300 w-[90%] px-4 sm:px-6 lg:px-8 pb-3">
+    <div class:list={[styles.footerGrid, 'flex flex-col mx-auto max-w-300 w-[90%] px-4 sm:px-6 lg:px-8 pb-3']}>
     {/* Page footer company contact */}
-    <div class="footer-contact mt-3 sm:mt-0 sm:flex sm:items-center">
+    <div class:list={[styles.footerContact, 'mt-3 sm:mt-0 sm:flex sm:items-center']}>
       {/* Mobile: avatar and company name in same row, Desktop: avatar on left side */}
       <div class="flex items-center sm:block sm:mr-4 sm:w-[clamp(5em,25%,8em)]">
         <div class="mr-3 w-16 sm:mr-0 sm:w-full">
@@ -56,18 +56,21 @@ const year = new Date().getFullYear()
       </address>
     </div>
     {/* "Hire Me" block with current month and year set by script */}
-    <div class="footer-hire-me hidden lg:block">
+    <div class:list={[styles.footerHireMe, 'hidden lg:block']}>
       <a
         href="/contact"
         id="page-footer__hire-me-anchor"
-        class="footer-hire-me-anchor hidden uppercase text-text underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none after:content-['>']"
+        class:list={[
+          styles.footerHireMeAnchor,
+          "hidden uppercase text-text underline decoration-dotted decoration-text underline-offset-4 hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary focus:outline-none after:content-['>']",
+        ]}
         aria-label="Available for hire, contact me"
       >
         Available Now. Hire Me
       </a>
     </div>
     {/* Page footer Social Share links */}
-    <div class="footer-social">
+    <div class={styles.footerSocial}>
       {
         contactData.company.social
           .sort((a, b) => a.order - b.order)
@@ -92,7 +95,7 @@ const year = new Date().getFullYear()
       }
     </div>
     <div
-      class="footer-bottom-row flex justify-between sm:justify-evenly lg:flex-col px-1 pt-4 pb-3 sm:p-0 lg:pl-8"
+      class:list={[styles.footerBottomRow, 'flex justify-between sm:justify-evenly lg:flex-col px-1 pt-4 pb-3 sm:p-0 lg:pl-8']}
     >
       {/* Page footer Subscribe link */}
       <span class="flex flex-col justify-center lg:pt-3">
@@ -121,7 +124,7 @@ const year = new Date().getFullYear()
         </span>
       </span>
       {/* Page footer RSS link */}
-      <span class="footer-feed-icon flex items-center w-12 lg:h-12 lg:w-12">
+      <span class:list={[styles.footerFeedIcon, 'flex items-center w-12 lg:h-12 lg:w-12']}>
         <a
           href={absoluteUrl('/feed.xml', Astro.site)}
           title="RSS Feed"
@@ -133,7 +136,7 @@ const year = new Date().getFullYear()
       </span>
     </div>
     {/* Page footer Author link and Date */}
-    <div class="footer-copyright flex justify-center py-4 sm:p-0 lg:mt-2">
+    <div class:list={[styles.footerCopyright, 'flex justify-center py-4 sm:p-0 lg:mt-2']}>
       <span>
         &copy; 2018&ndash;{year}
       </span>