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"
+      }
+    },
   ]
 }

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.2.12",
     "@storybook/addon-docs": "10.2.12",
+    "@storybook/addon-styling-webpack": "^3.0.0",
     "@storybook/builder-webpack5": "10.2.12",
     "@storybook/cli": "10.2.12",
     "@storybook/react-webpack5": "10.2.12",
@@ -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.4.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.7.0",
     "husky": "9.1.7",
+    "identity-obj-proxy": "3.0.0",
     "jest": "30.2.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.6.2",
     "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.2.12",
     "stream-browserify": "3.0.0",
     "strip-ansi": "7.1.2",
+    "style-loader": "4.0.0",
     "supertest": "7.1.4",
     "terser-webpack-plugin": "5.3.14",
     "timemachine": "0.3.2",
     "ts-jest": "29.4.4",
     "ts-loader": "9.5.4",
     "typescript": "5.9.3",
+    "typescript-plugin-css-modules": "5.2.0",
     "wait-on": "9.0.3",
     "webpack": "5.105.2",
     "webpack-bundle-analyzer": "5.2.0",

src/app/components/Curation/Subhead/index.module.scss

@@ -0,0 +1,44 @@
+
+@use '../../ThemeProviderSCSSModules/fontSizes.scss' as fontSizes;
+@use '../../ThemeProviderSCSSModules/palette.scss' as palette;
+
+.h2 {
+  font-family: var(--sans-bold-font-family);
+  font-style: var(--sans-bold-font-style);
+  font-weight: var(--sans-bold-font-weight);
+  @include fontSizes.gel-font-size(doublePica);
+  color: palette.$grey-10;
+
+  a {
+    display: inline-block;
+    color: palette.$grey-10;
+    text-decoration: none;
+  }
+
+  span {
+    display: inline-block;
+    position: relative;
+  }
+
+  a:visited {
+    color: palette.$grey-10;
+  }
+
+  a:hover, a:focus {
+    color: palette.$postbox;
+
+    span {
+      text-decoration: underline;
+    }
+  }
+
+  svg {
+    margin-inline-start: 0.5rem;
+    fill: currentColor;
+    width: calc(14 / 16) * 1rem;
+    height: calc(14 / 16) * 1rem;
+    position: relative;
+  }
+}
+
+

src/app/components/Curation/Subhead/index.module.scss.d.ts

@@ -0,0 +1,2 @@
+declare const styles: { [className: string]: string };
+export default styles;

src/app/components/Curation/Subhead/index.tsx

@@ -1,7 +1,5 @@
 import { Fragment, PropsWithChildren, use } from 'react';
-
-import styles from './index.styles';
-
+import styles from './index.module.scss';
 import { LeftChevron, RightChevron } from '../../icons';
 
 import { ServiceContext } from '../../../contexts/ServiceContext';
@@ -32,7 +30,7 @@ const Subhead = ({
       )
     : Fragment;
   return (
-    <h2 css={styles.h2} id={id}>
+    <h2 className={styles.h2} id={id}>
       <Wrapper>{children}</Wrapper>
     </h2>
   );

src/app/components/ThemeProviderSCSSModules/chameleonLogos/index.tsx

@@ -0,0 +1,31 @@
+import { BrandSVG } from '../../../models/types/theming';
+
+// Chameleon logos have an additional margin on their viewbox
+const buildLogo = ({ width, height, group, viewbox }: BrandSVG) => {
+  const margin = 140;
+
+  const croppedWidth = (width || 0) - 2 * margin;
+  const croppedHeight = (height || 0) - 2 * margin;
+
+  return {
+    group: (
+      <g
+        fillRule="evenodd"
+        stroke="#000"
+        strokeWidth=".335"
+        style={{ stroke: '#fff' }}
+      >
+        {group}
+      </g>
+    ),
+    ratio: croppedWidth / croppedHeight,
+    viewbox: viewbox || {
+      minX: margin,
+      minY: margin,
+      width: croppedWidth,
+      height: croppedHeight,
+    },
+  };
+};
+
+export default buildLogo;

src/app/components/ThemeProviderSCSSModules/chameleonLogos/mundo.tsx

@@ -0,0 +1,9 @@
+import build from '.';
+
+export default build({
+  width: 1738,
+  height: 425,
+  group: (
+    <path d="M759.928 265.748a4646.67 4646.67 0 00-23.49-37.241 2633.129 2633.129 0 00-23.49-36.2v73.441h-22.003V159.45h23.192a2668.556 2668.556 0 0123.713 36.052 2774.159 2774.159 0 0123.267 36.647V159.45h22.003v106.298h-23.192zm44.259-106.298h73.145v19.03h-50.25v23.044h44.6v19.029h-44.6v26.166h53.075v19.03h-75.97V159.45zM982.1 265.748a3174.441 3174.441 0 01-9.887-35.978 3159.855 3159.855 0 01-9.44-35.977 2391.54 2391.54 0 01-9.218 35.977 2452.296 2452.296 0 01-9.812 35.978h-24.233a2032.839 2032.839 0 01-14.57-52.628c-4.659-17.74-9.068-35.63-13.23-53.67h24.975a2003.215 2003.215 0 007.88 41.33 1444.404 1444.404 0 008.771 40.586 3259.894 3259.894 0 0018.881-77.456h22.3a3251.95 3251.95 0 0018.733 75.821 1999.976 1999.976 0 008.623-39.843 1455.41 1455.41 0 007.73-40.438h24.531a1845.28 1845.28 0 01-13.231 53.67 2041.61 2041.61 0 01-14.57 52.628h-24.233zm95.37 2.23c-5.85 0-11.622-.645-17.32-1.932a66.227 66.227 0 01-16.428-6.096v-20.516c10.604 6.444 21.854 9.663 33.748 9.663 6.74 0 11.868-1.138 15.387-3.419 3.517-2.279 5.278-5.45 5.278-9.515 0-3.07-.869-5.475-2.602-7.21-1.735-1.733-4.04-3.122-6.913-4.163-2.876-1.04-6.095-2.007-9.663-2.899-5.85-1.387-11.002-2.973-15.462-4.757-4.46-1.784-8.228-3.889-11.299-6.319-3.073-2.427-5.403-5.352-6.987-8.771-1.587-3.42-2.379-7.508-2.379-12.265 0-6.74 1.71-12.537 5.13-17.395 3.419-4.855 8.25-8.597 14.495-11.224 6.244-2.625 13.677-3.94 22.3-3.94 5.65 0 11.2.646 16.65 1.933 5.45 1.289 10.357 3.024 14.72 5.203v20.22c-4.363-2.677-9.293-4.758-14.793-6.245-5.501-1.487-11.028-2.23-16.577-2.23-6.047 0-10.73 1.04-14.05 3.122-3.32 2.081-4.98 5.055-4.98 8.92 0 2.776.792 4.98 2.379 6.616 1.584 1.635 3.84 2.973 6.764 4.014 2.923 1.04 6.368 2.058 10.333 3.047 5.055 1.29 9.76 2.703 14.124 4.238 4.36 1.538 8.2 3.493 11.521 5.872 3.32 2.379 5.896 5.403 7.731 9.069 1.833 3.668 2.75 8.177 2.75 13.529 0 7.038-1.735 13.06-5.203 18.063-3.47 5.006-8.474 8.823-15.016 11.448-6.54 2.625-14.42 3.94-23.638 3.94zM141.732 141.733v141.733h141.733V141.732H141.732zm98.84 100.024c-2.423 3.42-5.873 6.06-10.353 7.917-4.483 1.859-9.865 2.788-16.153 2.788h-31.763v-79.725h29.92c8.817 0 15.646 1.767 20.489 5.296 4.84 3.532 7.263 8.605 7.263 15.22 0 3.792-.867 7.081-2.602 9.869-1.735 2.787-4.3 5-7.697 6.634 4.698 1.56 8.294 4.033 10.787 7.415 2.493 3.383 3.74 7.49 3.74 12.321 0 4.758-1.211 8.847-3.632 12.265zm-20.273-38.97c2.204-1.82 3.307-4.366 3.307-7.638 0-6.317-4.301-9.477-12.9-9.477h-12.25v19.847h12.25c4.19 0 7.388-.91 9.593-2.732zm-7.534 15.22h-14.309v21.52h14.093c4.84 0 8.563-.91 11.165-2.732 2.602-1.82 3.903-4.44 3.903-7.86 0-7.285-4.951-10.928-14.852-10.928zm106.133-76.274v141.733H460.63V141.732H318.898zm98.838 100.024c-2.421 3.42-5.872 6.06-10.352 7.917-4.482 1.859-9.865 2.788-16.152 2.788h-31.763v-79.725h29.92c8.816 0 15.646 1.767 20.488 5.296 4.841 3.532 7.263 8.605 7.263 15.22 0 3.792-.867 7.081-2.601 9.868-1.735 2.788-4.301 5.001-7.697 6.635 4.697 1.56 8.293 4.033 10.786 7.415 2.494 3.383 3.74 7.49 3.74 12.321 0 4.758-1.21 8.847-3.632 12.265zm-20.271-38.97c2.204-1.82 3.306-4.366 3.306-7.638 0-6.317-4.3-9.478-12.9-9.478h-12.25v19.848h12.25c4.19 0 7.389-.91 9.594-2.732zm-7.535 15.22h-14.309v21.52h14.093c4.84 0 8.564-.91 11.166-2.732 2.601-1.82 3.902-4.44 3.902-7.86 0-7.285-4.951-10.928-14.852-10.928zm106.133 65.458h141.732V141.733H496.063v141.732zm101.793-36.056c-3.302 1.822-7.127 3.261-11.477 4.316-4.352 1.056-8.93 1.585-13.73 1.585-6.377 0-12.116-.929-17.217-2.786-5.102-1.858-9.415-4.536-12.94-8.033-3.528-3.498-6.229-7.778-8.103-12.842-1.876-5.063-2.814-10.766-2.814-17.105 0-6.192.975-11.784 2.927-16.776 1.95-4.99 4.763-9.271 8.44-12.842 3.674-3.569 8.082-6.301 13.222-8.197 5.138-1.893 10.896-2.841 17.273-2.841 4.426 0 8.609.456 12.547 1.366 3.939.912 7.596 2.24 10.972 3.989v15.52a36.771 36.771 0 00-10.015-4.646c-3.6-1.055-7.39-1.584-11.366-1.584-5.476 0-10.147 1.021-14.01 3.06-3.865 2.04-6.827 4.992-8.89 8.853-2.064 3.862-3.094 8.562-3.094 14.098 0 5.539.993 10.257 2.982 14.154 1.987 3.898 4.876 6.868 8.665 8.907 3.787 2.04 8.383 3.06 13.785 3.06 8.251 0 15.866-2.148 22.843-6.448v15.192zM1209.489 237.408a782.388 782.388 0 01-11.038-21.575 1615.774 1615.774 0 01-10.482-21.687v58.315h-13.491v-79.723h16.613a1508.574 1508.574 0 0024.53 51.96 2064.773 2064.773 0 0012.377-25.646 858.91 858.91 0 0011.93-26.314h16.28v79.723h-13.492v-58.539a1467.853 1467.853 0 01-21.52 43.486h-11.707zm95.892 16.726c-6.989 0-12.954-1.338-17.897-4.015-4.944-2.676-8.735-6.522-11.373-11.54-2.639-5.018-3.958-11.02-3.958-18.007v-47.834h14.16v49.395c0 6.393 1.654 11.28 4.962 14.662 3.307 3.384 8.009 5.073 14.106 5.073 6.093 0 10.815-1.69 14.16-5.073 3.345-3.382 5.018-8.269 5.018-14.662v-49.395h14.16v47.834c0 6.987-1.338 12.99-4.014 18.007-2.676 5.018-6.486 8.864-11.429 11.54-4.944 2.677-10.91 4.015-17.895 4.015zm101.02-1.673a2630.727 2630.727 0 00-12.99-20.07 4015.406 4015.406 0 00-13.213-20.07 1248.408 1248.408 0 00-13.046-19.29v59.43h-13.603v-79.723h14.272a1756.279 1756.279 0 0119.791 29.213 2207.234 2207.234 0 0119.457 29.882v-59.095h13.604v79.723H1406.4zm31.667 0v-79.723h29.102c8.324 0 15.442 1.56 21.351 4.682 5.91 3.122 10.444 7.638 13.604 13.548 3.158 5.91 4.738 13.065 4.738 21.464 0 8.474-1.58 15.685-4.738 21.631-3.16 5.949-7.693 10.5-13.604 13.66-5.909 3.16-13.064 4.738-21.464 4.738h-28.99zm14.16-67.681v55.639h14.049c8.324 0 14.718-2.378 19.179-7.136 4.46-4.757 6.69-11.708 6.69-20.85 0-8.994-2.194-15.851-6.579-20.573-4.386-4.72-10.78-7.08-19.179-7.08h-14.16zm104.81-13.715c5.947 0 11.3.967 16.058 2.9 4.756 1.933 8.864 4.72 12.32 8.362 3.457 3.643 6.095 8.028 7.917 13.157 1.82 5.129 2.732 10.854 2.732 17.171 0 6.32-.912 12.025-2.732 17.115-1.822 5.093-4.442 9.46-7.861 13.102-3.42 3.643-7.526 6.43-12.32 8.363-4.796 1.932-10.167 2.899-16.113 2.899-5.948 0-11.3-.967-16.056-2.9-4.758-1.931-8.864-4.72-12.32-8.362-3.458-3.641-6.097-8.028-7.918-13.157-1.822-5.13-2.731-10.853-2.731-17.171s.91-12.024 2.731-17.116c1.82-5.09 4.442-9.458 7.862-13.101 3.418-3.641 7.525-6.43 12.32-8.363 4.795-1.932 10.164-2.9 16.112-2.9zm0 70.803c5.056 0 9.404-1.17 13.047-3.512 3.641-2.341 6.429-5.686 8.362-10.035 1.933-4.348 2.9-9.57 2.9-15.666 0-6.169-.967-11.429-2.9-15.778-1.933-4.348-4.72-7.693-8.362-10.035-3.643-2.34-7.991-3.512-13.046-3.512-5.056 0-9.405 1.171-13.045 3.512-3.643 2.342-6.431 5.687-8.363 10.035-1.934 4.35-2.9 9.572-2.9 15.667 0 6.095.966 11.336 2.9 15.722 1.932 4.386 4.72 7.749 8.363 10.09 3.64 2.341 7.99 3.512 13.045 3.512z" />
+  ),
+});

src/app/components/ThemeProviderSCSSModules/fontFaces/fontBaseUrl.scss

@@ -0,0 +1,4 @@
+$font-base-url: 'https://static.files.bbci.co.uk/ws/simorgh-assets/public';
+$reith-base-url: 'https://static.files.bbci.co.uk/fonts/';
+$reith-fonts-dir: $reith-base-url + 'reith/r2.512/';
+$reith-qalam-fonts-dir: $reith-base-url + 'reith-qalam/1.310/';

src/app/components/ThemeProviderSCSSModules/fontFaces/fontBaseUrls.scss

@@ -0,0 +1,4 @@
+$font-base-url: 'https://static.files.bbci.co.uk/ws/simorgh-assets/public';
+$reith-base-url: 'https://static.files.bbci.co.uk/fonts/';
+$reith-fonts-dir: $reith-base-url + 'reith/r2.512/';
+$reith-qalam-fonts-dir: $reith-base-url + 'reith-qalam/1.310/';

src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-ethiopic-bold.scss

@@ -0,0 +1,15 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+  font-family: 'Noto Sans Ethiopic';
+  font-weight: 700;
+  font-style: normal;
+  src:
+    url('#{fontUrls.$font-base-url}/fonts/NotoSansEthiopic/v1.901/bold.woff')
+      format('woff'),
+    url('#{fontUrls.$font-base-url}/fonts/NotoSansEthiopic/v1.901/bold.eot')
+      format('eot'),
+    url('#{fontUrls.$font-base-url}/fonts/NotoSansEthiopic/v1.901/bold.ttf')
+      format('ttf');
+  font-display: swap;
+}

src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-ethiopic-regular.scss

@@ -0,0 +1,12 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+  font-family: 'Noto Sans Ethiopic';
+  font-weight: 400;
+  font-style: normal;
+  src:
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansEthiopic/v1.901/normal.woff') format('woff'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansEthiopic/v1.901/normal.eot') format('eot'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansEthiopic/v1.901/normal.ttf') format('ttf');
+  font-display: swap;
+}

src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-gujarati-bold.scss

@@ -0,0 +1,12 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+  font-family: 'Noto Sans Gujarati';
+  font-weight: 700;
+  font-style: normal;
+  src:
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansGujarati/v1.00/bold.woff') format('woff'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansGujarati/v1.00/bold.eot') format('eot'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansGujarati/v1.00/bold.ttf') format('ttf');
+  font-display: swap;
+}

src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-gujarati-regular.scss

@@ -0,0 +1,12 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+  font-family: 'Noto Sans Gujarati';
+  font-weight: 400;
+  font-style: normal;
+  src:
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansGujarati/v1.00/normal.woff') format('woff'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansGujarati/v1.00/normal.eot') format('eot'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansGujarati/v1.00/normal.ttf') format('ttf');
+  font-display: swap;
+}

src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-tamil-bold.scss

@@ -0,0 +1,13 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+  font-family: 'Noto Sans Tamil';
+  font-weight: 700;
+  font-style: normal;
+  src:
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/bold.woff2') format('woff2'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/bold.woff') format('woff'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/normal.eot') format('eot'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/bold.ttf') format('ttf');
+  font-display: swap;
+}

src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-tamil-regular.scss

@@ -0,0 +1,13 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+  font-family: 'Noto Sans Tamil';
+  font-weight: 400;
+  font-style: normal;
+  src:
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/normal.woff2') format('woff2'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/normal.woff') format('woff'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/normal.eot') format('eot'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansTamil/v1.00/normal.ttf') format('ttf');
+  font-display: swap;
+}

src/app/components/ThemeProviderSCSSModules/fontFaces/noto-sans-telugu-bold.scss

@@ -0,0 +1,12 @@
+@use './fontBaseUrls.scss' as fontUrls;
+
+@font-face {
+  font-family: 'Noto Sans Telugu';
+  font-weight: 700;
+  font-style: normal;
+  src:
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansTelugu/v1.00/bold.woff') format('woff'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansTelugu/v1.00/bold.eot') format('eot'),
+  url('#{fontUrls.$font-base-url}/fonts/NotoSansTelugu/v1.00/bold.ttf') format('ttf');
+  font-display: swap;
+}