chore: upgrade to stylelint 16 (#727)

adobe · Dec 24, 2024 · 4255b19 · 4255b19
1 parent 3800f26
commit 4255b19
Show file tree

Hide file tree

Showing 27 changed files with 681 additions and 1,267 deletions.
diff --git a/.renovaterc.json b/.renovaterc.json
@@ -1,4 +1,5 @@
 {
+  "extends": ["config:recommended"],
   "enabled": true,
   "baseBranches": ["main"],
   "branchNameStrict": true,

diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,7 +1,3 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
-  "rules": {
-    "declaration-block-no-redundant-longhand-properties": [true, { "severity": "warning" }],
-    "no-descending-specificity": [true, { "severity": "warning" }]
-  }
-}
+  "extends": ["stylelint-config-standard"]
+}
diff --git a/blocks/author-box/author-box.css b/blocks/author-box/author-box.css
@@ -69,7 +69,7 @@ main .author-box-container > div {
     display: none;
   }
 
-  @media (min-width: 600px) {
+  @media (width >= 600px) {
     main .author-box {
         margin-left: auto;
         margin-right: auto;
@@ -96,7 +96,7 @@ main .author-box-container > div {
     }
   }
 
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     main .author-box-info .blog-author-blurb {
         max-width: 380px;
         margin-left: 20px;
@@ -108,7 +108,7 @@ main .author-box-container > div {
     }
   }
 
-  @media (min-width: 900px) {
+  @media (width >= 900px) {
     main .author-box-info .blog-author-blurb {
         max-width: 450px;
         font-size: 20px;

diff --git a/blocks/availability/availability.css b/blocks/availability/availability.css
@@ -15,7 +15,7 @@
   max-width: calc(100% - 6vw);
 }
 
-@media (min-width: 900px) {
+@media (width >= 900px) {
   .availability .tooltip-wrapper {
     max-width: calc(100% - 6rem);
   }
@@ -63,7 +63,7 @@
   transition: opacity .4s;
 }
 
-@media (min-width: 900px) {
+@media (width >= 900px) {
   .availability .tooltip {
     transform: translate(-50%, calc(-50% - (12px + var(--type-detail-m-lh))));
   }

diff --git a/blocks/card-list/card-list.css b/blocks/card-list/card-list.css
@@ -54,15 +54,15 @@
     margin-bottom: var(--spacing-xs);
   }
 
-@media screen and (min-width: 768px) {
+@media screen and (width >= 768px) {
   .card-list .cards-card-body h3 {
     font-size: var(--type-heading-l-size);
     line-height: var(--type-heading-l-lh);
     margin-top: var(--spacing-m);
   }
 }
 
-@media screen and (min-width: 900px) {
+@media screen and (width >= 900px) {
   .card-list > ul {
     grid-gap: var(--spacing-s);
   }
@@ -73,7 +73,7 @@
   cursor: pointer;
 }
 
-.card-list-wrapper .cards .cards-card-details p.description:not([aria-expanded="true"]):not(.noextra)::after {
+.card-list-wrapper .cards .cards-card-details p.description:not([aria-expanded="true"], .noextra)::after {
   content: '...';
 }
 

diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -57,10 +57,7 @@
     content: '';
     position: absolute;
     z-index: -1;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     opacity: 0;
     box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
     transition: opacity 0.3s ease-in-out;
@@ -107,13 +104,13 @@
     justify-content: space-between;
 }
 
-@media (min-width: 900px) {
+@media (width >= 900px) {
     .cards.two .cards-card, .cards.three .cards-card, .cards.four .cards-card {
         width: calc(50% - 1rem);
     }
 }
 
-@media (min-width: 1200px) {
+@media (width >= 1200px) {
     .cards.three .cards-card {
         width: calc(33% - 1rem);
     }

diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
@@ -156,7 +156,7 @@ main.without-full-width-hero .section.content .columns-wrapper {
   margin-top: var(--spacing-m);
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (width >= 768px) {
   /* tall cards */
   .columns.tall > div > div {
     padding: var(--spacing-xl) var(--spacing-s) var(--spacing-m);
@@ -219,7 +219,7 @@ main.without-full-width-hero .section.content .columns-wrapper {
   /* adapt for 3 column layout in redesign for 4-columns - End */
 }
 
-@media screen and (min-width: 900px) {
+@media screen and (width >= 900px) {
   .columns-wrapper {
     margin: var(--spacing-xl) 0 0;
   }
@@ -295,7 +295,7 @@ main.without-full-width-hero .section.content .columns-wrapper {
   }
 }
 
-@media screen and (min-width: 1200px) {
+@media screen and (width >= 1200px) {
   .columns.colored-icon h3 {
     line-height: 1;
   }

diff --git a/blocks/copy/copy.css b/blocks/copy/copy.css
@@ -41,7 +41,7 @@
     padding: 5px 20px;
 }
 
-@media (min-width: 900px) {
+@media (width >= 900px) {
     .copy > div {
         flex-direction: unset;
         justify-content: stretch;

diff --git a/blocks/feature-list/feature-list.css b/blocks/feature-list/feature-list.css
@@ -49,15 +49,15 @@
     max-width: 100%;
 }
 
-@media screen and (min-width: 1200px) {
+@media screen and (width >= 1200px) {
     .feature-list > div:last-of-type {
         grid-template-columns: 1fr 1fr;
         grid-template-areas: "copy image";
         grid-gap: var(--spacing-xxl);
     }
 }
 
-@media screen and (min-width: 1440px) {
+@media screen and (width >= 1440px) {
     .feature-list.contained > div {
         max-width: var(--grid-desktop-container-width);
     }

diff --git a/blocks/feed/feed.css b/blocks/feed/feed.css
@@ -53,13 +53,14 @@
 .feed.recent .desc {
   /* stylelint-disable-next-line value-no-vendor-prefix */
   display: -webkit-box;
+  line-clamp: 5;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (width >= 768px) {
   .feed.recent > div > div {
     grid-template-columns: 1fr 1fr 1fr;
     grid-gap: var(--spacing-xs);
@@ -82,7 +83,7 @@
   }
 }
 
-@media screen and (min-width: 900px) {
+@media screen and (width >= 900px) {
   .feed.recent > div {
     margin-bottom: 0;
     flex-direction: column;
@@ -120,7 +121,7 @@
   }
 }
 
-@media screen and (min-width: 1200px) {
+@media screen and (width >= 1200px) {
   .feed.recent h3 {
     font-size: var(--type-heading-l-size);
     line-height: var(--type-heading-l-lh);

diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
@@ -125,7 +125,7 @@ footer .new-footer {
   margin-right: 0;
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (width >= 600px) {
   footer .new-footer {
     margin: auto;
   }
@@ -135,7 +135,7 @@ footer .new-footer {
   }
 }
 
-@media screen and (min-width: 900px) {
+@media screen and (width >= 900px) {
   .redesign .footer-wrapper {
     padding-top: var(--spacing-xxl);
   }

diff --git a/blocks/form/form.css b/blocks/form/form.css
@@ -115,7 +115,7 @@ main .form button {
   font-family: var(--body-font-family);
 }
 
-@media screen and (min-width: 900px) {
+@media screen and (width >= 900px) {
   main .form {
     padding: var(--spacing-ml);
   }

diff --git a/blocks/get-started/get-started.css b/blocks/get-started/get-started.css
@@ -35,7 +35,7 @@
     max-width: 128px;
 }
 
-@media (min-width: 900px) {
+@media (width >= 900px) {
     .get-started > div:last-of-type {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -46,7 +46,7 @@
     }
 }
 
-@media (min-width: 1440px) {
+@media (width >= 1440px) {
     .get-started > div {
         max-width: 1200px;
     }

diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -5,7 +5,7 @@
   --nav-animation-transition: all 0.2s ease-in-out;
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (width >= 600px) {
   :root {
     --curtain-width: calc(100% - var(--grid-tablet-container-width));
   }
@@ -57,7 +57,7 @@ header .gnav {
     "navlist navlist navlist navlist mobileCurtain";
 }
 
-@media (max-width: 1199px) {
+@media (width <= 1199px) {
   .franklin button.gnav-toggle,
   .franklin .brand-wrapper,
   .franklin .gnav-brand-wrapper,
@@ -443,10 +443,7 @@ button.gnav-toggle::after {
 /* curtain */
 .gnav-curtain {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   transition: var(--nav-animation-transition);
   pointer-events: none;
 }
@@ -618,16 +615,13 @@ button.gnav-toggle::after {
   content: "";
   position: absolute;
   z-index: -1;
-  top: 0;
-  bottom: 0;
-  left: -4px;
-  right: -4px;
+  inset: 0 -4px;
   background-color: rgb(255 208 0 / 30%);
   border-radius: 4px;
 }
 
 /* redesign responsive */
-@media screen and (min-width: 600px) {
+@media screen and (width >= 600px) {
   .franklin .gnav .gnav-brand {
     font-size: 16px;
     line-height: 18px;
@@ -638,7 +632,7 @@ button.gnav-toggle::after {
   }
 }
 
-@media screen and (min-width: 1200px) {
+@media screen and (width >= 1200px) {
   .gnav .gnav-cta-button-wrapper.mobile {
     display: none;
   }
@@ -915,7 +909,7 @@ button.gnav-toggle::after {
   }
 }
 
-@media (min-width: 1440px) {
+@media (width >= 1440px) {
   .gnav,
   .gnav-search-field,
   .gnav-search-results {

diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
@@ -99,7 +99,7 @@
     margin-bottom: -10px;
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (width >= 600px) {
     .inner-content p {
         display: block;
         line-height: 1.5;
@@ -111,7 +111,7 @@
     }
 }
 
-@media screen and (min-width: 900px) {
+@media screen and (width >= 900px) {
     .inner-content p {
         margin-bottom: var(--spacing-m);
     }
@@ -168,7 +168,7 @@
     height: auto;
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (width >= 768px) {
     .hero.side-by-side .contained-wrapper{
         width: 90vw;
         grid-template-columns: 1fr 1fr;
@@ -194,7 +194,7 @@
     }
 }
 
-@media screen and (min-width: 900px) {
+@media screen and (width >= 900px) {
     .hero.side-by-side .inner-content h1 {
         font-size: var(--type-heading-xxl-size);
         margin: var(--spacing-s) 0;
@@ -222,13 +222,13 @@
     margin-bottom: 0;
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (width >= 600px) {
     .hero.multiple-cta ul.cta-button-list {
         margin-top: 8px;
     }
 }
 
-@media screen and (min-width: 900px) {
+@media screen and (width >= 900px) {
     .hero.multiple-cta ul.cta-button-list {
         margin-top: 16px;
     }

diff --git a/blocks/logo-wall/logo-wall.css b/blocks/logo-wall/logo-wall.css
@@ -17,8 +17,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    column-gap: var(--spacing-s);
-    row-gap: var(--spacing-s);
+    gap: var(--spacing-s);
     width: 100%;
     max-width: 740px;
     padding-inline-start: 0;
@@ -55,7 +54,7 @@
     max-height: 80px;
 }
 
-@media (min-width: 900px) {
+@media (width >= 900px) {
     .logo-wall {
         padding: var(--spacing-xxl) 0;
     }
@@ -65,8 +64,7 @@
     }
 
     .logo-wall .logo-wall-list {
-        column-gap: var(--spacing-xl);
-        row-gap: var(--spacing-l);
+        gap: var(--spacing-l) var(--spacing-xl);
         max-width: 1200px;
     }