Repository navigation
fix(vite): apply app.css before the app entry on HMR dev boots - #11522
Merged
Merged
Conversation
The dev-session client bootstrap only applied the seeded app.css after boot completed, then restyled the mounted tree. Views that cache measurements on first layout kept their unstyled sizes; on iOS a ListView's rows stayed at their unpadded heights until a refresh. Install the HTTP-core-realm CSS applier from the client bootstrap, which the session imports before the app entry, so app.css is in place before the first page is built, matching non-HMR builds.
|
View your CI Pipeline Execution ↗ for commit ad5f9f7
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗ ☁️ Nx Cloud last updated this comment at |
commit: |
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.
PR Checklist
What is the current behavior?
On the deterministic dev-session (HMR) boot path, the seeded
app.cssis only applied after__NS_HMR_BOOT_COMPLETE__flips: the boot poller in the/__ns_dev__/clientbootstrap calls__nsBrowserRuntimeReplaySeededCss(), which lazily installsinstallHttpCoreCssSupportand then restyles the mounted roots.So the first page is built and laid out with no app CSS, then restyled. Anything that caches measurements on first layout keeps the unstyled sizes. The visible case is an iOS
ListView: cell heights are cached in_heightson first measure, so with Tailwindp-4on the row label the rows stay at their unpadded height (61px vs 161px measured) even though color/font/padding are applied to the labels afterwards. Pages navigated to after boot look fine, which makes it look like only the first page is "unstyled".Non-HMR builds don't have this problem:
helpers/main-entrycallsaddTaggedAdditionalCSS(ast, 'app.css')before app code runs.What is the new behavior?
The client bootstrap (which
session-bootstrapimports before the app entry, and which already imports the/ns/corebridge) statically importsinstallHttpCoreCssSupportfromentry-runtimeand calls it at top level. The seededapp.cssAST lands in the/ns/corerealm before the first page is built, matching non-HMR builds.__NS_HMR_HTTP_APP_CSS_APPLIED__is set, so the existing post-boot replay becomes a no-op but stays as a fallback if the early install can't find a CSS API.__NS_HMR_APPLY_CSS__/__NS_REGISTER_CSS__are now installed before the entry too. Component /.cssmodule styles register immediately instead of queueing in__NS_PENDING_CSS__until post-boot; the full client'sinstallCssRegisterkeeps the existing applier (same tagged remove+add, restyle only after boot).app.cssselectors precede component styles in the additional-selector list (previously in HMR,app.csswas appended after styles registered during boot).Verified on an Angular + Tailwind app (iOS simulator): first-page ListView rows render with correct padding on cold boot, and live
app.cssedits still hot-apply.