Update stylelint config plugin, config settings, and fix style errors due to upgrade to Stylelint v15.0

Author: webstackdev

package.json

@@ -93,7 +93,6 @@
     "remark-toc": "^9.0.0",
     "resend": "^6.4.0",
     "sharp": "^0.34.4",
-    "stylelint-config-standard": "^39.0.1",
     "svg-sprite": "2.0.4",
     "tailwindcss": "^4.1.16",
     "title-case": "4.3.2",
@@ -156,6 +155,7 @@
     "remark-rehype": "^11.1.2",
     "rimraf": "6.1.0",
     "stylelint": "^16.25.0",
+    "stylelint-config-standard": "^39.0.1",
     "stylelint-declaration-block-no-ignored-properties": "2.8.0",
     "stylelint-order": "7.0.0",
     "temp-dir": "3.0.0",

src/components/Brand/Logo.astro

@@ -16,9 +16,11 @@ const { class: className } = Astro.props
       position: relative;
       z-index: var(--z-content-overlay);
     }
+
     .logo-block-outer {
       fill: var(--color-bg-inverse);
     }
+
     .logo-block-inner {
       fill: var(--color-primary);
     }

src/components/Callout/index.astro

@@ -51,6 +51,7 @@ const borderColor = borderColorMap[type]
   }
 
   /* Spacing for nested elements */
+  /* stylelint-disable-next-line selector-max-universal */
   .callout__content > * + * {
     margin-top: 2rem;
   }

src/components/Carousel/__fixtures__/client.fixture.astro

@@ -60,9 +60,9 @@
 
 <style>
   .embla {
-    position: relative;
-    max-width: 600px;
     margin: 0 auto;
+    max-width: 600px;
+    position: relative;
   }
 
   .embla__viewport {
@@ -81,35 +81,35 @@
 
   .slide-content {
     background: #f5f5f5;
-    padding: 2rem;
     border-radius: 8px;
+    padding: 2rem;
     text-align: center;
   }
 
   .embla__button {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-    background: rgba(255, 255, 255, 0.9);
+    align-items: center;
+    background: rgb(255 255 255 / 90%);
     border: 1px solid #ccc;
     border-radius: 50%;
-    width: 3rem;
-    height: 3rem;
+    cursor: pointer;
     display: flex;
-    align-items: center;
+    height: 3rem;
     justify-content: center;
-    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
     transition: opacity 0.2s ease;
+    width: 3rem;
+    z-index: 1;
   }
 
   .embla__button:hover {
     background: white;
   }
 
   .embla__button:disabled {
-    opacity: 0.3;
     cursor: not-allowed;
+    opacity: 0.3;
   }
 
   .embla__button--prev {
@@ -122,19 +122,19 @@
 
   .embla__dots {
     display: flex;
-    justify-content: center;
     gap: 0.5rem;
+    justify-content: center;
     margin-top: 1rem;
   }
 
   .embla__dot {
-    width: 0.75rem;
-    height: 0.75rem;
-    border-radius: 50%;
     background: #ccc;
     border: none;
+    border-radius: 50%;
     cursor: pointer;
+    height: 0.75rem;
     transition: background-color 0.2s ease;
+    width: 0.75rem;
   }
 
   .embla__dot:hover,
@@ -143,14 +143,14 @@
   }
 
   .sr-only {
-    position: absolute;
-    width: 1px;
+    border: 0;
+    clip-path: inset(50%);
     height: 1px;
-    padding: 0;
     margin: -1px;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    padding: 0;
+    position: absolute;
     white-space: nowrap;
-    border: 0;
+    width: 1px;
   }
 </style>

src/components/Footer/footer.css

@@ -8,16 +8,16 @@
 }
 
 /* Grid areas for responsive layout */
-@media (min-width: 640px) {
+@media (width >= 640px) {
   .footer-grid {
     display: grid;
     gap: 0.5rem 1rem;
-    grid-template-columns: 1fr 1fr;
     grid-template-areas:
       "contact social"
       "contact channels"
       "bottom-row bottom-row"
       "copyright copyright";
+    grid-template-columns: 1fr 1fr;
   }
 
   .footer-contact { grid-area: contact; }
@@ -26,19 +26,15 @@
   .footer-copyright { grid-area: copyright; }
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
   .footer-grid {
-    grid-template-columns: 2fr 1fr 1fr;
-    grid-template-rows: 2rem auto auto;
-    grid-template-areas:
-      "hire-me social bottom-row"
-      "contact social bottom-row"
-      "copyright copyright copyright";
+    grid-template:
+      "hire-me social bottom-row" 2rem "contact social bottom-row" auto "copyright copyright copyright" auto / 2fr 1fr 1fr;
   }
 
   .footer-hire-me {
-    grid-area: hire-me;
     align-self: end;
+    grid-area: hire-me;
     margin-top: 2rem;
   }
 

src/components/Forms/Download/index.astro

@@ -178,22 +178,22 @@ const downloadUrl = `/downloads/${fileName}`
 
 <style>
   .download-form-wrapper {
-    max-width: 600px;
     margin: 0 auto;
+    max-width: 600px;
   }
 
   #downloadFormStatus.success {
-    display: block;
     background-color: var(--color-success-bg);
-    color: var(--color-success-text);
     border: 1px solid var(--color-success-border);
+    color: var(--color-success-text);
+    display: block;
   }
 
   #downloadFormStatus.error {
-    display: block;
     background-color: var(--color-error-bg);
-    color: var(--color-error-text);
     border: 1px solid var(--color-error-border);
+    color: var(--color-error-text);
+    display: block;
   }
 </style>
 

src/components/GDPR/Consent/index.astro

@@ -126,28 +126,28 @@ const purposeList = purposes.map((p: keyof typeof purposeDescriptions) => purpos
 
 <style>
   .gdpr-consent {
-    margin: 1.5rem 0;
-    padding: 1rem;
+    background-color: var(--color-bg-offset);
     border: 1px solid var(--color-border);
     border-radius: 0.5rem;
-    background-color: var(--color-bg-offset);
+    margin: 1.5rem 0;
+    padding: 1rem;
   }
 
   .gdpr-consent__label {
-    display: flex;
     align-items: flex-start;
-    gap: 0.75rem;
     cursor: pointer;
+    display: flex;
+    gap: 0.75rem;
   }
 
   .gdpr-consent__checkbox {
+    border: 2px solid var(--color-border);
+    border-radius: 0.25rem;
+    cursor: pointer;
     flex-shrink: 0;
-    width: 1.25rem;
     height: 1.25rem;
     margin-top: 0.125rem;
-    cursor: pointer;
-    border: 2px solid var(--color-border);
-    border-radius: 0.25rem;
+    width: 1.25rem;
   }
 
   .gdpr-consent__checkbox:focus {
@@ -161,16 +161,16 @@ const purposeList = purposes.map((p: keyof typeof purposeDescriptions) => purpos
   }
 
   .gdpr-consent__text {
+    color: var(--color-text);
     flex: 1;
     font-size: 0.875rem;
     line-height: 1.5;
-    color: var(--color-text);
   }
 
   .gdpr-consent__purposes {
+    list-style-type: disc;
     margin: 0.5rem 0;
     padding-left: 1.5rem;
-    list-style-type: disc;
   }
 
   .gdpr-consent__purposes li {
@@ -187,11 +187,11 @@ const purposeList = purposes.map((p: keyof typeof purposeDescriptions) => purpos
   }
 
   .gdpr-consent__error {
-    margin-top: 0.5rem;
-    padding: 0.5rem;
-    font-size: 0.875rem;
-    color: var(--color-danger);
     background-color: var(--color-danger-bg);
     border-radius: 0.25rem;
+    color: var(--color-danger);
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    padding: 0.5rem;
   }
 </style>

src/components/Header/index.astro

@@ -17,33 +17,33 @@ const { path } = Astro.props
   :root {
     --header-icon-size: calc(3.5em * 0.75);
     --header-icon-svg-size: calc(var(--header-icon-size) * 0.7);
-    --circle-stroke: calc(var(--header-icon-size) * 2 * 3.141592653);
+    --circle-stroke: calc(var(--header-icon-size) * 2 * 3.1416);
   }
 
-  @media (min-width: 640px) {
+  @media (width >= 640px) {
     :root {
       --header-icon-size: calc(3.5em * 0.85);
     }
   }
 
-  @media (min-width: 1024px) {
+  @media (width >= 1024px) {
     :root {
       --header-icon-size: calc(3.5em);
     }
   }
 
   #header::after {
+    background-color: var(--color-bg-offset);
+    box-sizing: border-box;
     content: '';
     display: block;
-    position: absolute;
+    height: 100%;
     left: 52%;
+    position: absolute;
     top: 0;
-    height: 100%;
-    width: 102vw;
     transform: translateX(-52%);
+    width: 102vw;
     z-index: -1;
-    box-sizing: border-box;
-    background-color: var(--color-bg-offset);
   }
 </style>