perf(@angular/ssr): pre-compile critical CSS plans at build time - #33992
Merged
Conversation
angular-robot
Bot
added
area: build & ci
alan-agius4
force-pushed
the
css-inline-rework
branch
5 times, most recently
from
September 2, 2026 14:54
31f8133 to
4eb1d31
Compare
alan-agius4
added
the
target: minor
alan-agius4
force-pushed
the
css-inline-rework
branch
4 times, most recently
from
September 3, 2026 14:41
5c6aa18 to
bf1c206
Compare
Previously, critical CSS inlining in `@angular/ssr` was executed dynamically at runtime by parsing HTML and stylesheets on each request (or caching processed HTML in an in-memory LRU cache keyed by SHA-256 content hashes). This incurred significant CPU and latency overhead during request processing and precluded efficient stream processing. This commit updates the critical CSS workflow to pre-compile stylesheet plans during the build step via Beasties' compiler (`compileSheet` and `encodePlan`). These compact plans are stored in the server application manifest (`criticalCssPlans`) along with any CSP nonce. At runtime, `AngularServerApp` initializes Beasties' runtime processor with the pre-compiled plans, allowing fast single-pass string and stream processing without re-parsing stylesheets, calculating content hashes, or maintaining a runtime LRU cache. Consequently, `InlineCriticalCssProcessor`, `LRUCache`, and `crypto.ts` utility classes have been removed from `@angular/ssr`.
alan-agius4
force-pushed
the
css-inline-rework
branch
from
September 3, 2026 14:54
bf1c206 to
9b3a98b
Compare
alan-agius4
requested review from
clydin and
dgp1130
and removed request for
dgp1130
September 3, 2026 15:16
alan-agius4
added
the
action: review
alan-agius4
marked this pull request as ready for review
September 3, 2026 15:16
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request replaces the internal bundled version of the beasties library with the official npm package dependency, removing custom implementations of the critical CSS processor and LRU cache in favor of beasties/runtime. It also introduces build-time pre-compilation of critical CSS plans and nonce extraction into the server application manifest. The review feedback highlights a high-severity issue where an error during CSS inlining could abort streaming responses mid-flight, a bug in the regex used for extracting unquoted nonces, and an opportunity to simplify a dynamic import now that the module resolution is set to bundler.
clydin
approved these changes
Sep 3, 2026
alan-agius4
added
action: merge
Collaborator
Author
|
This PR was merged into the repository. The changes were merged into the following branches:
|
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
2 participants
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.
Pre-compiles stylesheet critical CSS plans during build time and embeds them into the server application manifest instead of performing full CSS and HTML parsing dynamically at runtime on every SSR request.
Changes
@angular/build, uses Beasties compiler (compileSheetandencodePlan) to pre-compile stylesheet plans and embedscriticalCssPlansand any templatenonceinto the server application manifest.@angular/ssr, initializes Beasties runtime processor withcriticalCssPlans, enabling fast, single-pass critical CSS inlining for response handling and streaming without runtime LRU cache and SHA-256 hashing.@angular/ssrinternalInlineCriticalCssProcessor,LRUCache, andcrypto.tsutilities, as well as the bundled third-party Beasties distribution in favor of the upstream package.setAngularAppTestingManifestto accept stylesheet CSS records and compile plans internally.Depends on #34014.