Repository navigation
feat(core): evaluate @supports conditions instead of dropping their rules - #11592
Draft
edusperoni wants to merge 1 commit into
Draft
edusperoni wants to merge 1 commit into
edusperoni wants to merge 1 commit into
Conversation
…ules @supports blocks were parsed but never reached the cascade, so their rules were silently lost. Conditions are now evaluated when the stylesheet is built: - (property: value) passes when core knows the property and its value converter accepts the value, so (color: color-mix(...)) is true and (display: grid) is false. var() and calc() values pass. - selector(...) passes when core parses the selector. - not / and / or and nested parentheses follow css-conditional-3; unknown tests and functions evaluate to false (and can be negated), and a malformed condition drops the block. Both log a Trace warning. Supported blocks are flattened in place, so their rules keep their source position and override an earlier fallback by order.
|
View your CI Pipeline Execution ↗ for commit 1d26c38
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗ ☁️ Nx Cloud last updated this comment at |
commit: |
This branch has not been deployed
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?
Both CSS parsers (css-tree, and rework / webpack's css2json) emit
@supportsblocks, but_populateRulesonly handles@media,@keyframesand plain rules, so every rule inside an@supportsblock is silently dropped. A common progressive-enhancement pattern does nothing:What is the new behavior?
@supportsconditions are evaluated when the stylesheet is built (ui/styling/css-supports.ts):(property: value)passes when core knows the property and that property's own value converter accepts the value.(color: color-mix(...))is true becauseColorparsescolor-mix(), while(display: grid)is false.var()/calc()values, CSS-wide keywords and custom properties pass, matching browsers.selector(...)passes when core's selector parser accepts it.not/and/orand nested parentheses follow css-conditional-3. Mixingand/orwithout parentheses, or any other malformed condition, drops the block.font-tech(), etc.) evaluate to false. That keeps them negatable, so@supports not (display: grid)applies. Unknown or invalid conditions log aTracewarning in theStylecategory.A supported block is flattened into the surrounding rule list, so its rules keep their source position and override an earlier fallback by order, inside
@mediatoo.@keyframesinside@supportswork.To support the declaration test,
properties/index.tsnow records eachCssPropertyvalue converter by CSS name, updated byoverrideHandlers, and exposes_isCssDeclarationSupported. Shorthands andCssAnimationPropertyuse their existing converters.Notes:
NaNcounts as unsupported.