Convert CSS module files to SCSS for consistency (#58158)

Author: heiskr

…ndings/components/ArticleList.module.css …dings/components/ArticleList.module.scsssrc/landings/components/ArticleList.module.css renamed to src/landings/components/ArticleList.module.scss src/landings/components/ArticleList.module.css renamed to src/landings/components/ArticleList.module.scss

@@ -5,7 +5,8 @@
     border-radius: 0;
   }
 
-  h3, span {
+  h3,
+  span {
     user-select: text;
     color: var(--fgColor-accent, var(--color-accent-fg));
   }

src/landings/components/ArticleList.tsx

@@ -5,7 +5,7 @@ import { ArrowRightIcon } from '@primer/octicons-react'
 import { ActionList } from '@primer/react'
 import { clsx } from 'clsx'
 import dayjs from 'dayjs'
-import styles from './ArticleList.module.css'
+import styles from './ArticleList.module.scss'
 
 export type ArticleListPropsT = {
   title?: string

…omponents/ProductArticlesList.module.css …mponents/ProductArticlesList.module.scsssrc/landings/components/ProductArticlesList.module.css renamed to src/landings/components/ProductArticlesList.module.scss src/landings/components/ProductArticlesList.module.css renamed to src/landings/components/ProductArticlesList.module.scss

@@ -12,4 +12,4 @@
       text-decoration: underline;
     }
   }
-}
+}

src/landings/components/ProductArticlesList.tsx

@@ -3,7 +3,7 @@ import { ActionList } from '@primer/react'
 import { ProductTreeNode, useMainContext } from '@/frame/components/context/MainContext'
 import { Link } from '@/frame/components/Link'
 import clsx from 'clsx'
-import styles from './ProductArticlesList.module.css'
+import styles from './ProductArticlesList.module.scss'
 
 export const ProductArticlesList = () => {
   const { currentProductTree } = useMainContext()

…ngs/components/SidebarProduct.module.css …gs/components/SidebarProduct.module.scsssrc/landings/components/SidebarProduct.module.css renamed to src/landings/components/SidebarProduct.module.scss src/landings/components/SidebarProduct.module.css renamed to src/landings/components/SidebarProduct.module.scss

@@ -7,7 +7,7 @@ import { ProductTreeNode, useMainContext } from '@/frame/components/context/Main
 import { useAutomatedPageContext } from '@/automated-pipelines/components/AutomatedPageContext'
 import { nonAutomatedRestPaths } from '@/rest/lib/config'
 
-import styles from './SidebarProduct.module.css'
+import styles from './SidebarProduct.module.scss'
 
 export const SidebarProduct = () => {
   const router = useRouter()

src/landings/components/SidebarProduct.tsx

@@ -1,16 +1,20 @@
 .learningTracks {
-  border: 1px solid var(--borderColor-default, var(--color-border-default, #d1d9e0));
+  border: 1px solid
+    var(--borderColor-default, var(--color-border-default, #d1d9e0));
   border-radius: 12px;
   padding: 1.5rem;
-  padding-bottom: .75rem;
+  padding-bottom: 0.75rem;
   margin-bottom: 1rem;
   margin-left: 1rem;
   box-shadow:
     0px 1px 3px 0px rgba(31, 35, 40, 0.08),
     0px 1px 0px 0px rgba(31, 35, 40, 0.06);
   position: relative;
   z-index: 1;
-  background-color: var(--bgColor-default, var(--color-canvas-default, #ffffff));
+  background-color: var(
+    --bgColor-default,
+    var(--color-canvas-default, #ffffff)
+  );
 }
 
 .trackHeader {
@@ -60,13 +64,14 @@
   width: 1.5rem;
   height: 1.5rem;
   background-color: transparent;
-  border: 1px solid var(--borderColor-default, var(--color-border-default, #d0d7de));
+  border: 1px solid
+    var(--borderColor-default, var(--color-border-default, #d0d7de));
   color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.70rem;
+  font-size: 0.7rem;
   font-weight: 600;
   line-height: 1;
 }
@@ -78,12 +83,19 @@
 
 /* Hide only the timeline line that extends below the last badge, preserve everything else */
 .timelineContainer :global(.Timeline-Item:last-child::before) {
-  background: linear-gradient(to bottom, var(--borderColor-muted, var(--color-border-muted)) 0%, var(--borderColor-muted, var(--color-border-muted)) 30%, transparent 30%, transparent 100%) !important;
+  background: linear-gradient(
+    to bottom,
+    var(--borderColor-muted, var(--color-border-muted)) 0%,
+    var(--borderColor-muted, var(--color-border-muted)) 30%,
+    transparent 30%,
+    transparent 100%
+  ) !important;
 }
 
 .timelineBadge {
   background-color: var(--color-canvas-subtle, #f6f8fa) !important;
-  border: 1px solid var(--borderColor-default, var(--color-border-default, #d1d9e0)) !important;
+  border: 1px solid
+    var(--borderColor-default, var(--color-border-default, #d1d9e0)) !important;
 }
 
 /* Fix entire timeline component overlapping header */
@@ -118,7 +130,8 @@
   height: 2rem;
   background-color: var(--color-canvas-subtle, #f6f8fa);
   color: var(--fgColor-muted, var(--color-fg-muted));
-  border: 1px solid var(--borderColor-default, var(--color-border-default, #d1d9e0));
+  border: 1px solid
+    var(--borderColor-default, var(--color-border-default, #d1d9e0));
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
@@ -131,34 +144,43 @@
 
 /* Add connecting line from badge downward */
 .mobileBadge::after {
-  content: '';
+  content: "";
   position: absolute;
   left: 50%;
   top: 100%;
   width: 1px;
   height: 2.5rem;
-  background-color: var(--borderColor-default, var(--color-border-default, #d1d9e0));
+  background-color: var(
+    --borderColor-default,
+    var(--color-border-default, #d1d9e0)
+  );
   transform: translateX(-50%);
   z-index: 1;
 }
 
 /* Add connecting line above badge (except first item) */
 .mobileItem:not(:first-child) .mobileBadge::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 50%;
   bottom: 100%;
   width: 1px;
   height: 2.5rem;
-  background-color: var(--borderColor-default, var(--color-border-default, #d1d9e0));
+  background-color: var(
+    --borderColor-default,
+    var(--color-border-default, #d1d9e0)
+  );
   transform: translateX(-50%);
   z-index: 1;
 }
 
 .mobileConnector {
   width: 1px;
   height: 1rem;
-  background-color: var(--borderColor-default, var(--color-border-default, #d1d9e0));
+  background-color: var(
+    --borderColor-default,
+    var(--color-border-default, #d1d9e0)
+  );
   margin: 0 auto;
 }
 
@@ -167,7 +189,8 @@
 }
 
 .mobileItem .mobileTile {
-  border: 1px solid var(--borderColor-default, var(--color-border-default, #d1d9e0));
+  border: 1px solid
+    var(--borderColor-default, var(--color-border-default, #d1d9e0));
   border-radius: 12px;
   padding: 1rem;
   margin-top: 0.5rem;
@@ -177,15 +200,18 @@
     0px 1px 0px 0px rgba(31, 35, 40, 0.06);
   position: relative;
   z-index: 3;
-  background-color: var(--bgColor-default, var(--color-canvas-default, #ffffff));
+  background-color: var(
+    --bgColor-default,
+    var(--color-canvas-default, #ffffff)
+  );
 }
 
 /* Desktop: show Timeline component */
 @media (min-width: 768px) {
   .mobileLayout {
     display: none;
   }
-  
+
   .timelineContainer {
     display: block;
   }
@@ -208,6 +234,6 @@
   }
 
   .trackHeader h3 {
-    margin-bottom: .50rem;
+    margin-bottom: 0.5rem;
   }
-}
+}

…journey/JourneyLearningTracks.module.css …ourney/JourneyLearningTracks.module.scsssrc/landings/components/journey/JourneyLearningTracks.module.css renamed to src/landings/components/journey/JourneyLearningTracks.module.scss src/landings/components/journey/JourneyLearningTracks.module.css renamed to src/landings/components/journey/JourneyLearningTracks.module.scss

@@ -3,7 +3,7 @@ import { ChevronDownIcon, ChevronUpIcon } from '@primer/octicons-react'
 import { Button, Details, Timeline, Token, useDetails } from '@primer/react'
 import { Link } from '@/frame/components/Link'
 import { JourneyTrack } from '@/journeys/lib/journey-path-resolver'
-import styles from './JourneyLearningTracks.module.css'
+import styles from './JourneyLearningTracks.module.scss'
 
 type JourneyLearningTracksProps = {
   tracks: JourneyTrack[]