Repository navigation
fix(vite): keep the rules after @layer, @container and other at-rules css can't parse - #11538
Merged
Merged
Conversation
… css can't parse The build turns app.css and the bundled component css into an AST with `css` (reworkcss), which reads an at-rule it doesn't know as the start of a selector and gives up there. One `@layer`, `@container`, `@starting-style` or `@property` was enough to lose every rule after it. Bootstrap 6 wraps its whole stylesheet in `@layer`s and Tailwind 4 emits `@layer` and `@property`, so apps lost almost all of their styles in non-HMR builds and on the first HMR load. The stylesheet is now rewritten before it is parsed. `@layer` blocks are replaced by their rules: top-level layers move ahead of the unlayered rules in layer order (first mention, including `@layer a, b;`), as the cascade orders them, and layers inside another at-rule are unwrapped in place. Every other at-rule `css` doesn't know is removed with its block; core only reads rules, `@media`, `@keyframes` and `@import`, so nothing it uses is lost. Stylesheets without such at-rules are passed through unchanged.
|
View your CI Pipeline Execution ↗ for commit 09ea542
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗ ☁️ Nx Cloud last updated this comment at |
commit: |
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.
PR Checklist
What is the current behavior?
@nativescript/viteparses CSS with reworkcsscss, which reads an at-rule it doesn't know as the start of a selector. The first@layer,@container,@starting-style,@propertyor@scopeends the parse, and every rule after it is lost (@propertyinstead parses as a junk rule). Bootstrap 6 wraps its whole stylesheet in@layers and Tailwind 4 emits@layerand@property, so only the rules before the first one (78 of Bootstrap's 4,430) reach the app.What is the new behavior?
normalizeCssAtRules()(helpers/css-ast.ts) rewrites the stylesheet beforeparseCssAstparses it, on both the app.css and the bundled-CSS paths:@layerblocks are replaced with their rules. Top-level layers move ahead of the unlayered rules in layer order (first mention, including@layer a, b;), which is how the cascade orders them. A layer inside another at-rule is unwrapped where it is.csscan't parse is dropped with its block, at any depth. Core only reads rules,@media,@keyframesand@import, so nothing it uses is lost.A live HMR edit of app.css is sent to core as text and parsed on the device by css-tree, which does not stop at unknown at-rules but ignores
layernodes; flattening them there is a possible follow-up in core.Tests: 10 cases in
helpers/css-ast.spec.ts.Each new test fails without the change. The
@nativescript/vitesuite (163 files) andtsc -p tsconfig.lib.jsonpass on the branch.