From a51b214c133da316583edd018102b236114a96ac Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Sat, 18 Jan 2025 00:48:18 +0100
Subject: [PATCH] Use more modern `--alpha(color / 50%)` syntax (#15665)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR changes the syntax for the `--alpha(…)` function to look like
more modern CSS.

The arguments to apply an alpha to a color is using the `/` syntax
instead of the comma syntax.

```diff
- --alpha(color, 50%)
+ --alpha(color / 50%)
```

This syntax is now similar to modern `rgb(0 0 0 / 50%)` syntax in CSS.
---
 CHANGELOG.md                                   |  4 ++++
 packages/tailwindcss/src/css-functions.test.ts | 10 +++++-----
 packages/tailwindcss/src/css-functions.ts      | 12 +++++++-----
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1645f7212..37ad1a59c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Write to `stdout` when `--output -` flag is used for `@tailwindcss/cli` ([#15656](https://github.com/tailwindlabs/tailwindcss/pull/15656))
 - _Upgrade (experimental)_: Pretty print `--spacing(…)` to prevent ambiguity ([#15596](https://github.com/tailwindlabs/tailwindcss/pull/15596))
 
+### Changed
+
+- Use more modern `--alpha(color / 50%)` syntax instead of `--alpha(color, 50%)` ([#15665](https://github.com/tailwindlabs/tailwindcss/pull/15665))
+
 ## [4.0.0-beta.9] - 2025-01-09
 
 ### Added
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index 128053f46..e3747c7ba 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -12,7 +12,7 @@ describe('--alpha(…)', () => {
     expect(
       await compileCss(css`
         .foo {
-          margin: --alpha(red, 50%);
+          margin: --alpha(red / 50%);
         }
       `),
     ).toMatchInlineSnapshot(`
@@ -30,7 +30,7 @@ describe('--alpha(…)', () => {
         }
       `),
     ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --alpha(…) function requires two arguments, e.g.: \`--alpha(var(--my-color), 50%)\`]`,
+      `[Error: The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(var(--my-color) / 50%)\`]`,
     )
   })
 
@@ -42,7 +42,7 @@ describe('--alpha(…)', () => {
         }
       `),
     ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --alpha(…) function requires two arguments, e.g.: \`--alpha(red, 50%)\`]`,
+      `[Error: The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(red / 50%)\`]`,
     )
   })
 
@@ -50,11 +50,11 @@ describe('--alpha(…)', () => {
     expect(() =>
       compileCss(css`
         .foo {
-          margin: --alpha(red, 50%, blue);
+          margin: --alpha(red / 50%, blue);
         }
       `),
     ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --alpha(…) function only accepts two arguments, e.g.: \`--alpha(red, 50%)\`]`,
+      `[Error: The --alpha(…) function only accepts one argument, e.g.: \`--alpha(red / 50%)\`]`,
     )
   })
 })
diff --git a/packages/tailwindcss/src/css-functions.ts b/packages/tailwindcss/src/css-functions.ts
index bb27658c5..ff986c6f6 100644
--- a/packages/tailwindcss/src/css-functions.ts
+++ b/packages/tailwindcss/src/css-functions.ts
@@ -12,20 +12,22 @@ const functions: Record<string, (designSystem: DesignSystem, ...args: string[])
   theme: legacyTheme,
 }
 
-function alpha(_designSystem: DesignSystem, value: string, alpha: string, ...rest: string[]) {
-  if (!value || !alpha) {
+function alpha(_designSystem: DesignSystem, value: string, ...rest: string[]) {
+  let [color, alpha] = segment(value, '/').map((v) => v.trim())
+
+  if (!color || !alpha) {
     throw new Error(
-      `The --alpha(…) function requires two arguments, e.g.: \`--alpha(${value || 'var(--my-color)'}, ${alpha || '50%'})\``,
+      `The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
     )
   }
 
   if (rest.length > 0) {
     throw new Error(
-      `The --alpha(…) function only accepts two arguments, e.g.: \`--alpha(${value || 'var(--my-color)'}, ${alpha || '50%'})\``,
+      `The --alpha(…) function only accepts one argument, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
     )
   }
 
-  return withAlpha(value, alpha)
+  return withAlpha(color, alpha)
 }
 
 function spacing(designSystem: DesignSystem, value: string, ...rest: string[]) {