Add native component style minification#124
Open
wisdman wants to merge 1 commit intovoidzero-dev:mainfrom
Open
Add native component style minification#124wisdman wants to merge 1 commit intovoidzero-dev:mainfrom
wisdman wants to merge 1 commit intovoidzero-dev:mainfrom
Conversation
a509b90 to
04557ed
Compare
04557ed to
718e8a9
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this changes
This PR adds native Angular component style minification to
@oxc-angular/vite/oxc-angular-compiler, so embeddedstyles: [...]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
mjsoutput to minify embedded component CSS.This PR closes that gap in the compiler/plugin itself.
What changed
minifyComponentStylesoption to the APItrue: always minify component stylesfalse: never minify component styles"auto"/undefined: derive the default from the resolved Vite config"auto"mode, the plugin resolves the default as follows:build.cssMinifywhen it is setbuild.minifyfalsestyles: [...]%COMP%placeholder is preserved during minification so scoped styles continue to work correctlyWhy 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 intostyles: [...].lightningcsswas 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:
transformAngularFileminifyComponentStyles: "auto"with:build.minify: truebuild.minify: falseVerified locally with:
build-test