CSS Modules - Support AMP and Lite rendering by andrewscfc · Pull Request #13992 · bbc/simorgh

andrewscfc · 2026-05-07T16:09:12Z

Resolves JIRA: N/A

Summary

This PR addresses @HarveyPeachey 's observation around how our other rendering strategies work with the new css modules approach:

Wonder how this affects our rendering strategies like lite site as well

The approach is explained in the docs accompanying this change: ws-nextjs-app/docs/amp-lite-css-extraction.md

Also with regards to @amoore108 's suggestion:

Also worth testing with JS disabled to see how it behaves with just the server-render.

CSS with JS disabled does work with JS disabled for the production build on canonical but not for the dev build; this is a limitation of next's dev server implementation that I didn't feel it was necessary to workaround.

Useful Links

Co-authored-by: Copilot <copilot@github.com>

…ite-css

Co-authored-by: Copilot <copilot@github.com>

…opilot] Co-authored-by: Copilot <copilot@github.com>

Co-authored-by: Copilot <copilot@github.com>

Copilot

Pull request overview

Adds an AMP/Lite CSS inlining mechanism for the Next.js app so that CSS Modules styles are available during SSR (where external stylesheets can’t be used), covering both dev and production flows.

Changes:

Introduces getAmpLiteCss to inline CSS for AMP/Lite by reading from Next manifests in production and a dev-only extracted CSS file in development.
Adds a dev-only webpack loader (DevCssExtractLoader) to extract css-loader output to build/dev-css-modules.css, and injects it via next.config.js.
Wires AMP/Lite render paths in _document.page.tsx to append extracted CSS, plus adds supporting tests, docs, and log codes.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
ws-nextjs-app/utilities/getAmpLiteCss/index.ts	Implements AMP/Lite CSS resolution and inlining (dev + prod) using manifests / extracted file.
ws-nextjs-app/utilities/getAmpLiteCss/index.test.ts	Unit tests for the AMP/Lite CSS resolution, manifest parsing, and error handling.
ws-nextjs-app/scripts/DevCssExtractLoader.cjs	Custom dev-only webpack loader to extract hashed CSS Modules CSS from css-loader output.
ws-nextjs-app/scripts/DevCssExtractLoader.test.ts	Unit tests validating loader extraction behavior and disk writes.
ws-nextjs-app/pages/_document.page.tsx	Appends extracted CSS to AMP and Lite render branches using `__NEXT_DATA__`.
ws-nextjs-app/next.config.js	Injects the dev CSS extraction loader before css-loader in dev builds.
ws-nextjs-app/docs/amp-lite-css-extraction.md	Documents rationale and approach for AMP/Lite CSS extraction in dev and prod.
src/app/lib/logger.const.js	Adds new log codes for manifest/CSS extraction read errors.

…ocumentation [copilot]

…ism for SSR [copilot]

Copilot

Pull request overview

Copilot reviewed 15 out of 15 changed files in this pull request and generated 1 comment.

…lot] Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 15 out of 15 changed files in this pull request and generated 3 comments.

…logging [copilot]

…/simorgh into andrew-scss-modules_fix-amp-lite-css

Copilot

Pull request overview

Copilot reviewed 15 out of 15 changed files in this pull request and generated 1 comment.

… across environments and update documentation for clarity [copilot]

Copilot

Pull request overview

Copilot reviewed 17 out of 17 changed files in this pull request and generated 2 comments.

…ortCss [copilot]

Copilot

Pull request overview

Copilot reviewed 17 out of 17 changed files in this pull request and generated 1 comment.

elvinasv

Clever solution!

Probably this was discussed already, but given the complexity of handling Lite/AMP dev server/HMR and the associated maintenance, could we skip dev server support for AMP/Lite and just use a production build (i.e. yarn build:local)? Would simplify this quite a bit.

elvinasv · 2026-05-29T11:32:49Z

+  dynamicIds: Array<string | number>;
+}): string => {
+  const isProd = process.env.NODE_ENV === 'production';
+  const devCssPath = join(process.cwd(), 'build/dev-css-modules.css');


Minor: potentially we could read the file name from a shared constant?

simorgh/ws-nextjs-app/scripts/DevCssExtractLoader.cjs

Line 4 in f37192d

const OUTPUT_FILE = 'build/dev-css-modules.css';

andrewscfc · 2026-06-02T07:09:04Z

Clever solution!

Probably this was discussed already, but given the complexity of handling Lite/AMP dev server/HMR and the associated maintenance, could we skip dev server support for AMP/Lite and just use a production build (i.e. yarn build:local)? Would simplify this quite a bit.

Funnily enough, this was my initial conclusion, I've obviously done a big experiment with AI in this PR as I couldn't have done the dev server in a reasonable time without it.

Now although it seems to work, do you think it's worth pulling out now due to the long term maintenance?

elvinasv

Personally I’m fine with not using HMR for AMP/Lite, but it might be worth consulting engineers who work with more the Lite site.

fix css on amp + lite with claude sonnet/codex [copilot]

13b1389

Co-authored-by: Copilot <copilot@github.com>

andrewscfc changed the base branch from latest to andrew-scss-modules May 7, 2026 16:11

HarveyPeachey reviewed May 8, 2026

View reviewed changes

Comment thread ws-nextjs-app/pages/_document.page.tsx Outdated

andrewscfc and others added 19 commits May 8, 2026 11:53

add explicit script for amp and lite work [copilot]

5044aff

Co-authored-by: Copilot <copilot@github.com>

yarn dev works outside from root only [copilot]

79f0210

Co-authored-by: Copilot <copilot@github.com>

fix to include all css on first dev render [copilot]

33df6dc

Co-authored-by: Copilot <copilot@github.com>

next iteration of amp/lite css [copilot]

b480a12

Co-authored-by: Copilot <copilot@github.com>

remove uneccessary cache [copilot]

06eccdb

Co-authored-by: Copilot <copilot@github.com>

simplify css decoding + cleanup resource extraction [copilot]

71a92d1

Co-authored-by: Copilot <copilot@github.com>

alter plugin to use documented webpack methods [copilot]

e9ba798

Co-authored-by: Copilot <copilot@github.com>

simplify dev css extraction with loader rather than plugin [copilot]

f37192d

Co-authored-by: Copilot <copilot@github.com>

remove dev-amp-lite script as now redundant

726a1b4

small readability refactor [copilot]

b3e1407

Co-authored-by: Copilot <copilot@github.com>

isolate dynamicId processing to amp and lite renders only [copilot]

0b401c0

Co-authored-by: Copilot <copilot@github.com>

working, document prod + dev lite + amp css [copilot]

ea084d9

Co-authored-by: Copilot <copilot@github.com>

Merge branch 'andrew-scss-modules' into andrew-scss-modules_fix-amp-l…

e26f924

…ite-css

Merge branch 'andrew-scss-modules' into andrew-scss-modules_fix-amp-l…

5da6608

…ite-css

extract and add unit tests to inline css processing [copilot]

d6b4c9b

Co-authored-by: Copilot <copilot@github.com>

add error logging to getDynamicImportCss [copilot]

a804656

Co-authored-by: Copilot <copilot@github.com>

change exports to make clearer the public interface [copilot]

3de72b9

Co-authored-by: Copilot <copilot@github.com>

add dynamic_import_css_read_error logging and update related tests [c…

b217333

…opilot] Co-authored-by: Copilot <copilot@github.com>

add tests for DevCssExtractLoader [copilot]

73bd7df

Co-authored-by: Copilot <copilot@github.com>

andrewscfc added the Copilot label May 22, 2026

reintroduce article condition for amp renderer

8ed4d74

andrewscfc marked this pull request as ready for review May 22, 2026 08:57

Copilot AI review requested due to automatic review settings May 22, 2026 08:57

Copilot started reviewing on behalf of andrewscfc May 22, 2026 08:57 View session

Copilot AI reviewed May 22, 2026

View reviewed changes

Comment thread ws-nextjs-app/utilities/getAmpLiteCss/index.ts

Comment thread ws-nextjs-app/utilities/getAmpLiteCss/index.ts

Comment thread ws-nextjs-app/utilities/getAmpLiteCss/index.ts Outdated

andrewscfc changed the title ~~Andrew scss modules fix amp lite css~~ CSS Modules - Support AMP and Lite rendering May 22, 2026

shayneahchoon approved these changes May 22, 2026

View reviewed changes

andrewscfc added 2 commits May 28, 2026 09:32

Clarify AMP CSS extraction logic to specify article-only support in d…

540ab11

…ocumentation [copilot]

Enhance documentation on CSS chunk file resolution and caching mechan…

d492e9a

…ism for SSR [copilot]

andrewscfc requested a review from Copilot May 28, 2026 08:35

Copilot started reviewing on behalf of andrewscfc May 28, 2026 08:35 View session

Copilot AI reviewed May 28, 2026

View reviewed changes

Comment thread ws-nextjs-app/docs/amp-lite-css-extraction.md Outdated

Change doc to match version of next used at the time of writing [copi…

75c6586

…lot] Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

andrewscfc requested a review from Copilot May 28, 2026 08:49

Copilot started reviewing on behalf of andrewscfc May 28, 2026 08:49 View session

Copilot AI reviewed May 28, 2026

View reviewed changes

Comment thread ws-nextjs-app/utilities/getAmpLiteCss/index.ts

Comment thread ws-nextjs-app/utilities/getAmpLiteCss/index.ts Outdated

Comment thread ws-nextjs-app/utilities/getAmpLiteCss/index.ts

andrewscfc added 2 commits May 28, 2026 10:02

Refactor readCssFiles to accept logCode parameter for improved error …

5d86c8b

…logging [copilot]

Merge branch 'andrew-scss-modules_fix-amp-lite-css' of github.com:bbc…

e996402

…/simorgh into andrew-scss-modules_fix-amp-lite-css

andrewscfc requested a review from Copilot May 28, 2026 09:04

Copilot started reviewing on behalf of andrewscfc May 28, 2026 09:04 View session

Copilot AI reviewed May 28, 2026

View reviewed changes

Comment thread ws-nextjs-app/utilities/getAmpLiteCss/index.ts

Refactor build scripts to ensure static files are copied consistently…

5e01d9a

… across environments and update documentation for clarity [copilot]

andrewscfc requested a review from a team as a code owner May 28, 2026 09:53

andrewscfc requested a review from Copilot May 28, 2026 09:56

Copilot started reviewing on behalf of andrewscfc May 28, 2026 09:56 View session

Copilot AI reviewed May 28, 2026

View reviewed changes

Comment thread ws-nextjs-app/utilities/getAmpLiteCss/index.ts

Comment thread ws-nextjs-app/utilities/getAmpLiteCss/index.ts Outdated

Add logging for missing react-loadable-manifest.json in getDynamicImp…

427256f

…ortCss [copilot]

andrewscfc requested a review from Copilot May 28, 2026 10:18

Copilot started reviewing on behalf of andrewscfc May 28, 2026 10:18 View session

Copilot AI reviewed May 28, 2026

View reviewed changes

Comment thread ws-nextjs-app/utilities/getAmpLiteCss/index.ts

shayneahchoon approved these changes May 29, 2026

View reviewed changes

elvinasv approved these changes May 29, 2026

View reviewed changes

elvinasv reviewed Jun 2, 2026

View reviewed changes

Add cautionary note to docs on inline CSS docs

11ad97a

andrewscfc merged commit 53ded42 into andrew-scss-modules Jun 3, 2026
10 of 11 checks passed

andrewscfc deleted the andrew-scss-modules_fix-amp-lite-css branch June 3, 2026 15:24

Conversation

andrewscfc commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Useful Links

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

elvinasv left a comment

Choose a reason for hiding this comment

Uh oh!

elvinasv May 29, 2026

Choose a reason for hiding this comment

Uh oh!

andrewscfc commented Jun 2, 2026

Uh oh!

elvinasv left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

andrewscfc commented May 7, 2026 •

edited

Loading