diff --git a/CHANGELOG.md b/CHANGELOG.md index d6a67ad91..4449f4603 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure the CSS `theme()` function handles newlines and tabs in its arguments list ([#14917](https://github.com/tailwindlabs/tailwindcss/pull/14917)) - Don't unset keys like `--inset-shadow-*` when unsetting keys like `--inset-*` ([#14906](https://github.com/tailwindlabs/tailwindcss/pull/14906)) - Ensure spacing utilities with no value (e.g. `px` or `translate-y`) don't generate CSS ([#14911](https://github.com/tailwindlabs/tailwindcss/pull/14911)) +- 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)) diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index d200e22b4..73745e837 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 b00541d55..db0d523a7 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 84694d2d4..911eedb06 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 { diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 5778ec249..d261273fb 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)` }