Fix opacity modifier using CSS variables (#14916)

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%), transp
}
```

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/xz0t

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/#f and generate both versions at
the same time.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: RobinMalfait

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))

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;

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);
           }"
         `)
       })

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 {

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)`
 }