Skip to content

Add native component style minification#124

Open
wisdman wants to merge 1 commit intovoidzero-dev:mainfrom
wisdman:codex/minify-component-styles
Open

Add native component style minification#124
wisdman wants to merge 1 commit intovoidzero-dev:mainfrom
wisdman:codex/minify-component-styles

Conversation

@wisdman
Copy link

@wisdman wisdman commented Mar 14, 2026

What this changes

This PR adds native Angular component style minification to @oxc-angular/vite / oxc-angular-compiler, so embedded styles: [...] inside generated component definitions can be minified without requiring a consumer-side post-build hook.

Why this is needed

Regular CSS assets can already be minified through Vite, but component styles are compiled by Angular into JavaScript string literals and fall outside of that pipeline. As a result, consumers currently need an extra post-processing step on built mjs output to minify embedded component CSS.

This PR closes that gap in the compiler/plugin itself.

What changed

  • added a minifyComponentStyles option to the API
  • added support for the following behavior in the Vite plugin:
    • true: always minify component styles
    • false: never minify component styles
    • "auto" / undefined: derive the default from the resolved Vite config
  • in "auto" mode, the plugin resolves the default as follows:
    • use build.cssMinify when it is set
    • otherwise fall back to build.minify
    • in dev, minification defaults to false
    • inline Vite build config
    • resolved Vite config
    • rolldown/tsdown output minify options
    • transform-context build config fallback
  • component styles are minified at the final style stage:
    • after Angular style encapsulation
    • before emitting them into styles: [...]
  • both code paths are covered:
    • regular AOT/transform compilation
    • HMR compilation
  • Angular's %COMP% placeholder is preserved during minification so scoped styles continue to work correctly

Why it is implemented this way

I intentionally did not try to solve this only through preprocessCSS, because that is an earlier stage in the pipeline. Semantically, it is more correct to minify the final CSS after Angular style encapsulation, so the minifier runs on the same CSS strings that are actually emitted into styles: [...].

lightningcss was chosen for the actual minification because it is the primary CSS minification path in the current Vite release. That makes this implementation a better fit for the modern Vite stack and keeps component-style minification aligned with the broader CSS pipeline expectations.

At the same time, the default behavior is derived from the resolved Vite config so component styles stay consistent with the rest of the project's CSS minification behavior.

Tests

Added/updated coverage for:

  • core compiler style finalization
  • transformAngularFile
  • HMR path
  • Vite build e2e for minifyComponentStyles: "auto" with:
    • build.minify: true
    • build.minify: false

Verified locally with:

  • focused Rust tests
  • focused Vitest tests
  • build-test

@wisdman wisdman force-pushed the codex/minify-component-styles branch from a509b90 to 04557ed Compare March 15, 2026 00:22
@wisdman wisdman force-pushed the codex/minify-component-styles branch from 04557ed to 718e8a9 Compare March 15, 2026 00:36
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