@nativescript/vite: native dev drops user virtual CSS imports and serves their CSS raw

Aperta
  • Qualcosa non va?
#11,551 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 3 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
55/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript, vite
Ambito
devtools, frontend

Direzione di ricerca

Start with packages/vite/hmr/helpers/ast-normalizer.ts and trace how virtual module imports are filtered, then inspect the native dev-server handling for /ns/m/@id/__x00__virtual:bamboo.css. Reproduce the normalizer case from the issue and compare its output with /src/main.ts and /ns/m/src/main.ts. Done means the virtual stylesheet import is preserved and its request returns a native CSS registration module; add the described regression coverage alongside ordinary file CSS and CSS HMR.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug css

Native dev drops import 'virtual:bamboo.css', leaving generated component styles unloaded and the app layout broken.

There are two parts to the failure: the import disappears, and requesting the stylesheet directly returns raw CSS instead of a native CSS registration module.

Reproduction and observed behavior

With the app importing virtual:bamboo.css, compare these dev-server responses:

Request Response
/src/main.ts Includes import "/@id/__x00__virtual:bamboo.css";
/ns/m/src/main.ts Bamboo import is missing; ordinary file CSS imports remain
/ns/m/@id/__x00__virtual:bamboo.css HTTP 200 with raw CSS, including generated rules and @layer xplat.reset, xplat.base, xplat.tokens, xplat.utilities;

These were checked against the running server at http://127.0.0.1:5173.

The installed astNormalizeModuleImportsAndHelpers also reproduces the removal independently:

// Input
import "/@id/__x00__virtual:bamboo.css";
export const mounted = true;

// Output
/* [ast-normalized] */
export const mounted = true;

In ast-normalizer.ts, isViteVirtual matches null/__x00__ IDs except the OXC helper exemption, and the import visitor removes them. The same filtering is present on upstream main by source inspection.

Expected behavior

Preserve user virtual stylesheet imports and pass their CSS through native adaptation/registration. Preserving the import alone will not fix the raw-CSS response. Keep filtering specific to unsupported browser helpers.

A regression test should load a plugin-provided virtual stylesheet that sizes a native view, alongside ordinary file CSS and CSS HMR coverage.

Environment and limits
  • @nativescript/vite 8.0.17, with Octane Xplat's canonical dependency patch
  • Vite 8.3.0; @nativescript/core 9.1.3; Android runtime/CLI 9.1.1
  • Octane Xplat 0.15.0 (e3545c95); Bamboo 1.56.2; macOS; pnpm

Verified in Android HTTP dev and with the installed normalizer. A clean unpatched NativeScript app and iOS HTTP dev have not been tested. No workaround has been applied.

Supporting layout measurements

Android's last laid-out hierarchy had a roughly 698 dp wide bottom bar (declared maximum 353 dp) at the top, with SVGs around 233×82 dp (declared 31×36 and 54×54 dp).

These came from 72 native views via adb shell dumpsys activity <app-id>, at 520 dpi (3.25 px/dp). The activity was backgrounded/stopped, and component mapping was inferred from tree structure/source order. The HTTP responses and normalizer reproduction above are the primary evidence.

A bundled Debug build on iPhone 18 Pro / iOS 27 has the expected 31×36 and 54×54 pt icon sizes. This is a different platform and serving mode; it does not establish that the HTTP-dev failure is Android-specific. Measurements used native bounds without screenshots or text/input values.

Related: #11472 concerns ordinary workspace CSS and __vite__updateStyle; #11461 concerns core cascade layers. Here, the stylesheet fails to reach native registration first.

Lingua principale
TypeScript
Stelle
25.7k
Fork
1.7k
Merge medio
4g 14h
PR unite (30g)
53

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di NativeScript/NativeScript

Tutte le issue di NativeScript/NativeScript

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.