remove automatic var injection

This also gets rid of the `dashedIdent` property because the arbitrary
value now contains it as-is.

packages/tailwindcss/src/candidate.ts

@@ -11,41 +11,44 @@ type ArbitraryUtilityValue = {
   kind: 'arbitrary'
 
   /**
-   * bg-[color:--my-color]
+   * ```
+   * bg-[color:var(--my-color)]
    *     ^^^^^
+   * ```
    */
   dataType: string | null
 
   /**
+   * ```
    * bg-[#0088cc]
    *     ^^^^^^^
-   * bg-[--my_variable]
-   * var(^^^^^^^^^^^^^)
+   *
+   * bg-[var(--my_variable)]
+   *     ^^^^^^^^^^^^^^^^^^
+   * ```
    */
   value: string
-
-  /**
-   * bg-[--my_variable]
-   *     ^^^^^^^^^^^^^
-   */
-  dashedIdent: string | null
 }
 
 export type NamedUtilityValue = {
   kind: 'named'
 
   /**
+   * ```
    * bg-red-500
    *    ^^^^^^^
    *
    * w-1/2
    *   ^
+   * ```
    */
   value: string
 
   /**
+   * ```
    * w-1/2
    *   ^^^
+   * ```
    */
   fraction: string | null
 }
@@ -54,24 +57,22 @@ type ArbitraryModifier = {
   kind: 'arbitrary'
 
   /**
+   * ```
    * bg-red-500/[50%]
    *             ^^^
+   * ```
    */
   value: string
-
-  /**
-   * bg-red-500/[--my_variable]
-   *             ^^^^^^^^^^^^^
-   */
-  dashedIdent: string | null
 }
 
 type NamedModifier = {
   kind: 'named'
 
   /**
+   * ```
    * bg-red-500/50
    *            ^^
+   * ```
    */
   value: string
 }
@@ -423,26 +424,10 @@ export function* parseCandidate(input: string, designSystem: DesignSystem): Iter
           break
         }
 
-        // If an arbitrary value looks like a CSS variable, we automatically wrap
-        // it with `var(...)`.
-        //
-        // But since some CSS properties accept a `<dashed-ident>` as a value
-        // directly (e.g. `scroll-timeline-name`), we also store the original
-        // value in case the utility matcher is interested in it without
-        // `var(...)`.
-        let dashedIdent: string | null = null
-        if (arbitraryValue[0] === '-' && arbitraryValue[1] === '-') {
-          dashedIdent = arbitraryValue
-          arbitraryValue = `var(${arbitraryValue})`
-        } else {
-          arbitraryValue = decodeArbitraryValue(arbitraryValue)
-        }
-
         candidate.value = {
           kind: 'arbitrary',
           dataType: typehint || null,
-          value: arbitraryValue,
-          dashedIdent,
+          value: decodeArbitraryValue(arbitraryValue),
         }
       } else {
         // Some utilities support fractions as values, e.g. `w-1/2`. Since it's
@@ -469,25 +454,9 @@ function parseModifier(modifier: string): CandidateModifier {
   if (modifier[0] === '[' && modifier[modifier.length - 1] === ']') {
     let arbitraryValue = modifier.slice(1, -1)
 
-    // If an arbitrary value looks like a CSS variable, we automatically wrap
-    // it with `var(...)`.
-    //
-    // But since some CSS properties accept a `<dashed-ident>` as a value
-    // directly (e.g. `scroll-timeline-name`), we also store the original
-    // value in case the utility matcher is interested in it without
-    // `var(...)`.
-    let dashedIdent: string | null = null
-    if (arbitraryValue[0] === '-' && arbitraryValue[1] === '-') {
-      dashedIdent = arbitraryValue
-      arbitraryValue = `var(${arbitraryValue})`
-    } else {
-      arbitraryValue = decodeArbitraryValue(arbitraryValue)
-    }
-
     return {
       kind: 'arbitrary',
-      value: arbitraryValue,
-      dashedIdent,
+      value: decodeArbitraryValue(arbitraryValue),
     }
   }