Repository navigation
fix: Keep values of var() apart, and support env() - #933
Merged
Merged
Conversation
Minifiers leave out spaces after functions, e.g. in `var(--width)192px` or `var(--leading)var(--family)`. Like in browsers, which substitute tokens, the values of variables now stay apart from what's next to them, instead of becoming `640px192px`, which made the `font`, `padding` and `grid-template-columns` of pages invalid. `env()` is resolved like on desktops: the safe area and keyboard insets are 0px, and other variables use their fallbacks. Declarations with it are valid until they're computed, like the ones with `var()`.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
🎉 This PR is included in version 0.60.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This branch was successfully 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
1 participant
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.
Two fixes for values that pages ship, found rendering paco.me with the playground's screenshot page (#932).
var()stay apart from what's next to them. Minifiers leave out spaces after functions, e.g.grid-template-columns: 192px var(--content-width)192pxorfont: 500 var(--text-xs)/var(--leading-s)var(--font-display). Browsers substitute tokens, so the result is still two values, but Satori substituted text, which made640px192px. On paco.me, everyfontdeclaration, the main padding and the grid columns were invalid.env()is supported, like on desktops: the safe area and keyboard insets are0px, and other variables, e.g. the title bar areas of installed apps, use their fallbacks, or make the declaration invalid without one. Declarations with it are valid until they're computed, like the ones withvar(). On paco.me, the page margins usemax(24px, env(safe-area-inset-left)).Both new tests fail without the fix.