From c6e339d33173d085e7ac0076e94687a65732f8e3 Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Tue, 25 Aug 2026 12:08:22 +0800
Subject: [PATCH 1/3] fix(vite): clear a component's styles when it loses its
 last one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A component that lost its last style kept the old CSS applied until a
full reload. The generated HMR module opens with `...ClassName.ɵcmp`, so
every key it does not emit keeps its previous value — and `styles` was
omitted for every "no styles" answer.

`styles` is now three-valued, end to end:

  non-empty  these are the component's styles
  []         it definitively has none — emit `styles: []` and clear
  null       unknown — omit the key, whatever it has survives

Four places collapsed the first two into one value. `index.ts:734` turned
an empty result into null before the call; `lib.rs:555` merged `None` and
`Some([])` with `unwrap_or_default`; `lib.rs:561`/`:577` mapped an empty
list back to `None`; and `update_module.rs:182` guarded the emit a second
time. Fixing only the generator changes nothing, because nothing ever
handed it a `Some([])`.

`null` was also overloaded in the plugin. Clearing on an unreadable
decorator would wipe live CSS, so the distinction that matters is whether
the answer is KNOWN, not whether it is empty. `readStyles` now reports a
failed read instead of swallowing it in a `catch`: a stylesheet read
successfully but holding nothing is definitively styleless and clears,
while one that could not be read at all stays unknown and is left alone.
An editor's atomic write leaves exactly that window. The file-level
fallback branch keeps its old semantics and can never clear.

Verified against the pinned Angular v22.0.0: `ɵɵreplaceMetadata` →
`recreateLView` → `destroyLView` → `sharedStylesHost.removeStyles`, which
is ref-counted per CSS string. Today the removed and re-added strings are
identical, so the count dips and returns and the `<style>` element never
leaves; with `styles: []` nothing is re-added, the count reaches zero and
`element.remove()` runs.

Tests cover both directions: the three clearing transitions, and the two
that must NOT clear (an unreadable stylesheet, an unreadable style
field). One existing assertion changed deliberately —
`hmr-hot-update.test.ts` asserted `not.toContain('styles:')` for a class
declaring none, which encoded the old behavior; it now asserts the
explicit empty array, keeping its original intent. A Playwright spec
proves the user-visible effect: the border reverts and no `full-reload`
crosses the wire.

Closes #457

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01665HouXD8imyMphWe1k7Dx
---
 .../src/hmr/update_module.rs                  |  28 ++-
 .../e2e/tests/hmr-style-removal.spec.ts       |  79 +++++++
 napi/angular-compiler/index.d.ts              |   9 +-
 napi/angular-compiler/src/lib.rs              |  59 +++--
 .../test/hmr-hot-update.test.ts               | 210 +++++++++++++++++-
 napi/angular-compiler/vite-plugin/index.ts    |  57 ++++-
 6 files changed, 404 insertions(+), 38 deletions(-)
 create mode 100644 napi/angular-compiler/e2e/tests/hmr-style-removal.spec.ts

diff --git a/crates/oxc_angular_compiler/src/hmr/update_module.rs b/crates/oxc_angular_compiler/src/hmr/update_module.rs
index c69cf77fa..1032e821d 100644
--- a/crates/oxc_angular_compiler/src/hmr/update_module.rs
+++ b/crates/oxc_angular_compiler/src/hmr/update_module.rs
@@ -177,9 +177,16 @@ fn generate_hmr_update_module_internal(
         output.push_str(",\n");
     }
 
-    // Add styles if present
+    // Add styles whenever the caller has an answer — an EMPTY list included.
+    // The definition above spreads `...ClassName.ɵcmp`, so every key this
+    // module does not emit keeps its previous value. A component that lost its
+    // last stylesheet therefore needs an explicit `styles: []` to clear it;
+    // omitting the key would leave the old CSS applied until a full reload.
+    // `None` stays omitted: that is "the caller does not know", not "empty".
     if let Some(styles) = styles {
-        if !styles.is_empty() {
+        if styles.is_empty() {
+            output.push_str("    styles: [],\n");
+        } else {
             output.push_str("    styles: [\n");
             for style in styles {
                 output.push_str("      ");
@@ -233,6 +240,23 @@ mod tests {
         assert!(!result.contains("styles:"));
     }
 
+    #[test]
+    fn test_generate_hmr_update_module_empty_styles_clears() {
+        // An EMPTY list is a definitive answer, not silence. The module opens
+        // with `...ClassName.ɵcmp`, so a key it does not emit keeps its old
+        // value — omitting `styles` here would leave the component's last
+        // stylesheet applied until a full reload.
+        let result = generate_hmr_update_module_from_js(
+            "src/app/app.component.ts@AppComponent",
+            "function AppComponent_Template(rf, ctx) { }",
+            Some(&[]),
+            None,
+            None,
+        );
+
+        assert!(result.contains("styles: [],"));
+    }
+
     #[test]
     fn test_class_name_extraction() {
         let result = generate_hmr_update_module_from_js(
diff --git a/napi/angular-compiler/e2e/tests/hmr-style-removal.spec.ts b/napi/angular-compiler/e2e/tests/hmr-style-removal.spec.ts
new file mode 100644
index 000000000..ba654f79b
--- /dev/null
+++ b/napi/angular-compiler/e2e/tests/hmr-style-removal.spec.ts
@@ -0,0 +1,79 @@
+import { test, expect } from '../fixtures/test-fixture.js'
+
+/**
+ * Regression test for https://github.com/voidzero-dev/oxc-angular-compiler/issues/457
+ *
+ * Losing the LAST style is the one style change HMR used to get wrong. The
+ * generated update module opens with `...ClassName.ɵcmp`, so every property it
+ * does not emit keeps its previous value — and the `styles` property was
+ * omitted for every "no styles" answer. The component updated, the old CSS
+ * stayed applied, and only a full reload cleared it.
+ *
+ * The unit tests assert the module now carries an explicit `styles: []`. This
+ * one asserts the thing a user actually sees: the CSS is gone from the page,
+ * and the page did not reload to get there.
+ */
+test.describe('Removing a component last style', () => {
+  test('emptying inline `styles` drops the CSS with no full reload', async ({
+    page,
+    fileModifier,
+    hmrDetector,
+    waitForHmr,
+  }) => {
+    // Must run before `goto` — Vite's client opens its socket during load,
+    // and the wire is the only honest evidence about a reload request.
+    await hmrDetector.captureWirePayloads()
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    // The previous spec's teardown restores the file it edited, and that
+    // write can still be in flight when this page connects — its `full-reload`
+    // would otherwise land in this test's recording and in its DOM. Let the
+    // stray settle first, then start measuring.
+    await waitForHmr()
+    const payloadsBeforeEdit = (await hmrDetector.getWirePayloads()).length
+    const sentinelId = await hmrDetector.addSentinel()
+
+    const card = page.locator('app-inline-card .inline-card')
+    await expect(card).toBeVisible()
+
+    // The fixture's inline styles put a dashed border on the card and make
+    // the host a block. Both come from the component's own `styles`.
+    const beforeBorder = await card.evaluate((el) => getComputedStyle(el).borderStyle)
+    expect(beforeBorder).toBe('dashed')
+    const beforeHostDisplay = await page
+      .locator('app-inline-card')
+      .evaluate((el) => getComputedStyle(el).display)
+    expect(beforeHostDisplay).toBe('block')
+
+    // Drop the last (and only) inline style. `styles: []` is the transition
+    // the issue names: a component that HAD a style and now has none.
+    await fileModifier.modifyFile('inline-card.component.ts', (content) => {
+      const emptied = content.replace(/styles: \[[\s\S]*?\n {2}\],/, 'styles: [],')
+      if (emptied === content) {
+        throw new Error('failed to empty the inline `styles` array in the fixture')
+      }
+      return emptied
+    })
+    await waitForHmr()
+
+    // The component is still mounted — this is an update, not a teardown.
+    await expect(page.locator('app-inline-card h2')).toHaveText('INLINE_TITLE')
+
+    // The CSS is gone: the border reverts to the UA default, and the host
+    // stops being a block. Before the fix these kept their old values.
+    const afterBorder = await card.evaluate((el) => getComputedStyle(el).borderStyle)
+    expect(afterBorder).toBe('none')
+    const afterHostDisplay = await page
+      .locator('app-inline-card')
+      .evaluate((el) => getComputedStyle(el).display)
+    expect(afterHostDisplay).toBe('inline')
+
+    // And no full reload got us there. The sentinel proves the browser did
+    // not act on one; the wire proves the server never asked for one.
+    expect(await hmrDetector.sentinelExists(sentinelId)).toBe(true)
+    const payloads = (await hmrDetector.getWirePayloads()).slice(payloadsBeforeEdit)
+    expect(payloads.map((p) => p.event)).toContain('angular:component-update')
+    expect(payloads.map((p) => p.type)).not.toContain('full-reload')
+  })
+})
diff --git a/napi/angular-compiler/index.d.ts b/napi/angular-compiler/index.d.ts
index 97a18ff1f..bf0d4976b 100644
--- a/napi/angular-compiler/index.d.ts
+++ b/napi/angular-compiler/index.d.ts
@@ -77,7 +77,11 @@ export declare function compileForHmr(
  * * `template` - The template HTML string
  * * `component_name` - The name of the component class
  * * `file_path` - The path to the component file
- * * `styles` - Optional array of CSS styles
+ * * `styles` - The component's CSS styles, or `None` when the caller cannot
+ *   tell. `Some` is a definitive answer — an EMPTY array means "this component
+ *   has no styles" and makes the generated module emit `styles: []`, clearing
+ *   whatever it had. `None` omits the key, so the module's `...ɵcmp` spread
+ *   keeps the previous styles.
  *
  * # Returns
  *
@@ -447,7 +451,8 @@ export interface FactoryNapiCompileResult {
  *
  * * `component_id` - The component ID (path@ClassName)
  * * `template_js` - The compiled template function as JavaScript
- * * `styles` - Optional array of CSS styles
+ * * `styles` - The component's CSS styles, or `None` when unknown. An empty
+ *   array is definitive and emits `styles: []`, clearing the old styles.
  *
  * # Returns
  *
diff --git a/napi/angular-compiler/src/lib.rs b/napi/angular-compiler/src/lib.rs
index 8404f96e4..5d1f2d901 100644
--- a/napi/angular-compiler/src/lib.rs
+++ b/napi/angular-compiler/src/lib.rs
@@ -472,7 +472,8 @@ pub fn compile_template(
 ///
 /// * `component_id` - The component ID (path@ClassName)
 /// * `template_js` - The compiled template function as JavaScript
-/// * `styles` - Optional array of CSS styles
+/// * `styles` - The component's CSS styles, or `None` when unknown. An empty
+///   array is definitive and emits `styles: []`, clearing the old styles.
 ///
 /// # Returns
 ///
@@ -522,7 +523,11 @@ pub fn generate_style_module(component_id: String, styles: Vec<String>) -> Strin
 /// * `template` - The template HTML string
 /// * `component_name` - The name of the component class
 /// * `file_path` - The path to the component file
-/// * `styles` - Optional array of CSS styles
+/// * `styles` - The component's CSS styles, or `None` when the caller cannot
+///   tell. `Some` is a definitive answer — an EMPTY array means "this component
+///   has no styles" and makes the generated module emit `styles: []`, clearing
+///   whatever it had. `None` omits the key, so the module's `...ɵcmp` spread
+///   keeps the previous styles.
 ///
 /// # Returns
 ///
@@ -551,31 +556,43 @@ pub fn compile_for_hmr_sync(
                 Some(output.declarations_js.as_str())
             };
 
+            // The caller's `Option` carries whether it KNOWS the answer, and
+            // that has to survive to the generated module: `Some` (even
+            // `Some([])`) is definitive, so the module emits `styles: [...]`
+            // and clears whatever the component had; `None` is "unknown", so
+            // the module omits the key and the spread keeps the old value.
+            // Collapsing an empty-but-definitive answer to `None` here is what
+            // left a component's last stylesheet applied after HMR.
+            let caller_is_definitive = styles.is_some();
+
             // Merge external styles with styles extracted from template <style> tags
             let mut all_styles: Vec<String> = styles.unwrap_or_default();
             all_styles.extend(output.styles);
 
             // Apply style encapsulation for ViewEncapsulation.Emulated
             // Angular uses %COMP% as a placeholder that the runtime replaces with the component ID
-            let encapsulated_styles: Option<Vec<String>> = if all_styles.is_empty() {
-                None
-            } else {
-                let styles: Vec<String> = all_styles
-                    .iter()
-                    .map(|style| {
-                        oxc_angular_compiler::styles::finalize_component_style(
-                            style,
-                            true,
-                            "_ngcontent-%COMP%",
-                            "_nghost-%COMP%",
-                            opts.minify_component_styles,
-                        )
-                    })
-                    .filter(|style| !style.trim().is_empty())
-                    .collect();
-
-                if styles.is_empty() { None } else { Some(styles) }
-            };
+            let encapsulated: Vec<String> = all_styles
+                .iter()
+                .map(|style| {
+                    oxc_angular_compiler::styles::finalize_component_style(
+                        style,
+                        true,
+                        "_ngcontent-%COMP%",
+                        "_nghost-%COMP%",
+                        opts.minify_component_styles,
+                    )
+                })
+                .filter(|style| !style.trim().is_empty())
+                .collect();
+
+            // Emit the array when it is an answer: the caller was definitive,
+            // or the template's own <style> tags produced content.
+            let encapsulated_styles: Option<Vec<String>> =
+                if caller_is_definitive || !encapsulated.is_empty() {
+                    Some(encapsulated)
+                } else {
+                    None
+                };
 
             // Generate HMR module with declarations, encapsulated styles, and consts
             let hmr_module = generate_hmr_update_module_from_js(
diff --git a/napi/angular-compiler/test/hmr-hot-update.test.ts b/napi/angular-compiler/test/hmr-hot-update.test.ts
index b95808c2b..8d8bf7284 100644
--- a/napi/angular-compiler/test/hmr-hot-update.test.ts
+++ b/napi/angular-compiler/test/hmr-hot-update.test.ts
@@ -1671,7 +1671,12 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     )
     expect(body).not.toBe('')
     expect(body).not.toContain('PS_BARE_SIBLING_MARKER')
-    expect(body).not.toContain('styles:')
+    // Served an explicitly EMPTY array, not silence. Omitting the key would
+    // also keep the sibling's CSS off this class, but only because the module
+    // spreads `...\u0275cmp` and leaves whatever was there — which is the
+    // #457 bug: a class that declares nothing must be able to CLEAR styles it
+    // used to have, not merely avoid gaining new ones.
+    expect(body).toContain('styles: []')
   })
 
   it('serves both inline styles and styleUrls when a class declares both', async () => {
@@ -1898,6 +1903,8 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     )
     expect(body).not.toBe('')
     expect(body).not.toContain('PS_EMPTYURLS_SIB_MARKER')
+    // Definitive and empty: the module clears the class's styles outright.
+    expect(body).toContain('styles: []')
   })
 
   it('serves no styles for an explicitly empty inline `styles` array', async () => {
@@ -1940,6 +1947,8 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     )
     expect(body).not.toBe('')
     expect(body).not.toContain('PS_EMPTYINLINE_SIB_MARKER')
+    // Definitive and empty: the module clears the class's styles outright.
+    expect(body).toContain('styles: []')
   })
 
   it('falls back when a `styleUrls` array mixes a constant with a literal', async () => {
@@ -2399,4 +2408,203 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     // tracked in #456, asserted the same way as the singular-constant case
     // above. The defect fixed here is the own stylesheet going MISSING.
   })
+
+  // ----------------------------------------------------------------
+  // Issue #457 — a component that LOSES its last style must be cleared
+  // ----------------------------------------------------------------
+  // The HMR module opens with `...ClassName.\u0275cmp`, so any property it
+  // does not emit keeps its previous value. Omitting `styles` therefore
+  // leaves the old CSS applied until a full reload. An empty answer has to
+  // travel all the way to an explicit `styles: []`.
+  //
+  // The counterweight is that a FAILED read is not an empty one: an editor's
+  // atomic write leaves a window where the stylesheet is missing, and
+  // reporting the component styleless there would wipe live CSS. Those cases
+  // must still omit the key.
+
+  it('clears an inline `styles` array that lost its last entry', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const inlineDropPath = join(appDir, 'ps457-inline-drop.component.ts')
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-inline-drop',
+        template: '<p>drop</p>',
+        styles: ['.PS457_INLINE_MARKER { color: red; }'],
+      })
+      export class InlineDropComponent {}
+    `
+    writeFileSync(inlineDropPath, source)
+    await transformSource(plugin, source, inlineDropPath)
+
+    // The last inline style is removed. `styles: []` is a definitive answer.
+    const edited = source.replace(`['.PS457_INLINE_MARKER { color: red; }']`, '[]')
+    writeFileSync(inlineDropPath, edited)
+    const ctx = createMockHmrContext(inlineDropPath, [{ id: inlineDropPath }], mockServer)
+    await callHandleHotUpdate(plugin, ctx)
+
+    expectDispatched(mockServer, `${inlineDropPath}@InlineDropComponent`)
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${inlineDropPath}@InlineDropComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).not.toContain('PS457_INLINE_MARKER')
+    expect(body).toContain('styles: []')
+  })
+
+  it('clears the styles of a class whose only stylesheet became empty', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const emptyCssPath = join(appDir, 'ps457-empty.component.css')
+    const emptyPath = join(appDir, 'ps457-empty.component.ts')
+    writeFileSync(emptyCssPath, '.PS457_EMPTY_MARKER { color: red; }')
+
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-empty',
+        template: '<p>empty</p>',
+        styleUrls: ['./ps457-empty.component.css'],
+      })
+      export class EmptyCssComponent {}
+    `
+    writeFileSync(emptyPath, source)
+    await transformSource(plugin, source, emptyPath)
+
+    // Read successfully, holds nothing: definitively styleless.
+    writeFileSync(emptyCssPath, '')
+    const ctx = createMockHmrContext(
+      normalizePath(emptyCssPath),
+      [{ id: normalizePath(emptyCssPath) }],
+      mockServer,
+    )
+    await callHandleHotUpdate(plugin, ctx)
+
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${emptyPath}@EmptyCssComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).not.toContain('PS457_EMPTY_MARKER')
+    expect(body).toContain('styles: []')
+  })
+
+  it('clears the styles of a class whose only stylesheet became whitespace', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const wsCssPath = join(appDir, 'ps457-ws.component.css')
+    const wsPath = join(appDir, 'ps457-ws.component.ts')
+    writeFileSync(wsCssPath, '.PS457_WS_MARKER { color: red; }')
+
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-ws',
+        template: '<p>ws</p>',
+        styleUrls: ['./ps457-ws.component.css'],
+      })
+      export class WhitespaceCssComponent {}
+    `
+    writeFileSync(wsPath, source)
+    await transformSource(plugin, source, wsPath)
+
+    // Angular drops whitespace-only styles (`style.trim().length > 0`), so a
+    // file holding only blank lines is styleless too, not "unknown".
+    writeFileSync(wsCssPath, '\n   \n\t\n')
+    const ctx = createMockHmrContext(
+      normalizePath(wsCssPath),
+      [{ id: normalizePath(wsCssPath) }],
+      mockServer,
+    )
+    await callHandleHotUpdate(plugin, ctx)
+
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${wsPath}@WhitespaceCssComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).not.toContain('PS457_WS_MARKER')
+    expect(body).toContain('styles: []')
+  })
+
+  it('keeps the styles of a class whose stylesheet cannot be read', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const goneCssPath = join(appDir, 'ps457-gone.component.css')
+    const gonePath = join(appDir, 'ps457-gone.component.ts')
+    writeFileSync(goneCssPath, '.PS457_GONE_MARKER { color: red; }')
+
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-gone',
+        template: '<p>gone</p>',
+        styleUrls: ['./ps457-gone.component.css'],
+      })
+      export class GoneCssComponent {}
+    `
+    writeFileSync(gonePath, source)
+    await transformSource(plugin, source, gonePath)
+
+    // The file is unreadable, which is what the truncate window of an atomic
+    // write looks like. A read failure is not evidence of stylelessness, so
+    // the module must say nothing about `styles` and leave the live CSS on.
+    rmSync(goneCssPath, { force: true })
+    const ctx = createMockHmrContext(
+      normalizePath(goneCssPath),
+      [{ id: normalizePath(goneCssPath) }],
+      mockServer,
+    )
+    await callHandleHotUpdate(plugin, ctx)
+
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${gonePath}@GoneCssComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).not.toContain('styles:')
+  })
+
+  it('keeps the styles of a class whose style field cannot be read', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const constPath = join(appDir, 'ps457-const.component.ts')
+    // `styles: PS457_STYLES` holds no string literal, so the text scan reports
+    // the field unreadable — the class's styles are UNKNOWN, not absent. There
+    // is no file-level `styleUrls` to fall back to either. Clearing here would
+    // wipe the CSS the Rust extractor folded out of the constant.
+    const source = `
+      import { Component } from '@angular/core';
+      const PS457_STYLES = ['.PS457_CONST_MARKER { color: red; }'];
+      @Component({
+        selector: 'app-ps457-const',
+        template: '<p>one</p>',
+        styles: PS457_STYLES,
+      })
+      export class ConstStylesComponent {}
+    `
+    writeFileSync(constPath, source)
+    await transformSource(plugin, source, constPath)
+
+    const edited = source.replace('<p>one</p>', '<p>two</p>')
+    writeFileSync(constPath, edited)
+    const ctx = createMockHmrContext(constPath, [{ id: constPath }], mockServer)
+    await callHandleHotUpdate(plugin, ctx)
+
+    expectDispatched(mockServer, `${constPath}@ConstStylesComponent`)
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${constPath}@ConstStylesComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).toContain('two')
+    expect(body).not.toContain('styles:')
+  })
 })
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index 3ae01fc69..1a4da5b09 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -697,8 +697,20 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                 // of a class that has no external ones. Fall back to the
                 // file-level list only when the class's own styles cannot be
                 // read (preserves the old behavior there).
-                const readStyles = async (urls: string[]): Promise<string[] | null> => {
-                  const styleContents: string[] = []
+                //
+                // A read FAILURE is not evidence of stylelessness, so it has
+                // to stay distinguishable from a successful read of an empty
+                // file: `complete` is false as soon as one stylesheet could
+                // not be read, and the caller downgrades the whole answer to
+                // "unknown" rather than reporting the component styleless and
+                // wiping its live CSS (an editor's atomic write leaves exactly
+                // such a window). A file read successfully but holding nothing
+                // contributes an empty string, which IS a definitive answer.
+                const readStyles = async (
+                  urls: string[],
+                ): Promise<{ contents: string[]; complete: boolean }> => {
+                  const contents: string[] = []
+                  let complete = true
                   for (const styleUrl of urls) {
                     const stylePath = resolve(dir, styleUrl)
                     try {
@@ -711,13 +723,23 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                         )
                         styleContent = processed.code
                       }
-                      styleContents.push(styleContent)
+                      contents.push(styleContent)
                     } catch {
-                      // Style file not found, continue without this style
+                      // Missing, unreadable, or failed to preprocess — what
+                      // this stylesheet holds is unknown, not empty.
+                      complete = false
                     }
                   }
-                  return styleContents.length > 0 ? styleContents : null
+                  return { contents, complete }
                 }
+                // Three-valued, and every value reaches `compileForHmrSync`
+                // verbatim: a non-empty array is the component's styles, `[]`
+                // says it definitively has none (the HMR module emits
+                // `styles: []` and the runtime drops the old CSS), and `null`
+                // says the answer is unknown so the module omits the key and
+                // whatever the component already has survives. `null` is the
+                // default because "we did not find out" is the honest starting
+                // point.
                 let styles: string[] | null = null
                 const classStyles = extractClassStylesFor(source, className)
                 if (classStyles !== null) {
@@ -727,17 +749,28 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                   // decorator's own `styles`. Whitespace-only entries are
                   // dropped to match Angular's `style.trim().length > 0`.
                   const external =
-                    classStyles.urls.length > 0 ? ((await readStyles(classStyles.urls)) ?? []) : []
-                  const merged = [...classStyles.inline, ...external].filter(
-                    (style) => style.trim().length > 0,
-                  )
-                  styles = merged.length > 0 ? merged : null
+                    classStyles.urls.length > 0
+                      ? await readStyles(classStyles.urls)
+                      : { contents: [] as string[], complete: true }
+                  // Definitive only when the class's own decorator was read
+                  // (`classStyles !== null`) AND every stylesheet it names was
+                  // read too. An empty result then means the component really
+                  // has no styles and must be cleared — including the case
+                  // where its one stylesheet is now empty or whitespace.
+                  if (external.complete) {
+                    styles = [...classStyles.inline, ...external.contents].filter(
+                      (style) => style.trim().length > 0,
+                    )
+                  }
                 } else if (styleUrls.length > 0) {
                   // The class's own styles could not be read — a decorator
                   // shape this text scan cannot parse, e.g. a styleUrl built
                   // from a constant the Rust extractor folds. Fall back to the
-                  // file-level list, preserving the old behavior there.
-                  styles = await readStyles(styleUrls)
+                  // file-level list, preserving the old behavior there. This
+                  // branch never clears: the decorator is unknown, so an empty
+                  // read here means "no answer", not "no styles".
+                  const fallback = await readStyles(styleUrls)
+                  styles = fallback.contents.length > 0 ? fallback.contents : null
                 }
 
                 const result = compileForHmrSync(templateContent, className, resolvedId, styles, {

From 38812d051da9572b429668d17fe1d0c9e1b9a66d Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Tue, 25 Aug 2026 12:18:04 +0800
Subject: [PATCH 2/3] fix(vite): keep the file-level fallback from clearing a
 component's styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The fallback branch runs when the class's OWN decorator could not be read,
and it falls back to the file-level union — which can belong to a sibling.
Its comment already promised it never clears. The code stopped keeping
that promise once this PR made any non-null array definitive.

A stylesheet that reads fine but holds nothing yields `['']`. That is one
entry, so `contents.length > 0` passed it on; the binding then dropped the
whitespace-only entry and emitted `styles: []`, wiping CSS from a
decorator nobody on this path could read — `styles: STYLE_CONST`, say,
which the Rust extractor folds and the text scan cannot see. Measured:
`['']` and `['  ']` both produced `styles: []`, while `null` omitted the
key. Before this PR the same input was omitted, so the regression is
this PR's.

The whitespace filter now runs BEFORE the null check here, unlike the
class-level branch above where an empty result is a real answer.

A partial read on this branch still presents the successfully-read subset
as the whole style set. That is unchanged from main — the old `readStyles`
swallowed failures in a `catch` and returned whatever it got — and belongs
to the file-level fallback contamination tracked in #456, not here.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01665HouXD8imyMphWe1k7Dx
---
 .../test/hmr-hot-update.test.ts               | 93 +++++++++++++++++++
 napi/angular-compiler/vite-plugin/index.ts    | 13 ++-
 2 files changed, 105 insertions(+), 1 deletion(-)

diff --git a/napi/angular-compiler/test/hmr-hot-update.test.ts b/napi/angular-compiler/test/hmr-hot-update.test.ts
index 8d8bf7284..aeedd0969 100644
--- a/napi/angular-compiler/test/hmr-hot-update.test.ts
+++ b/napi/angular-compiler/test/hmr-hot-update.test.ts
@@ -2607,4 +2607,97 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     expect(body).toContain('two')
     expect(body).not.toContain('styles:')
   })
+  it('keeps the styles of a class with an unreadable style field when the file-level stylesheet is empty', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const fbEmptyCssPath = join(appDir, 'ps457-fb-empty.component.css')
+    const fbEmptyPath = join(appDir, 'ps457-fb-empty.component.ts')
+    // Empty, but read SUCCESSFULLY — it contributes an empty string, which is
+    // the exact shape the class-level branch treats as a definitive clear.
+    writeFileSync(fbEmptyCssPath, '')
+
+    // Two classes. `FbEmptyOwnerComponent` declares `styles: PS457_FB_STYLES`,
+    // which the text scan cannot read, so the endpoint falls back to the
+    // FILE-LEVEL `styleUrls` union — and that union holds only the SIBLING's
+    // stylesheet. The fallback knows nothing about this class's decorator, so
+    // an empty read there is "no answer", never "no styles"; clearing on it
+    // would wipe the CSS the Rust extractor folded out of the constant.
+    const source = `
+      import { Component } from '@angular/core';
+      const PS457_FB_STYLES = ['.PS457_FB_MARKER { color: red; }'];
+      @Component({
+        selector: 'app-ps457-fb-empty',
+        template: '<p>one</p>',
+        styles: PS457_FB_STYLES,
+      })
+      export class FbEmptyOwnerComponent {}
+      @Component({
+        selector: 'app-ps457-fb-empty-sib',
+        template: '<p>sib</p>',
+        styleUrls: ['./ps457-fb-empty.component.css'],
+      })
+      export class FbEmptySiblingComponent {}
+    `
+    writeFileSync(fbEmptyPath, source)
+    await transformSource(plugin, source, fbEmptyPath)
+
+    const edited = source.replace('<p>one</p>', '<p>two</p>')
+    writeFileSync(fbEmptyPath, edited)
+    const ctx = createMockHmrContext(fbEmptyPath, [{ id: fbEmptyPath }], mockServer)
+    await callHandleHotUpdate(plugin, ctx)
+
+    expectDispatched(mockServer, `${fbEmptyPath}@FbEmptyOwnerComponent`)
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${fbEmptyPath}@FbEmptyOwnerComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).toContain('two')
+    expect(body).not.toContain('styles:')
+  })
+
+  it('keeps the styles of a class with an unreadable style field when the file-level stylesheet is whitespace', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const fbWsCssPath = join(appDir, 'ps457-fb-ws.component.css')
+    const fbWsPath = join(appDir, 'ps457-fb-ws.component.ts')
+    // Whitespace-only reads back as a whitespace-only string, which the
+    // binding drops just like an empty one — same trap, one step later.
+    writeFileSync(fbWsCssPath, '\n   \n\t\n')
+
+    const source = `
+      import { Component } from '@angular/core';
+      const PS457_FB_WS_STYLES = ['.PS457_FB_WS_MARKER { color: red; }'];
+      @Component({
+        selector: 'app-ps457-fb-ws',
+        template: '<p>one</p>',
+        styles: PS457_FB_WS_STYLES,
+      })
+      export class FbWsOwnerComponent {}
+      @Component({
+        selector: 'app-ps457-fb-ws-sib',
+        template: '<p>sib</p>',
+        styleUrls: ['./ps457-fb-ws.component.css'],
+      })
+      export class FbWsSiblingComponent {}
+    `
+    writeFileSync(fbWsPath, source)
+    await transformSource(plugin, source, fbWsPath)
+
+    const edited = source.replace('<p>one</p>', '<p>two</p>')
+    writeFileSync(fbWsPath, edited)
+    const ctx = createMockHmrContext(fbWsPath, [{ id: fbWsPath }], mockServer)
+    await callHandleHotUpdate(plugin, ctx)
+
+    expectDispatched(mockServer, `${fbWsPath}@FbWsOwnerComponent`)
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${fbWsPath}@FbWsOwnerComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).toContain('two')
+    expect(body).not.toContain('styles:')
+  })
 })
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index 1a4da5b09..47a91ea09 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -769,8 +769,19 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                   // file-level list, preserving the old behavior there. This
                   // branch never clears: the decorator is unknown, so an empty
                   // read here means "no answer", not "no styles".
+                  //
+                  // Which is why the whitespace-only filter has to run BEFORE
+                  // the null check, not after the call like the branch above.
+                  // A stylesheet that reads fine but holds nothing yields
+                  // `['']` — one entry, so a bare `length > 0` would pass it
+                  // on, and the binding, which treats any non-null array as
+                  // definitive and drops whitespace-only entries, would turn
+                  // it into `styles: []` and clear. That is the opposite of
+                  // what this branch promises, and the CSS it would wipe
+                  // belongs to a decorator nobody here could read.
                   const fallback = await readStyles(styleUrls)
-                  styles = fallback.contents.length > 0 ? fallback.contents : null
+                  const usable = fallback.contents.filter((style) => style.trim().length > 0)
+                  styles = usable.length > 0 ? usable : null
                 }
 
                 const result = compileForHmrSync(templateContent, className, resolvedId, styles, {

From 8ae92a155bca199e66e75b3d490af3fda99791ac Mon Sep 17 00:00:00 2001
From: LongYinan <lynweklm@gmail.com>
Date: Tue, 25 Aug 2026 12:28:46 +0800
Subject: [PATCH 3/3] fix(vite): deliver a partial style read instead of
 dropping it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A component with two external stylesheets, one of them permanently
unreadable, stopped receiving style updates entirely. Editing the HEALTHY
stylesheet dispatched HMR, but `external.complete` was false, so `styles`
stayed null and the module omitted the key. The edit was lost, and the
pending slot is consumed either way, so nothing retried it.

`complete` guards exactly ONE thing: turning an unknown answer into a
definitive `[]` that wipes live CSS. It is not a reason to throw away
content that WAS read. main always delivered the partial read — the old
`readStyles` swallowed failures in a `catch` and returned whatever it
got — and this PR broke that.

  complete                 -> merged, may be [], may clear   (new)
  incomplete, merged non-[] -> merged                        (= main)
  incomplete, merged == []  -> null, key omitted             (= main)

Verified by transcribing both revisions' formulas and sweeping all 105
combinations of inline shape against read outcomes: 21 differ from main,
and all 21 are the intended "complete read, empty result -> styles: []".
Zero other differences.

The fallback branch below is unchanged and already correct. It ignores
`complete` and applies the same never-clear rule, because a successful
read of the file-level union still says nothing definitive about a class
whose own decorator could not be read.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01665HouXD8imyMphWe1k7Dx
---
 .../test/hmr-hot-update.test.ts               | 134 ++++++++++++++++++
 napi/angular-compiler/vite-plugin/index.ts    |  28 ++--
 2 files changed, 152 insertions(+), 10 deletions(-)

diff --git a/napi/angular-compiler/test/hmr-hot-update.test.ts b/napi/angular-compiler/test/hmr-hot-update.test.ts
index aeedd0969..d8e85d444 100644
--- a/napi/angular-compiler/test/hmr-hot-update.test.ts
+++ b/napi/angular-compiler/test/hmr-hot-update.test.ts
@@ -2700,4 +2700,138 @@ describe('@ng/component endpoint resolves the styles per class', () => {
     expect(body).toContain('two')
     expect(body).not.toContain('styles:')
   })
+
+  // A read that FAILED on one stylesheet but succeeded on another is not the
+  // same as a read that found nothing. The `complete` flag exists to stop an
+  // unknown answer from becoming a definitive `styles: []` and wiping live
+  // CSS — it must not also throw away content that WAS read. A permanently
+  // unreadable stylesheet (missing, a permission error, a preprocessor
+  // failure) would otherwise make every edit to its healthy sibling a no-op,
+  // and the pending slot is consumed either way, so nothing retries.
+
+  it('serves the readable stylesheet of a class whose other stylesheet is missing', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const partialOkCssPath = join(appDir, 'ps457-partial-ok.component.css')
+    const partialGoneCssPath = join(appDir, 'ps457-partial-gone.component.css')
+    const partialPath = join(appDir, 'ps457-partial.component.ts')
+    writeFileSync(partialOkCssPath, '.PS457_PARTIAL_MARKER { color: red; }')
+    // Never written: this one is unreadable on every attempt, so the read is
+    // permanently incomplete and there is nothing a retry could recover.
+    rmSync(partialGoneCssPath, { force: true })
+
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-partial',
+        template: '<p>partial</p>',
+        styleUrls: [
+          './ps457-partial-ok.component.css',
+          './ps457-partial-gone.component.css',
+        ],
+      })
+      export class PartialCssComponent {}
+    `
+    writeFileSync(partialPath, source)
+    await transformSource(plugin, source, partialPath)
+
+    // The user edits the HEALTHY stylesheet. A partial answer that still holds
+    // content is an UPDATE, which is what main did; only the empty one has to
+    // stay unknown.
+    writeFileSync(partialOkCssPath, '.PS457_PARTIAL_MARKER { color: green; }')
+    const ctx = createMockHmrContext(
+      normalizePath(partialOkCssPath),
+      [{ id: normalizePath(partialOkCssPath) }],
+      mockServer,
+    )
+    await callHandleHotUpdate(plugin, ctx)
+
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${partialPath}@PartialCssComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).toContain('PS457_PARTIAL_MARKER')
+    expect(body).toContain('green')
+    // Delivering a partial read must never be confused with clearing.
+    expect(body).not.toContain('styles: []')
+  })
+
+  it('serves the inline styles of a class whose styleUrl is missing', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const inlineKeptCssPath = join(appDir, 'ps457-inline-kept.component.css')
+    const inlineKeptPath = join(appDir, 'ps457-inline-kept.component.ts')
+    rmSync(inlineKeptCssPath, { force: true })
+
+    // The external stylesheet is unreadable, but the inline `styles` entry was
+    // read straight out of the decorator and is not in doubt.
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-inline-kept',
+        template: '<p>one</p>',
+        styles: ['.PS457_INLINE_KEPT_MARKER { color: red; }'],
+        styleUrls: ['./ps457-inline-kept.component.css'],
+      })
+      export class InlineKeptComponent {}
+    `
+    writeFileSync(inlineKeptPath, source)
+    await transformSource(plugin, source, inlineKeptPath)
+
+    const edited = source.replace('<p>one</p>', '<p>two</p>')
+    writeFileSync(inlineKeptPath, edited)
+    const ctx = createMockHmrContext(inlineKeptPath, [{ id: inlineKeptPath }], mockServer)
+    await callHandleHotUpdate(plugin, ctx)
+
+    expectDispatched(mockServer, `${inlineKeptPath}@InlineKeptComponent`)
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${inlineKeptPath}@InlineKeptComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).toContain('two')
+    expect(body).toContain('PS457_INLINE_KEPT_MARKER')
+    expect(body).not.toContain('styles: []')
+  })
+
+  it('still omits `styles` when the incomplete read produced nothing at all', async () => {
+    const plugin = getAngularPlugin()
+    const mockServer = await setupPluginWithRealConfig(plugin)
+
+    const onlyGoneCssPath = join(appDir, 'ps457-only-gone.component.css')
+    const onlyGonePath = join(appDir, 'ps457-only-gone.component.ts')
+    rmSync(onlyGoneCssPath, { force: true })
+
+    // The guard on the other side of the same branch: an incomplete read that
+    // yields NO content stays unknown. `[]` here would clear the CSS the
+    // missing stylesheet used to supply.
+    const source = `
+      import { Component } from '@angular/core';
+      @Component({
+        selector: 'app-ps457-only-gone',
+        template: '<p>one</p>',
+        styleUrls: ['./ps457-only-gone.component.css'],
+      })
+      export class OnlyGoneComponent {}
+    `
+    writeFileSync(onlyGonePath, source)
+    await transformSource(plugin, source, onlyGonePath)
+
+    const edited = source.replace('<p>one</p>', '<p>two</p>')
+    writeFileSync(onlyGonePath, edited)
+    const ctx = createMockHmrContext(onlyGonePath, [{ id: onlyGonePath }], mockServer)
+    await callHandleHotUpdate(plugin, ctx)
+
+    expectDispatched(mockServer, `${onlyGonePath}@OnlyGoneComponent`)
+    const body = await invokeAngularMiddleware(
+      getMiddleware(mockServer),
+      `${onlyGonePath}@OnlyGoneComponent`,
+    )
+    expect(body).not.toBe('')
+    expect(body).toContain('two')
+    expect(body).not.toContain('styles:')
+  })
 })
diff --git a/napi/angular-compiler/vite-plugin/index.ts b/napi/angular-compiler/vite-plugin/index.ts
index 47a91ea09..5cf474b21 100644
--- a/napi/angular-compiler/vite-plugin/index.ts
+++ b/napi/angular-compiler/vite-plugin/index.ts
@@ -752,16 +752,24 @@ export function angular(options: PluginOptions = {}): Plugin[] {
                     classStyles.urls.length > 0
                       ? await readStyles(classStyles.urls)
                       : { contents: [] as string[], complete: true }
-                  // Definitive only when the class's own decorator was read
-                  // (`classStyles !== null`) AND every stylesheet it names was
-                  // read too. An empty result then means the component really
-                  // has no styles and must be cleared — including the case
-                  // where its one stylesheet is now empty or whitespace.
-                  if (external.complete) {
-                    styles = [...classStyles.inline, ...external.contents].filter(
-                      (style) => style.trim().length > 0,
-                    )
-                  }
+                  const merged = [...classStyles.inline, ...external.contents].filter(
+                    (style) => style.trim().length > 0,
+                  )
+                  // `complete` guards exactly ONE thing: turning an unknown
+                  // answer into a definitive `[]` that wipes live CSS. It is
+                  // not a reason to throw away content that WAS read. A
+                  // stylesheet that failed while a sibling succeeded is a
+                  // PARTIAL update — which is what main always delivered,
+                  // because the old `readStyles` swallowed failures in a
+                  // `catch` and returned whatever it got. Dropping it would
+                  // silently lose every edit to the healthy sibling of a
+                  // permanently unreadable stylesheet, and the pending slot is
+                  // consumed either way, so nothing retries.
+                  //
+                  // So: a complete read is definitive and may clear; an
+                  // incomplete one falls back to main's rule exactly — send
+                  // what was read when it is non-empty, and never send `[]`.
+                  styles = external.complete || merged.length > 0 ? merged : null
                 } else if (styleUrls.length > 0) {
                   // The class's own styles could not be read — a decorator
                   // shape this text scan cannot parse, e.g. a styleUrl built