From 4cb4a0d988daf4cce954e18df40cfa93eae98e9f Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 8 Nov 2024 13:38:30 +0100 Subject: [PATCH 1/4] =?UTF-8?q?remove=20`calc(=E2=80=A6=20*=20100%)`=20wra?= =?UTF-8?q?pper?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 `` 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. --- packages/tailwindcss/src/utilities.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index f57c4cccec9d..37b2f8cf6280 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -112,13 +112,6 @@ export function withAlpha(value: string, alpha: string): string { alpha = `${alphaAsNumber * 100}%` } - // If the alpha value is a percentage, we can pass it directly to - // `color-mix()`. In any other case, e.g.: `var(…)`, `round(…)`, … we need to - // make sure it's a percentage. - else if (alpha[alpha.length - 1] !== '%') { - alpha = `calc(${alpha} * 100%)` - } - return `color-mix(in oklch, ${value} ${alpha}, transparent)` } From ac31d5b34d7718b551b8698c8cec93e095c7f7b1 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 8 Nov 2024 13:46:13 +0100 Subject: [PATCH 2/4] update tests --- packages/tailwindcss/src/compat/plugin-api.test.ts | 2 +- packages/tailwindcss/src/css-functions.test.ts | 4 ++-- packages/tailwindcss/src/utilities.test.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index d200e22b42dc..73745e837412 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -291,7 +291,7 @@ describe('theme', async () => { color: color-mix(in oklch, #ef4444 50%, transparent); } .variable { - color: color-mix(in oklch, #ef4444 calc(var(--opacity) * 100%), transparent); + color: color-mix(in oklch, #ef4444 var(--opacity), transparent); } :root { --color-red-500: #ef4444; diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 26443abcb81e..e55a573a9532 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -215,7 +215,7 @@ describe('theme function', () => { } .red { - color: color-mix(in oklch, red calc(var(--opacity) * 100%), transparent); + color: color-mix(in oklch, red var(--opacity), transparent); }" `) }) @@ -237,7 +237,7 @@ describe('theme function', () => { } .red { - color: color-mix(in oklch, red calc(var(--opacity, 50%) * 100%), transparent); + color: color-mix(in oklch, red var(--opacity, 50%), transparent); }" `) }) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 5af59338f096..19139585e6b1 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -9969,7 +9969,7 @@ test('bg', async () => { } .bg-current\\/\\[var\\(--bg-opacity\\)\\] { - background-color: color-mix(in oklch, currentColor calc(var(--bg-opacity) * 100%), transparent); + background-color: color-mix(in oklch, currentColor var(--bg-opacity), transparent); } .bg-inherit { From 8aad59fde15d17032cf6be3619ea15491f60283f Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 8 Nov 2024 13:47:38 +0100 Subject: [PATCH 3/4] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b7a97d63d85e..0fb688ebe2c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Rebase `url()` inside imported CSS files when using Vite ([#14877](https://github.com/tailwindlabs/tailwindcss/pull/14877)) - Ensure that CSS transforms from other Vite plugins correctly work in full builds (e.g. `:deep()` in Vue) ([#14871](https://github.com/tailwindlabs/tailwindcss/pull/14871)) - Don't unset keys like `--inset-shadow-*` when unsetting keys like `--inset-*` ([#14906](https://github.com/tailwindlabs/tailwindcss/pull/14906)) +- Fix opacity modifier using CSS variables ([#14916](https://github.com/tailwindlabs/tailwindcss/pull/14916)) - _Upgrade (experimental)_: Install `@tailwindcss/postcss` next to `tailwindcss` ([#14830](https://github.com/tailwindlabs/tailwindcss/pull/14830)) - _Upgrade (experimental)_: Remove whitespace around `,` separator when print arbitrary values ([#14838](https://github.com/tailwindlabs/tailwindcss/pull/14838)) - _Upgrade (experimental)_: Fix crash during upgrade when content globs escape root of project ([#14896](https://github.com/tailwindlabs/tailwindcss/pull/14896)) From b2ea4ca4b9acb13c66084df4a23f4692c3a85d55 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 8 Nov 2024 10:09:32 -0500 Subject: [PATCH 4/4] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0fb688ebe2c6..6480186755ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,7 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Rebase `url()` inside imported CSS files when using Vite ([#14877](https://github.com/tailwindlabs/tailwindcss/pull/14877)) - Ensure that CSS transforms from other Vite plugins correctly work in full builds (e.g. `:deep()` in Vue) ([#14871](https://github.com/tailwindlabs/tailwindcss/pull/14871)) - Don't unset keys like `--inset-shadow-*` when unsetting keys like `--inset-*` ([#14906](https://github.com/tailwindlabs/tailwindcss/pull/14906)) -- Fix opacity modifier using CSS variables ([#14916](https://github.com/tailwindlabs/tailwindcss/pull/14916)) +- Don't attempt to convert CSS variables (which should already be percentages) to percentages when used as opacity modifiers ([#14916](https://github.com/tailwindlabs/tailwindcss/pull/14916)) - _Upgrade (experimental)_: Install `@tailwindcss/postcss` next to `tailwindcss` ([#14830](https://github.com/tailwindlabs/tailwindcss/pull/14830)) - _Upgrade (experimental)_: Remove whitespace around `,` separator when print arbitrary values ([#14838](https://github.com/tailwindlabs/tailwindcss/pull/14838)) - _Upgrade (experimental)_: Fix crash during upgrade when content globs escape root of project ([#14896](https://github.com/tailwindlabs/tailwindcss/pull/14896))