ENH: tree-shake unused AMP CSS custom properties + trim @font-face to woff2 - #14234
Draft
hotinglok wants to merge 12 commits into
Draft
ENH: tree-shake unused AMP CSS custom properties + trim @font-face to woff2#14234hotinglok wants to merge 12 commits into
hotinglok wants to merge 12 commits into
Conversation
… woff2 [copilot]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Builds on #14229. Further reduces the size of the inline
<style amp-custom>on AMP article pages to keep well under AMP's 75KB CSS limit.The inline AMP CSS is assembled from Emotion critical CSS + the concatenated SCSS-module chunks + the active service theme (
:rootcustom-property blocks +@font-face). Two AMP-only passes are added tooptimiseAmpCssin_document.page.tsx.What
treeshakeCssCustomProperties— removes CSS custom properties from:root {}blocks that are never referenced viavar()in the final CSS. Service themes declare their full palette and font-variant token sets on:root, but a given page references only a fraction. Includes transitive-closure handling so--a: var(--b)keeps--bwhen--ais used.trimFontFaceSourcesToWoff2— trims each@font-facesrclist to its woff2 source (every AMP-capable browser supports woff2), preservinglocal()and leaving a face untouched if it has no woff2 source.Both run only on the AMP article path (
isAmp && pageType === 'article'), so canonical/Lite are unaffected.Measured impact
Against the real
newstheme (latin, 4 font faces, ~6.1KB theme CSS) with the actual transforms:Tree-shake is the dominant lever: components consume theme colours via compile-time SCSS
$variables (literal hex), so the theme's--brand-*/palette custom properties have effectively novar()consumers in the rendered CSS and are safely removed.Safety
style=""references tovar(--…)in the codebase — stylesheets are the only consumer — and AMP runs no custom JS, so the final concatenated CSS string is the single source of truth for what is used.Tests
treeshakeCssCustomProperties/index.test.ts— removal, transitive keep, empty-block removal, non-custom-property preservation, multi-:root/dedup usage.trimFontFaceSourcesToWoff2/index.test.ts— woff fallback removal, multiple legacy formats,local()preservation, no-woff2 untouched, multi-face, no-@font-faceuntouched.All 11 unit tests pass; new files pass Prettier.
Notes
:root/@font-faceare emitted once and component rules are uniquely scoped, so there are no byte-identical top-level duplicates in this architecture.