Revert "Support using variables as arbitrary values without var()"

Author: RobinMalfait

CHANGELOG.md

@@ -10,7 +10,6 @@ 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), [#9962](https://github.com/tailwindlabs/tailwindcss/pull/9962))
 - Add standalone CLI build for 64-bit Windows on ARM (`node16-win-arm64`) ([#10001](https://github.com/tailwindlabs/tailwindcss/pull/10001))
 - [Oxide] Use `lightningcss` for nesting and vendor prefixes in PostCSS plugin ([#10399](https://github.com/tailwindlabs/tailwindcss/pull/10399))
 

src/util/dataTypes.js

@@ -16,10 +16,6 @@ const placeholderRe = new RegExp(placeholder, 'g')
 // This is not a data type, but rather a function that can normalize the
 // correct values.
 export function normalize(value, isRoot = true) {
-  if (value.startsWith('--')) {
-    return `var(${value})`
-  }
-
   // Keep raw strings if it starts with `url(`
   if (value.includes('url(')) {
     return value

src/util/pluginUtils.js

@@ -133,14 +133,6 @@ 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])
@@ -161,7 +153,7 @@ export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
     normalizedColor = parseColorFormat(normalizedColor)
 
     if (isArbitraryValue(alpha)) {
-      return withAlphaValue(normalizedColor, unwrapArbitraryModifier(alpha))
+      return withAlphaValue(normalizedColor, alpha.slice(1, -1))
     }
 
     if (tailwindConfig.theme?.opacity?.[alpha] === undefined) {
@@ -295,7 +287,7 @@ export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
       if (configValue !== null) {
         utilityModifier = configValue
       } else if (isArbitraryValue(utilityModifier)) {
-        utilityModifier = unwrapArbitraryModifier(utilityModifier)
+        utilityModifier = utilityModifier.slice(1, -1)
       }
     }
   }

tests/arbitrary-values.test.js

@@ -545,70 +545,4 @@ crosscheck(({ stable, oxide }) => {
       `)
     })
   })
-
-  it('can use CSS variables as arbitrary values without `var()`', () => {
-    let config = {
-      content: [
-        {
-          raw: html`<div
-            class="w-[--width-var] bg-[--color-var] bg-[--color-var,#000] bg-[length:--size-var] text-[length:--size-var,12px]"
-          ></div>`,
-        },
-      ],
-      corePlugins: { preflight: false },
-      plugins: [],
-    }
-
-    let input = css`
-      @tailwind utilities;
-    `
-
-    return run(input, config).then((result) => {
-      expect(result.css).toMatchFormattedCss(css`
-        .w-\[--width-var\] {
-          width: var(--width-var);
-        }
-        .bg-\[--color-var\,\#000\] {
-          background-color: var(--color-var, #000);
-        }
-        .bg-\[--color-var\] {
-          background-color: var(--color-var);
-        }
-        .bg-\[length\:--size-var\] {
-          background-size: var(--size-var);
-        }
-        .text-\[length\:--size-var\,12px\] {
-          font-size: var(--size-var, 12px);
-        }
-      `)
-    })
-  })
-
-  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);
-        }
-      `)
-    })
-  })
 })