Copilot supported conversion to SCSS Modules

.storybook/main.ts

@@ -61,6 +61,34 @@ const storybookConfig: StorybookConfig = {
         transcludeMarkdown: true,
       },
     },
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          {
+            test: /\.module\.scss$/,
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: {
+                  modules: true,
+                  importLoaders: 1,
+                  esModule: false,
+                },
+              },
+              {
+                loader: 'sass-loader',
+              },
+            ],
+          },
+          {
+            test: /(?<!\.module)\.scss$/,
+            use: ['style-loader', 'css-loader', 'sass-loader'],
+          },
+        ],
+      },
+    },
   ],
   env: config => ({
     ...config,

.storybook/preview.tsx

@@ -6,6 +6,7 @@ import { Preview } from '@storybook/react-webpack5';
 import GlobalStyles from '../src/app/legacy/psammead/psammead-styles/src/global-styles';
 import DocsDecorator from './DocsDecorator';
 import ThemeProvider from '../src/app/components/ThemeProvider';
+import ThemeProviderSCSSModules from '#app/components/ThemeProviderSCSSModules';
 import { ServiceContextProvider } from '../src/app/contexts/ServiceContext';
 import { ToggleContextProvider } from '../src/app/contexts/ToggleContext';
 import { UserContextProvider } from '../src/app/contexts/UserContext';
@@ -228,12 +229,17 @@ const preview: Preview = {
               pageData={pageDataFixture}
             >
               <UserContextProvider>
-                <ThemeProvider
-                  service={context.globals.service.service}
+                <ThemeProviderSCSSModules
+                  service="mundo"
                   variant={context.globals.service.variant}
                 >
-                  <Story />
-                </ThemeProvider>
+                  <ThemeProvider
+                    service={context.globals.service.service}
+                    variant={context.globals.service.variant}
+                  >
+                    <Story />
+                  </ThemeProvider>
+                </ThemeProviderSCSSModules>
               </UserContextProvider>
             </EventTrackingContextProvider>
           </RequestContextProvider>

.vscode/launch.json

@@ -24,5 +24,16 @@
       "request": "launch",
       "command": "cd ws-nextjs-app && nvm use && yarn dev"
     },
+    {
+      "name": "Storybook debug",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn storybook",
+       "serverReadyAction": {
+        "pattern": "Local:.+(https?://[^:]+:[0-9]+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    },
   ]
 }

dirAlias.js

@@ -7,6 +7,7 @@ const resolvePath = relativePath => path.resolve(appDirectory, relativePath);
 
 module.exports = {
   webpackDirAlias: {
+    '@scss': resolvePath('src/app/components/ThemeProviderSCSSModules'),
     '#app': resolvePath('src/app'),
     '#src': resolvePath('src'),
     '#nextjs': resolvePath('ws-nextjs-app/'),

jest.config.js

@@ -7,7 +7,10 @@ const unitTests = {
     './src/testHelpers/setupTests.js',
     'jest-expect-message',
   ],
-  moduleNameMapper: jestDirAlias,
+  moduleNameMapper: {
+    ...jestDirAlias,
+    '\\.module\\.(css|scss)$': 'identity-obj-proxy',
+  },
   testEnvironment: 'jsdom',
   snapshotSerializers: ['@emotion/jest/serializer'],
   transform: {
@@ -37,7 +40,10 @@ const clientUnitTests = {
     './src/testHelpers/setupTests.js',
     'jest-expect-message',
   ],
-  moduleNameMapper: jestDirAlias,
+  moduleNameMapper: {
+    ...jestDirAlias,
+    '\\.module\\.(css|scss)$': 'identity-obj-proxy',
+  },
   testEnvironment: '@happy-dom/jest-environment',
   snapshotSerializers: ['@emotion/jest/serializer'],
   transform: {

package.json

@@ -6,7 +6,9 @@
   "sideEffects": [
     "./src/app/legacy/psammead/moment-timezone-include/**/*.*",
     "./src/app/legacy/psammead/psammead-locales/**/*.*",
-    "./cypress/**/*.*"
+    "./cypress/**/*.*",
+    "**/*.scss",
+    "**/*.css"
   ],
   "workspaces": {
     "packages": [
@@ -166,6 +168,7 @@
     "@loadable/webpack-plugin": "5.15.2",
     "@storybook/addon-a11y": "10.3.5",
     "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-styling-webpack": "^3.0.0",
     "@storybook/builder-webpack5": "10.3.5",
     "@storybook/cli": "10.3.5",
     "@storybook/react-webpack5": "10.3.5",
@@ -174,6 +177,7 @@
     "@testing-library/react": "16.3.1",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.6.1",
+    "@types/identity-obj-proxy": "3.0.2",
     "@types/jest": "30.0.0",
     "@types/js-cookie": "^3.0.3",
     "@types/jsdom": "27.0.0",
@@ -200,6 +204,7 @@
     "compression-webpack-plugin": "11.1.0",
     "copy-webpack-plugin": "13.0.1",
     "crypto": "1.0.1",
+    "css-loader": "7.1.2",
     "cypress": "15.11.0",
     "cypress-axe": "1.7.0",
     "cypress-multi-reporters": "2.0.5",
@@ -220,6 +225,7 @@
     "eslint-plugin-react-hooks": "5.2.0",
     "happy-dom": "20.8.9",
     "husky": "9.1.7",
+    "identity-obj-proxy": "3.0.0",
     "jest": "30.3.0",
     "jest-environment-jsdom": "30.2.0",
     "jest-expect-message": "1.1.3",
@@ -229,23 +235,28 @@
     "jest-silent-reporter": "0.6.0",
     "jsdom": "27.0.0",
     "lighthouse": "13.0.1",
+    "mini-css-extract-plugin": "2.9.4",
     "minimist": "1.2.8",
     "mkdirp": "3.0.1",
     "mocha-junit-reporter": "2.2.1",
     "npm-run-all2": "8.0.4",
     "prettier": "3.8.1",
     "puppeteer": "24.22.3",
     "retry": "0.13.1",
+    "sass": "1.94.2",
+    "sass-loader": "16.0.5",
     "start-server-nestjs-webpack-plugin": "2.2.5",
     "storybook": "10.3.5",
     "stream-browserify": "3.0.0",
     "strip-ansi": "7.1.2",
+    "style-loader": "4.0.0",
     "supertest": "7.2.2",
     "terser-webpack-plugin": "5.3.14",
     "timemachine": "0.3.2",
     "ts-jest": "29.4.9",
     "ts-loader": "9.5.4",
     "typescript": "5.9.3",
+    "typescript-plugin-css-modules": "5.2.0",
     "wait-on": "9.0.3",
     "webpack": "5.106.0",
     "webpack-bundle-analyzer": "5.3.0",

scripts/dependencyCheck.js

@@ -12,6 +12,8 @@ const options = {
     '@testing-library/dom',
     '@storybook/addon-knobs',
     'next', // next/dynamic is referenced in some shared components with Express and Next.js, but is swapped out by Babel at build time in the Express app, so depcheck thinks it's missing
+    'ThemeProviderSCSSModules', // internal SCSS module path resolved via webpack/next.js sassOptions.loadPaths
+    '@scss', // webpack alias for src/app/components, resolved via resolve.alias in webpack/next.js
   ],
 };
 
@@ -24,7 +26,7 @@ depcheck(
 
     // Filter out dependencies prefixed with "#".
     const missingFiltered = Object.keys(missing).reduce((obj, key) => {
-      if (key.startsWith('#')) {
+      if (key.startsWith('#') || key.startsWith('@scss/')) {
         return obj;
       }
 

src/app/components/ArticleLinksBlock/Promo/index.module.scss

@@ -0,0 +1,89 @@
+@use '@scss/themeTokens' as theme;
+
+.link {
+  @include theme.fontSizes-gel-font-size(pica);
+  @include theme.fontVariants-gel-font-variant('serif-bold');
+  display: inline-block;
+  vertical-align: middle;
+  text-decoration: none;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  line-clamp: 4;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  color: theme.$palette-grey-8;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+
+  &:visited {
+    color: theme.$palette-grey-6;
+  }
+
+  &::before {
+    bottom: 0;
+    content: '';
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+  }
+
+  // Dark UI override
+  :global([data-is-dark-ui='true']) & {
+    color: theme.$palette-grey-2;
+  }
+}
+
+.promoBox {
+  position: relative;
+  background-color: theme.$palette-white;
+  padding: #{theme.$spacings-double};
+  padding-inline-end: #{theme.pixelsToRem-px-to-rem(38)};
+  height: auto;
+  display: block;
+  width: 100%;
+
+  // Dark UI override
+  :global([data-is-dark-ui='true']) & {
+    background-color: theme.$palette-grey-7;
+  }
+
+  // Opera Mini overrides
+  :global(.is-opera-mini) & {
+    position: relative;
+    background-color: theme.$palette-white;
+    padding: #{theme.$spacings-double};
+    margin-bottom: #{theme.$spacings-double};
+    width: calc(100% - #{theme.$spacings-full});
+
+    :global([data-is-dark-ui='true']) & {
+      background-color: theme.$palette-grey-3;
+    }
+
+    @media (min-width: #{theme.$mediaQueries-group-2-min-width-bp}) {
+      width: calc(50% - #{theme.$spacings-double});
+    }
+  }
+}
+
+.timestamp {
+  margin-top: #{theme.$spacings-full};
+
+  // Dark UI override
+  :global([data-is-dark-ui='true']) & {
+    color: theme.$palette-grey-1;
+  }
+}
+
+.chevron {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  inset-inline-end: #{theme.pixelsToRem-px-to-rem(12)};
+  fill: currentColor;
+}

src/app/components/ArticleLinksBlock/Promo/index.tsx

@@ -5,7 +5,7 @@ import { OptimoBlock } from '#app/models/types/optimo';
 import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
 import { Chevron, ChevronOrientation } from '#app/components/icons';
 import { ServiceContext } from '../../../contexts/ServiceContext';
-import styles from './index.styles';
+import styles from './index.module.scss';
 
 interface PromoProps {
   block: OptimoBlock;
@@ -32,18 +32,18 @@ const Promo = ({ block, clickTracker }: PromoProps) => {
     textBlock?.model?.blocks?.[0]?.model?.blocks?.[0]?.model?.text ?? '';
 
   return (
-    <div css={styles.promoBox}>
-      <a css={styles.link} href={href} {...clickTracker}>
+    <div className={styles.promoBox}>
+      <a className={styles.link} href={href} {...clickTracker}>
         {title}
         <Chevron
           dir={dir}
-          css={styles.chevron}
+          className={styles.chevron}
           orientation={ChevronOrientation.FORWARD}
         />
       </a>
       {timestamp && (
         <PromoTimestamp
-          css={styles.timestamp}
+          className={styles.timestamp}
           serviceDatetimeLocale={serviceDatetimeLocale}
         >
           {timestamp}

src/app/components/ArticleLinksBlock/PromoList/index.module.scss

@@ -0,0 +1,61 @@
+@use '@scss/themeTokens' as theme;
+
+.promo {
+  & ul {
+    list-style: none;
+    padding-inline-start: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: #{theme.$spacings-full};
+    width: 100%;
+  }
+
+  // Opera Mini overrides
+  :global(.is-opera-mini) & {
+    list-style: none;
+    padding-inline-start: 0;
+    margin: 0;
+  }
+}
+
+.list {
+  display: flex;
+  flex-shrink: 0;
+  margin-inline: #{theme.$spacings-full};
+
+  &:last-of-type {
+    margin-bottom: #{theme.$spacings-triple};
+  }
+
+  @media #{theme.$mediaQueries-forced-colours} {
+    border: solid #{theme.pixelsToRem-px-to-rem(3)} transparent;
+  }
+
+  @media (min-width: #{theme.$mediaQueries-group-2-min-width-bp}) {
+    margin-inline: #{theme.$spacings-double};
+  }
+
+  @media (min-width: #{theme.$mediaQueries-group-3-min-width-bp}) {
+    margin-inline: #{theme.$spacings-double};
+  }
+
+  @media (min-width: #{theme.$mediaQueries-group-4-min-width-bp}) {
+    margin-inline: 0;
+  }
+
+  // Opera Mini overrides
+  :global(.is-opera-mini) & {
+    @media (max-width: #{theme.$mediaQueries-group-0-max-width-bp}) {
+      margin-inline: #{theme.$spacings-full};
+    }
+
+    @media (min-width: #{theme.$mediaQueries-group-2-min-width-bp}) {
+      margin-inline: #{theme.$spacings-double};
+    }
+
+    @media (min-width: #{theme.$mediaQueries-group-4-min-width-bp}) {
+      margin-inline: 0;
+    }
+  }
+}