Copilot guided conversion to SCSS Modules #13013

andrewscfc · 2025-07-25T12:15:14Z

Resolves JIRA:

Summary

A very high-level summary of easily-reproducible changes that can be understood by non-devs, and why these changes where made.

Code changes

A bullet point list of key code changes that have been made.

Developer Checklist

Testing

Additional Testing Steps

List the steps required to test this PR.

Useful Links

Coding Standards
Repository use guidelines
Add Links to useful resources related to this PR if applicable.

andrewscfc · 2025-07-25T12:16:39Z

package.json

    "puppeteer": "24.10.2",
    "retry": "0.13.1",
+    "sass": "1.89.2",
+    "sass-loader": "16.0.5",


copilot recommended packages to support SCSS

andrewscfc · 2025-07-25T12:36:10Z

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

@@ -0,0 +1,223 @@
+// fontFaces.module.scss
+// SCSS mixins for @font-face rules, matching the fontFaces.ts constants
+// Usage: @include reith-serif-regular-face; etc.


seems a pretty direct conversion from the ts constants: https://github.com/bbc/simorgh/blob/latest/src/app/components/ThemeProvider/fontFaces.ts

src/app/components/ThemeProviderSCSSModules/fontFacesLazy.module.scss

andrewscfc · 2025-07-25T12:40:10Z

src/app/components/ThemeProviderSCSSModules/fontFamilies.module.scss

@@ -0,0 +1,22 @@
+// fontFamilies.module.scss
+// SCSS variables for font-family stacks, matching fontFamilies.ts
+// Usage: font-family: $reith-sans;


Original file: https://github.com/bbc/simorgh/blob/latest/src/app/components/ThemeProvider/fontFamilies.ts

andrewscfc · 2025-07-25T12:46:29Z

src/app/components/ThemeProviderSCSSModules/fontMediaQueries.module.scss

@@ -0,0 +1,14 @@
+// fontMediaQueries.module.scss
+// SCSS variables for font media query breakpoints, matching fontMediaQueries.ts
+// These are static values representing only the media query condition (no @media, no quotes).


After some back and forth with Copilot it told me that you can't have constants that contain full media queries like the original file

You can get very close though with the condition being encapsulating in a variable

andrewscfc · 2025-07-25T12:49:56Z

src/app/components/ThemeProviderSCSSModules/fontSizes.module.scss

+  $values: map-get(map-get($font-sizes, $scale), $group);
+  font-size: map-get($values, font-size);
+  line-height: map-get($values, line-height);
+}


This was a really difficult conversion, the theme dictates the font size and line height so it seemed sensible for these be declared as global variables to set at runtime by JS based on the service theme. In theory the algorithm otherwise works the same as the ts version: https://github.com/bbc/simorgh/blob/latest/src/app/components/ThemeProvider/fontSizes.ts

andrewscfc · 2025-07-25T12:50:29Z

src/app/components/ThemeProviderSCSSModules/palette.module.scss

+$storm: #404040;
+$success-core: #148A00;
+$weather-blue: #067EB3;
+$white: #FFFFFF;


original file: https://github.com/bbc/simorgh/blob/latest/src/app/components/ThemeProvider/palette.ts

andrewscfc · 2025-07-25T12:52:13Z

src/app/components/ThemeProviderSCSSModules/spacings.module.scss

+$margin-below-400px: $full;
+$gutter-below-600px: $full;
+$margin-above-400px: $double;
+$gutter-above-600px: $double;


Quite a good comparison to the just CSS Modules equivalent, pretty much all the imperative logic is retained from the original: https://github.com/bbc/simorgh/blob/latest/src/app/components/ThemeProvider/spacings.ts

andrewscfc · 2025-07-25T12:52:45Z

webpack.config.client.js

+          use: ['style-loader', 'css-loader', 'sass-loader'],
+        },
+      ],
+    },


Copilot contributed webpack config for SCSS

andrewscfc · 2025-07-25T12:52:49Z

webpack.config.server.js

+          use: ['style-loader', 'css-loader', 'sass-loader'],
+        },
+      ],
+    },


Copilot contributed webpack config for SCSS

src/app/components/ThemeProviderSCSSModules/palette.module.scss

src/app/components/ThemeProviderSCSSModules/index.tsx

andrewscfc · 2025-07-30T15:02:26Z

src/app/components/ThemeProviderSCSSModules/themes/mundo.ts

+    'brand-logo': 'var(--white)',
+    'brand-foreground': 'var(--ghost)',
+    'brand-highlight': 'var(--white)',
+    'brand-border': 'var(--postbox-30)',


First example pulling in custom properties dynamically based on theme, this should reflect current behaviour

src/app/components/ThemeProviderSCSSModules/themes/mundo.ts

…ilot]

andrewscfc · 2025-08-01T15:32:43Z

package.json

    "jest-serializer-html": "7.1.0",
    "jest-silent-reporter": "0.6.0",
    "jsdom": "26.1.0",
+    "mini-css-extract-plugin": "2.9.2",


Copilot claims this enables extraction of css into seperate chunks based on usage

andrewscfc · 2025-08-01T15:36:54Z

src/app/components/ThemeProviderSCSSModules/chameleonLogos/buildLogo.module.scss

+  $ratio: if($cropped-height != 0, $cropped-width / $cropped-height, 1);
+
+  :root {
+    --brand-logo-ratio: #{$ratio};


It's a bit of a stretch but in principle this algorithm will set this custom css property to refer to when putting the css together for the brand here:

simorgh/src/app/legacy/containers/Brand/index.jsx

Line 40 in 140e62c

const svgRatio = brandSVG && brandSVG.ratio;

andrewscfc · 2025-08-01T15:39:26Z

src/app/components/ThemeProviderSCSSModules/chameleonLogos/buildLogo.module.scss

@@ -0,0 +1,30 @@
+@mixin build-logo(


This meant to be roughly functional equivalent to: https://github.com/bbc/simorgh/blob/latest/src/app/components/ThemeProvider/chameleonLogos/index.tsx#L5

it compute values to use elsewhere for the brand and provides a suitable css class to use for styles

andrewscfc · 2025-08-01T15:40:09Z

src/app/components/ThemeProviderSCSSModules/chameleonLogos/buildLogo.module.scss

+  stroke: #000;
+  stroke-width: 0.335;
+  /* Optionally, set stroke via custom property or theme */
+}


I think this needs moving to the :root declaration above to make it global for use elsewhere

andrewscfc · 2025-08-01T15:41:48Z

src/app/components/ThemeProviderSCSSModules/chameleonLogos/mundo.module.scss

+
+.mundoLogoTheme {
+  @include logo.build-logo(1738, 425);
+}


Applies mundo specific config to logo and actually executes the function, adding the suitably populated custom properties to the page

Based on: https://github.com/bbc/simorgh/blob/latest/src/app/components/ThemeProvider/chameleonLogos/mundo.tsx#L4

andrewscfc · 2025-08-01T15:55:15Z

src/app/components/ThemeProviderSCSSModules/themes/mundo/mundo.ts

+import '../../../fontVariants/reith.module.scss';
+import './palette.module.scss';
+import '../../../fontScripts/latinWithDiacritics.module.scss';
+import '../../../chameleonLogos/mundoLogo.module.scss';


Quite important implementation detail here, these scss modules are imported and applied to the page, but because this is dynamically imported via loadable the theory is this css is correctly chunked with mundo only i.e. only css for the chosen theme is loaded

src/app/components/ThemeProviderSCSSModules/themes/mundo/mundo.ts

andrewscfc · 2025-08-01T15:57:39Z

src/app/components/ThemeProviderSCSSModules/palette/mundo.module.scss

+:root {
+  --brand-background: var(--postbox);
+  --brand-logo: var(--white);
+  --brand-foreground: var(--ghost);
+  --brand-highlight: var(--white);
+  --brand-border: var(--postbox-30);
+}


Suggested change

:root {

--brand-background: var(--postbox);

--brand-logo: var(--white);

--brand-foreground: var(--ghost);

--brand-highlight: var(--white);

--brand-border: var(--postbox-30);

}

This file was moved, should be deleted

andrewscfc · 2025-08-01T15:57:50Z

src/app/components/ThemeProviderSCSSModules/themes/mundo/palette.module.scss

+:root {
+  --brand-background: var(--postbox);
+  --brand-logo: var(--white);
+  --brand-foreground: var(--ghost);
+  --brand-highlight: var(--white);
+  --brand-border: var(--postbox-30);
+}


Equivalent of:

simorgh/src/app/components/ThemeProvider/themes/mundo.ts

Line 14 in 140e62c

palette: {

andrewscfc · 2025-08-01T15:58:43Z

src/app/components/ThemeProviderSCSSModules/withThemeProvider.tsx

+};
+
+
+export default ThemeProvider;


Equivalent of

simorgh/src/app/components/ThemeProvider/withThemeProvider.tsx

Line 44 in 140e62c

const withThemeProvider = (

This is simplified for now and obviously creates its own Provider rather than use emotion

andrewscfc · 2025-09-05T13:09:22Z

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

+  };
+};
+
+export default buildLogo;


Existing logic for brand svg unchanged by move to SCSS modules

andrewscfc · 2025-09-05T13:34:32Z

src/app/components/ThemeProviderSCSSModules/themes/mundo/mundo.ts

+import '../../../fontFaces/reith-serif-light.module.scss';
+import '../../../fontVariants/reith.module.scss';
+import './palette.module.scss';
+import '../../../fontScripts/latinWithDiacritics.module.scss';


Quite important implementation detail here, these scss modules are imported and applied to the page, but because this is dynamically imported via loadable the theory is this css is correctly chunked with mundo only i.e. only css for the chosen theme is loaded

andrewscfc · 2025-09-05T13:39:18Z

src/app/components/ThemeProviderSCSSModules/themes/mundo/mundo.ts

+import '../../fontFaces/reith-serif-light.module.scss';
+import '../../fontVariants/reith.module.scss';
+import './palette.module.scss';
+import '../../fontScripts/latinWithDiacritics.module.scss';


Quite important implementation detail here, these scss modules are imported and applied to the page, but because this is dynamically imported via loadable the theory is this css is correctly chunked with mundo only i.e. only css for the chosen theme is loaded

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

…opilot]

andrewscfc · 2025-11-20T12:58:03Z

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

    : Fragment;
  return (
-    <h2 css={styles.h2} id={id}>
+    <h2 className="h2" id={id}>


needs integrating properly

…rew-scss-modules

andrewscfc commented Jul 25, 2025

View reviewed changes

andrewscfc added the Copilot label Jul 25, 2025

andrewscfc commented Jul 30, 2025

View reviewed changes

andrewscfc force-pushed the andrew-scss-modules branch from c3a0d1d to 8821093 Compare August 1, 2025 14:22

andrewscfc added 7 commits August 1, 2025 15:26

copilot driven introduction of SCSS Modules [copilot]

47e9bb1

guided copilot conversion of styling constants/utilities to SCSS [cop…

1f6a4d4

…ilot]

beginning of theme application with SCSS [copilot]

82b3c26

support code splitting for css modules [copilot]

8db0a50

mundo font nearly entirely converted to scss modules [copilot]

ed3da93

mundo theme has brand logo converted to SCSS modules [copilot]

719c18f

first attempt at full theme setup with scss modules [copilot]

0a8dcd6

andrewscfc force-pushed the andrew-scss-modules branch from 8821093 to 0a8dcd6 Compare August 1, 2025 14:27

Merge branch 'latest' of github.com:bbc/simorgh into andrew-scss-modules

c067875

andrewscfc commented Aug 1, 2025

View reviewed changes

andrewscfc added 5 commits September 4, 2025 08:56

Merge branch 'latest' into andrew-scss-modules

c395ea7

Merge branch 'latest' into andrew-scss-modules

d49af8a

Delete fontFacesLazy.module.scss as mixins only work at build time

622f783

Delete moved palette/mundo.module.scss

b0c19da

keep original brand svg solution as it is unaffected by SCSS modules

0df1134

andrewscfc commented Sep 5, 2025

View reviewed changes

Remove import of removed scss module

45fc3cf

andrewscfc commented Sep 5, 2025

View reviewed changes

correct imports

9fa6533

andrewscfc commented Sep 5, 2025

View reviewed changes

andrewscfc added 3 commits September 5, 2025 16:32

Curation container except fonts [copilot]

14e8656

font parameters converted to reference theme variables

65e904f

first fully converted component scss module [copilot]

a5a4f48

andrewscfc force-pushed the andrew-scss-modules branch from 403d74b to a5a4f48 Compare September 5, 2025 16:08

Merge branch 'latest' into andrew-scss-modules

b990200

andrewscfc commented Sep 5, 2025

View reviewed changes

src/app/components/Curation/Subhead/index.module.scss Show resolved Hide resolved

src/app/components/Curation/Subhead/index.module.scss Outdated Show resolved Hide resolved

andrewscfc added 5 commits October 31, 2025 17:29

fix yarn lock

d9cee84

Merge branch 'latest' into andrew-scss-modules

088c588

non-reith fonts locations updated to reflace changes on latest [copilot]

e4818ff

update reith fonts to reference a centralised variable [copilot]

930246d

update ./fontBaseUrl.module.scss to ./fontBaseUrls.module.scss [c…

db50f52

…opilot]

andrewscfc force-pushed the andrew-scss-modules branch from 73f6f80 to db50f52 Compare November 5, 2025 15:39

yarn after merge

bacaa6a

andrewscfc commented Nov 20, 2025

View reviewed changes

andrewscfc added 7 commits November 20, 2025 13:53

correct comment

71b14f1

fix alias for fontUrls

b314a6f

Merge branch 'andrew-scss-modules' of github.com:bbc/simorgh into and…

e69cca0

…rew-scss-modules

fix storybook compilation [copilot]

709273b

Merge branch 'latest' into andrew-scss-modules

794823f

changes to properly integrate style to subhead [copilot]

9894ef9

working css module resolution [copilot]

74fe3ff

andrewscfc force-pushed the andrew-scss-modules branch from f14cc43 to 74fe3ff Compare December 5, 2025 14:49

andrewscfc added 10 commits January 29, 2026 11:53

Partially working css global variables

92301ef

remove test imports of global css variables - theme import works

ffbfe84

removed distinction between module and global scss for now

171f5ec

Partially working css global variables [copilot]

e5b4947

remove test imports of global css variables - theme import works

1b2192e

removed distinction between module and global scss for now

8207f9f

Convert pixels to rem in sass [copilot]

3c4bac5

Merge branch 'andrew-scss-modules' of github.com:bbc/simorgh into and…

e021f21

…rew-scss-modules

improve nested styles

58b0680

move colour variables to sass [copilot]

152a72f

andrewscfc force-pushed the andrew-scss-modules branch from b0b0fdc to 152a72f Compare January 30, 2026 09:24

andrewscfc added 3 commits January 30, 2026 09:58

Merge branch 'latest' of github.com:bbc/simorgh into andrew-scss-modules

4116132

fix media query support in font sizes [copilot]

2ea2941

remove webpack debugging helpers

011dbe6

		};


		export default ThemeProvider; No newline at end of file

Copilot guided conversion to SCSS Modules #13013

Are you sure you want to change the base?

Copilot guided conversion to SCSS Modules #13013

Conversation

andrewscfc commented Jul 25, 2025

Summary

Code changes

Developer Checklist

Testing

Additional Testing Steps

Useful Links

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

andrewscfc Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

andrewscfc Jul 30, 2025 •

edited

Loading