Normalize arbitrary modifiers (#11057)

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

* update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Honor default `to` position of gradient when using implicit transparent colors ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002))
 - Ensure `@tailwindcss/oxide` doesn't leak in the stable engine ([#10988](https://github.com/tailwindlabs/tailwindcss/pull/10988))
 - Ensure multiple `theme(spacing[5])` calls with bracket notation in arbitrary properties work ([#11039](https://github.com/tailwindlabs/tailwindcss/pull/11039))
+- Normalize arbitrary modifiers ([#11057](https://github.com/tailwindlabs/tailwindcss/pull/11057))
 
 ## [3.3.1] - 2023-03-30
 

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 = {} } = {}) {

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