Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NathanWalker merged 1 commit into from
Oct 21, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions packages/vite/hmr/entry-runtime.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,8 +192,7 @@ export function installHttpCoreCssSupport(coreModule: any, verbose?: boolean): H

g.__NS_HMR_APPLY_CSS__ = applyCss;

// Device CSS applier for the fallback HTTP-bootloader path (the native
// dev-session path installs the same one from `hmr/client`). Per-tag
// Device CSS applier for `.css` modules and component styles. Per-tag
// remove+add keeps each source independently replaceable on hot-update.
const registerCss = (tag: string, cssText: string) => {
if (typeof cssText !== 'string' || !cssText.length) {
Expand Down Expand Up @@ -260,10 +259,9 @@ export function installHttpCoreCssSupport(coreModule: any, verbose?: boolean): H

if (cssApplied) {
g.__NS_HMR_HTTP_APP_CSS_APPLIED__ = true;
// On the http-bootloader path this install runs BEFORE the app
// mounts, so no refresh is needed. On the dev-session path the
// bootstrap installs this lazily AFTER boot completes — views
// are already mounted with stale (empty) styling, so re-style.
// Normally installed before the app mounts, so no refresh is
// needed. A late install finds views already mounted with
// stale (empty) styling, so re-style.
if (g.__NS_HMR_BOOT_COMPLETE__) {
refreshRootViews();
}
Expand Down
13 changes: 13 additions & 0 deletions packages/vite/hmr/server/vite-plugin-path.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,4 +223,17 @@ describe('createNsDevClientBootstrapCode', () => {
// So must an entry import failure observed by the boot poller.
expect(code).toContain('else if (globalThis.__NS_ENTRY_ERROR__)');
});

it('installs seeded app.css in the /ns/core realm before the app entry evaluates', () => {
const code = createNsDevClientBootstrapCode({
wsUrl: 'ws://127.0.0.1:5173/__ns_dev__/ws',
origin: 'http://127.0.0.1:5173',
clientImport: '/ns/m/node_modules/@nativescript/vite/hmr/client/index.js',
});
expect(code).toContain('import { installHttpCoreCssSupport as __nsBrowserRuntimeInstallHttpCoreCssSupport } from "http://127.0.0.1:5173/ns/m/node_modules/@nativescript/vite/hmr/entry-runtime.js";');
const installAt = code.indexOf('__nsBrowserRuntimeInstallHttpCoreCssSupport(__nsBrowserRuntimeCoreBridge, false);');
expect(installAt).toBeGreaterThan(-1);
// Top-level, ahead of the boot-complete poller that replays it lazily.
expect(installAt).toBeLessThan(code.indexOf('if (!globalThis.__NS_HMR_BROWSER_RUNTIME_CLIENT_ACTIVE__)'));
});
});
11 changes: 11 additions & 0 deletions packages/vite/hmr/server/vite-plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,17 @@ import { vendorManifest as __nsBrowserRuntimeVendorManifest, __nsVendorModuleMap
import { installNsHotRegistry as __nsBrowserRuntimeInstallHotRegistry } from ${JSON.stringify(resolvedHotContextImport)};
import { installLaunchNotificationBridge as __nsBrowserRuntimeInstallLaunchBridge } from ${JSON.stringify(launchBridgeUrl)};
import * as __nsBrowserRuntimeCoreBridge from ${JSON.stringify(coreBridgeUrl)};
import { installHttpCoreCssSupport as __nsBrowserRuntimeInstallHttpCoreCssSupport } from ${JSON.stringify(entryRuntimeUrl)};

// Seeded app.css must land in the /ns/core realm before the app entry
// evaluates, as it does in non-HMR builds. Views mounted unstyled are
// restyled later, but anything that caches measurements on first layout
// (iOS ListView row heights) keeps the unstyled sizes.
try {
__nsBrowserRuntimeInstallHttpCoreCssSupport(__nsBrowserRuntimeCoreBridge, ${options.verbose ? 'true' : 'false'});
} catch (cssErr) {
console.warn('[ns-browser-runtime-client] pre-entry app.css install failed', cssErr);
}

// Launch-notification bridge — must precede the app entry (this wrapper is
// imported by the session bootstrap BEFORE the entry graph). Passing the
Expand Down
Loading