Fix opacity modifier using CSS variables #14916
Merged
Conversation
This file contains 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
When using an opacity modifier such as `bg-black/[var(--opacity)]`, then
this was translated to:
```css
.bg-black\/\[var\(--opacity\)\] {
background-color: color-mix( in oklch, var(--color-black, #000) calc(var(--opacity) * 100%), transparent);
}
```
The issue is that this part: `calc(var(--opacity) * 100%)` is invalid
_if_ the `var(--opacity)` already contains a percentage value. See: https://play.tailwindcss.com/xz0tv5rbFF
This is because this eventually resolves to `calc(20% * 100%)` and `20%
* 100%` is invalid in CSS.
In Catalyst we use variables like that _with_ the `%` included, which
means that v4 doesn't work as expected when using this.
A variable with a `%` included is probably the better value to support
compared to the the unit less one. This also allows you to define your
variables using `@property` as a proper `<percentage>` type.
Unfortunately the `var(--opacity)` is a value that can change at
runtime, so we don't know the type at compile time.
In the future we might be able to use `first-valid(…)` (see: https://drafts.csswg.org/css-values-5/#first-valid)
and generate both versions at the same time.
adamwathan
reviewed
Nov 8, 2024
adamwathan
approved these changes
Nov 8, 2024
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.
When using an opacity modifier such as
bg-black/[var(--opacity)], then this was translated to:The issue is that this part:
calc(var(--opacity) * 100%)is invalid if thevar(--opacity)already contains a percentage value. See: https://play.tailwindcss.com/xz0tThis is because this eventually resolves to
calc(20% * 100%)and20% 100%is invalid in CSS.In Catalyst we use variables like that with the
%included, which means that v4 doesn't work as expected when using this.A variable with a
%included is probably the better value to support compared to the the unit less one. This also allows you to define your variables using@propertyas a proper<percentage>type.Unfortunately the
var(--opacity)is a value that can change at runtime, so we don't know the type at compile time.In the future we might be able to use
first-valid(…)(see: https://drafts.csswg.org/css-values-5/#f and generate both versions at the same time.