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

Aberta
  • Algo errado?
#11,551 2 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 3 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
55/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
typescript, vite
Domínio
devtools, frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
TypeScript
Estrelas
25.7k
Forks
1.7k
Merge médio
4d 14h
PRs com merge (30d)
53

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de NativeScript/NativeScript

Todas as issues de NativeScript/NativeScript

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.