Support using variables as arbitrary values without var() (#9880)

* Support using variables as arbitrary values without var()

* Update changelog

* Add tests for variable fallback values

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

Author: adamwathan

CHANGELOG.md

@@ -10,6 +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))
 
 ### Fixed
 

src/util/dataTypes.js

@@ -13,6 +13,10 @@ function isCSSFunction(value) {
 // 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

tests/arbitrary-values.test.js

@@ -537,3 +537,41 @@ it('can explicitly specify type for percentage and length', () => {
     `)
   })
 })
+
+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\] {
+        background-color: var(--color-var);
+      }
+      .bg-\[--color-var\2c \#000\] {
+        background-color: var(--color-var, #000);
+      }
+      .bg-\[length\:--size-var\] {
+        background-size: var(--size-var);
+      }
+      .text-\[length\:--size-var\2c 12px\] {
+        font-size: var(--size-var, 12px);
+      }
+    `)
+  })
+})