← 输入框|github.com|刷新
Skip to content

fix(vite): apply app.css before the app entry on HMR dev boots - #11522

Merged
NathanWalker merged 1 commit into
mainfrom
fix/vite-hmr-app-css-before-entry
Oct 21, 2026
Merged

NathanWalker merged 1 commit into
mainfrom
fix/vite-hmr-app-css-before-entry

Conversation

@NathanWalker

Copy link
Copy Markdown
Contributor

PR Checklist

What is the current behavior?

On the deterministic dev-session (HMR) boot path, the seeded app.css is only applied after __NS_HMR_BOOT_COMPLETE__ flips: the boot poller in the /__ns_dev__/client bootstrap calls __nsBrowserRuntimeReplaySeededCss(), which lazily installs installHttpCoreCssSupport and 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 _heights on first measure, so with Tailwind p-4 on 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-entry calls addTaggedAdditionalCSS(ast, 'app.css') before app code runs.

What is the new behavior?

The client bootstrap (which session-bootstrap imports before the app entry, and which already imports the /ns/core bridge) statically imports installHttpCoreCssSupport from entry-runtime and calls it at top level. The seeded app.css AST lands in the /ns/core realm 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 / .css module styles register immediately instead of queueing in __NS_PENDING_CSS__ until post-boot; the full client's installCssRegister keeps the existing applier (same tagged remove+add, restyle only after boot).
  • Rule order now matches production: app.css selectors precede component styles in the additional-selector list (previously in HMR, app.css was 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.css edits still hot-apply.

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.
@nx-cloud

nx-cloud Bot commented Oct 12, 2026 •

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit ad5f9f7

Command Status Duration Result
nx test apps-automated -c=android ✅ Succeeded 3m 25s View ↗
nx run-many --target=test --configuration=ci --... ✅ Succeeded <1s View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗


☁️ Nx Cloud last updated this comment at 2026-10-12 22:48:59 UTC

@pkg-pr-new

pkg-pr-new Bot commented Oct 12, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@nativescript/core@11522
npm i https://pkg.pr.new/@nativescript/vite@11522
npm i https://pkg.pr.new/@nativescript/webpack@11522

commit: ad5f9f7

@NathanWalker
NathanWalker merged commit 4742db9 into main Oct 21, 2026
10 checks passed
@NathanWalker
NathanWalker deleted the fix/vite-hmr-app-css-before-entry branch October 21, 2026 18:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant