add var(…) ourselves now that the automatic var injection is gone

packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap

@@ -38,7 +38,7 @@ exports[`border-* 1`] = `
   border-width: 12px;
 }
 
-.border-\\[length\\:--my-width\\], .border-\\[line-width\\:--my-width\\] {
+.border-\\[length\\:var\\(--my-width\\)\\], .border-\\[line-width\\:var\\(--my-width\\)\\] {
   border-style: var(--tw-border-style);
   border-width: var(--my-width);
 }
@@ -66,19 +66,19 @@ exports[`border-* 1`] = `
   border-color: #0088cc80;
 }
 
-.border-\\[--my-color\\] {
+.border-\\[color\\:var\\(--my-color\\)\\] {
   border-color: var(--my-color);
 }
 
-.border-\\[--my-color\\]\\/50 {
+.border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-\\[color\\:--my-color\\] {
+.border-\\[var\\(--my-color\\)\\] {
   border-color: var(--my-color);
 }
 
-.border-\\[color\\:--my-color\\]\\/50 {
+.border-\\[var\\(--my-color\\)\\]\\/50 {
   border-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -159,7 +159,7 @@ exports[`border-b-* 1`] = `
   border-bottom-width: 12px;
 }
 
-.border-b-\\[length\\:--my-width\\], .border-b-\\[line-width\\:--my-width\\] {
+.border-b-\\[length\\:var\\(--my-width\\)\\], .border-b-\\[line-width\\:var\\(--my-width\\)\\] {
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: var(--my-width);
 }
@@ -187,19 +187,19 @@ exports[`border-b-* 1`] = `
   border-bottom-color: #0088cc80;
 }
 
-.border-b-\\[--my-color\\] {
+.border-b-\\[color\\:var\\(--my-color\\)\\] {
   border-bottom-color: var(--my-color);
 }
 
-.border-b-\\[--my-color\\]\\/50 {
+.border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-b-\\[color\\:--my-color\\] {
+.border-b-\\[var\\(--my-color\\)\\] {
   border-bottom-color: var(--my-color);
 }
 
-.border-b-\\[color\\:--my-color\\]\\/50 {
+.border-b-\\[var\\(--my-color\\)\\]\\/50 {
   border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -280,7 +280,7 @@ exports[`border-e-* 1`] = `
   border-inline-end-width: 12px;
 }
 
-.border-e-\\[length\\:--my-width\\], .border-e-\\[line-width\\:--my-width\\] {
+.border-e-\\[length\\:var\\(--my-width\\)\\], .border-e-\\[line-width\\:var\\(--my-width\\)\\] {
   border-inline-end-style: var(--tw-border-style);
   border-inline-end-width: var(--my-width);
 }
@@ -308,19 +308,19 @@ exports[`border-e-* 1`] = `
   border-inline-end-color: #0088cc80;
 }
 
-.border-e-\\[--my-color\\] {
+.border-e-\\[color\\:var\\(--my-color\\)\\] {
   border-inline-end-color: var(--my-color);
 }
 
-.border-e-\\[--my-color\\]\\/50 {
+.border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-e-\\[color\\:--my-color\\] {
+.border-e-\\[var\\(--my-color\\)\\] {
   border-inline-end-color: var(--my-color);
 }
 
-.border-e-\\[color\\:--my-color\\]\\/50 {
+.border-e-\\[var\\(--my-color\\)\\]\\/50 {
   border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -401,7 +401,7 @@ exports[`border-l-* 1`] = `
   border-left-width: 12px;
 }
 
-.border-l-\\[length\\:--my-width\\], .border-l-\\[line-width\\:--my-width\\] {
+.border-l-\\[length\\:var\\(--my-width\\)\\], .border-l-\\[line-width\\:var\\(--my-width\\)\\] {
   border-left-style: var(--tw-border-style);
   border-left-width: var(--my-width);
 }
@@ -429,19 +429,19 @@ exports[`border-l-* 1`] = `
   border-left-color: #0088cc80;
 }
 
-.border-l-\\[--my-color\\] {
+.border-l-\\[color\\:var\\(--my-color\\)\\] {
   border-left-color: var(--my-color);
 }
 
-.border-l-\\[--my-color\\]\\/50 {
+.border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-l-\\[color\\:--my-color\\] {
+.border-l-\\[var\\(--my-color\\)\\] {
   border-left-color: var(--my-color);
 }
 
-.border-l-\\[color\\:--my-color\\]\\/50 {
+.border-l-\\[var\\(--my-color\\)\\]\\/50 {
   border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -522,7 +522,7 @@ exports[`border-r-* 1`] = `
   border-right-width: 12px;
 }
 
-.border-r-\\[length\\:--my-width\\], .border-r-\\[line-width\\:--my-width\\] {
+.border-r-\\[length\\:var\\(--my-width\\)\\], .border-r-\\[line-width\\:var\\(--my-width\\)\\] {
   border-right-style: var(--tw-border-style);
   border-right-width: var(--my-width);
 }
@@ -550,19 +550,19 @@ exports[`border-r-* 1`] = `
   border-right-color: #0088cc80;
 }
 
-.border-r-\\[--my-color\\] {
+.border-r-\\[color\\:var\\(--my-color\\)\\] {
   border-right-color: var(--my-color);
 }
 
-.border-r-\\[--my-color\\]\\/50 {
+.border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-r-\\[color\\:--my-color\\] {
+.border-r-\\[var\\(--my-color\\)\\] {
   border-right-color: var(--my-color);
 }
 
-.border-r-\\[color\\:--my-color\\]\\/50 {
+.border-r-\\[var\\(--my-color\\)\\]\\/50 {
   border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -643,7 +643,7 @@ exports[`border-s-* 1`] = `
   border-inline-start-width: 12px;
 }
 
-.border-s-\\[length\\:--my-width\\], .border-s-\\[line-width\\:--my-width\\] {
+.border-s-\\[length\\:var\\(--my-width\\)\\], .border-s-\\[line-width\\:var\\(--my-width\\)\\] {
   border-inline-start-style: var(--tw-border-style);
   border-inline-start-width: var(--my-width);
 }
@@ -671,19 +671,19 @@ exports[`border-s-* 1`] = `
   border-inline-start-color: #0088cc80;
 }
 
-.border-s-\\[--my-color\\] {
+.border-s-\\[color\\:var\\(--my-color\\)\\] {
   border-inline-start-color: var(--my-color);
 }
 
-.border-s-\\[--my-color\\]\\/50 {
+.border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-s-\\[color\\:--my-color\\] {
+.border-s-\\[var\\(--my-color\\)\\] {
   border-inline-start-color: var(--my-color);
 }
 
-.border-s-\\[color\\:--my-color\\]\\/50 {
+.border-s-\\[var\\(--my-color\\)\\]\\/50 {
   border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -764,7 +764,7 @@ exports[`border-t-* 1`] = `
   border-top-width: 12px;
 }
 
-.border-t-\\[length\\:--my-width\\], .border-t-\\[line-width\\:--my-width\\] {
+.border-t-\\[length\\:var\\(--my-width\\)\\], .border-t-\\[line-width\\:var\\(--my-width\\)\\] {
   border-top-style: var(--tw-border-style);
   border-top-width: var(--my-width);
 }
@@ -792,19 +792,19 @@ exports[`border-t-* 1`] = `
   border-top-color: #0088cc80;
 }
 
-.border-t-\\[--my-color\\] {
+.border-t-\\[color\\:var\\(--my-color\\)\\] {
   border-top-color: var(--my-color);
 }
 
-.border-t-\\[--my-color\\]\\/50 {
+.border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-t-\\[color\\:--my-color\\] {
+.border-t-\\[var\\(--my-color\\)\\] {
   border-top-color: var(--my-color);
 }
 
-.border-t-\\[color\\:--my-color\\]\\/50 {
+.border-t-\\[var\\(--my-color\\)\\]\\/50 {
   border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
@@ -897,7 +897,7 @@ exports[`border-x-* 1`] = `
   border-right-width: 12px;
 }
 
-.border-x-\\[length\\:--my-width\\], .border-x-\\[line-width\\:--my-width\\] {
+.border-x-\\[length\\:var\\(--my-width\\)\\], .border-x-\\[line-width\\:var\\(--my-width\\)\\] {
   border-left-style: var(--tw-border-style);
   border-right-style: var(--tw-border-style);
   border-left-width: var(--my-width);
@@ -935,22 +935,22 @@ exports[`border-x-* 1`] = `
   border-right-color: #0088cc80;
 }
 
-.border-x-\\[--my-color\\] {
+.border-x-\\[color\\:var\\(--my-color\\)\\] {
   border-left-color: var(--my-color);
   border-right-color: var(--my-color);
 }
 
-.border-x-\\[--my-color\\]\\/50 {
+.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
   border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-x-\\[color\\:--my-color\\] {
+.border-x-\\[var\\(--my-color\\)\\] {
   border-left-color: var(--my-color);
   border-right-color: var(--my-color);
 }
 
-.border-x-\\[color\\:--my-color\\]\\/50 {
+.border-x-\\[var\\(--my-color\\)\\]\\/50 {
   border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
   border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
@@ -1050,7 +1050,7 @@ exports[`border-y-* 1`] = `
   border-bottom-width: 12px;
 }
 
-.border-y-\\[length\\:--my-width\\], .border-y-\\[line-width\\:--my-width\\] {
+.border-y-\\[length\\:var\\(--my-width\\)\\], .border-y-\\[line-width\\:var\\(--my-width\\)\\] {
   border-top-style: var(--tw-border-style);
   border-bottom-style: var(--tw-border-style);
   border-top-width: var(--my-width);
@@ -1088,22 +1088,22 @@ exports[`border-y-* 1`] = `
   border-bottom-color: #0088cc80;
 }
 
-.border-y-\\[--my-color\\] {
+.border-y-\\[color\\:var\\(--my-color\\)\\] {
   border-top-color: var(--my-color);
   border-bottom-color: var(--my-color);
 }
 
-.border-y-\\[--my-color\\]\\/50 {
+.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
   border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }
 
-.border-y-\\[color\\:--my-color\\] {
+.border-y-\\[var\\(--my-color\\)\\] {
   border-top-color: var(--my-color);
   border-bottom-color: var(--my-color);
 }
 
-.border-y-\\[color\\:--my-color\\]\\/50 {
+.border-y-\\[var\\(--my-color\\)\\]\\/50 {
   border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
   border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
 }