From 27d0aa69a93a9286ff2b10e5e4766514a09ebb31 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 21 Apr 2023 18:40:59 +0200
Subject: [PATCH] ensure we normalize the arbitrary modifiers

This applies the same rules as arbitrary values. The `_` can be used in
place of a space. If you _do_ want an underscore, you can escape it with
`\_` (`\\_` in JavaScript).
---
 src/util/pluginUtils.js        |  6 +-----
 tests/arbitrary-values.test.js | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
index 407019c905a6..bef9fc1658e7 100644
--- a/src/util/pluginUtils.js
+++ b/src/util/pluginUtils.js
@@ -115,11 +115,7 @@ export function parseColorFormat(value) {
 }
 
 function unwrapArbitraryModifier(modifier) {
-  modifier = modifier.slice(1, -1)
-  if (modifier.startsWith('--')) {
-    modifier = `var(${modifier})`
-  }
-  return modifier
+  return normalize(modifier.slice(1, -1))
 }
 
 export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index df7cca3398e8..774b4db406b9 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -637,4 +637,19 @@ crosscheck(({ stable, oxide }) => {
       `)
     })
   })
+
+  it('should support underscores in arbitrary modifiers', () => {
+    let config = {
+      content: [{ raw: html`<div class="text-lg/[calc(50px_*_2)]"></div>` }],
+    }
+
+    return run('@tailwind utilities', config).then((result) => {
+      return expect(result.css).toMatchFormattedCss(css`
+        .text-lg\/\[calc\(50px_\*_2\)\] {
+          font-size: 1.125rem;
+          line-height: calc(50px * 2);
+        }
+      `)
+    })
+  })
 })