From cbbfa827a4f53275035aeae516dc12639280ee38 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 29 Nov 2022 16:06:58 -0500
Subject: [PATCH] Support variable shorthand for arbitrary modifiers (#9962)

* Support variable shorthand for arbitrary modifiers

* Update changelog

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
---
 CHANGELOG.md                   |  2 +-
 src/util/pluginUtils.js        | 12 ++++++++++--
 tests/arbitrary-values.test.js | 28 ++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index afeecbb53..3f1a3a96f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `line-height` modifier support to `font-size` utilities ([#9875](https://github.com/tailwindlabs/tailwindcss/pull/9875))
-- Support using variables as arbitrary values without `var(...)` ([#9880](https://github.com/tailwindlabs/tailwindcss/pull/9880))
+- Support using variables as arbitrary values without `var(...)` ([#9880](https://github.com/tailwindlabs/tailwindcss/pull/9880), [#9962](https://github.com/tailwindlabs/tailwindcss/pull/9962))
 - Add `--watch=always` option to prevent exit when stdin closes ([#9966](https://github.com/tailwindlabs/tailwindcss/pull/9966))
 
 ### Fixed
diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
index 5c4821d3c..e347f404b 100644
--- a/src/util/pluginUtils.js
+++ b/src/util/pluginUtils.js
@@ -133,6 +133,14 @@ export function parseColorFormat(value) {
   return value
 }
 
+function unwrapArbitraryModifier(modifier) {
+  modifier = modifier.slice(1, -1)
+  if (modifier.startsWith('--')) {
+    modifier = `var(${modifier})`
+  }
+  return modifier
+}
+
 export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
   if (options.values?.[modifier] !== undefined) {
     return parseColorFormat(options.values?.[modifier])
@@ -153,7 +161,7 @@ export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
     normalizedColor = parseColorFormat(normalizedColor)
 
     if (isArbitraryValue(alpha)) {
-      return withAlphaValue(normalizedColor, alpha.slice(1, -1))
+      return withAlphaValue(normalizedColor, unwrapArbitraryModifier(alpha))
     }
 
     if (tailwindConfig.theme?.opacity?.[alpha] === undefined) {
@@ -287,7 +295,7 @@ export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
       if (configValue !== null) {
         utilityModifier = configValue
       } else if (isArbitraryValue(utilityModifier)) {
-        utilityModifier = utilityModifier.slice(1, -1)
+        utilityModifier = unwrapArbitraryModifier(utilityModifier)
       }
     }
   }
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index ec3b94941..b44459074 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -575,3 +575,31 @@ it('can use CSS variables as arbitrary values without `var()`', () => {
     `)
   })
 })
+
+it('can use CSS variables as arbitrary modifiers without `var()`', () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="text-sm/[--line-height] bg-red-500/[--opacity]"></div>`,
+      },
+    ],
+    corePlugins: { preflight: false },
+    plugins: [],
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .bg-red-500\/\[--opacity\] {
+        background-color: rgb(239 68 68 / var(--opacity));
+      }
+      .text-sm\/\[--line-height\] {
+        font-size: 0.875rem;
+        line-height: var(--line-height);
+      }
+    `)
+  })
+})