Support variable shorthand for arbitrary modifiers (#9962)

* Support variable shorthand for arbitrary modifiers

* Update changelog

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

Author: adamwathan

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

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

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