Remove automatic var(…) injection (#13657)

This PR is a continuation of #13537.

Currently we reverted the merged changes so that we can get a new alpha
version out without this change.

---

This PR removes automatic `var(…)` injection for arbitrary properties,
values and modifiers.

There are a few properties that use "dashed-ident" values, this means
that you can use `--my-thing` as-is without the `var(…)` around it.

E.g.:

```css
.foo {
  /* Notice that these don't have `var(…)` */
  view-timeline-name: --timeline-name; 
  anchor-name: --sidebar;
}
```

This causes issues because we are now injecting a `var(…)` where it's
not needed.

One potential solution is to create a list of properties where dashed
idents can be used. However, they can _also_ use CSS custom properties
that point to another dashed ident.

E.g.:

```css
.foo {
  --target: --sidebar;
  anchor-name: var(--target);
}
```

A workaround that some people used is adding a `_` in front of the
variable: `mt-[_--my-thing]` this way we don't automatically inject the
`var(…)` around it. This is a workaround and gross.

While the idea of automatic var injection is neat, this causes more
trouble than it's worth. Adding `var(…)` explicitly is better.

A side effect of this is that we can simplify the internals for the
`candidate` data structure because we don't need to track `dashedIdent`
separately anymore.


<!--

👋 Hey, thanks for your interest in contributing to Tailwind!

**Please ask first before starting work on any significant new
features.**

It's never a fun experience to have your pull request declined after
investing a lot of time and effort into a new feature. To avoid this
from happening, we request that contributors create an issue to first
discuss any significant new features. This includes things like adding
new utilities, creating new at-rules, or adding new component examples
to the documentation.


https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md

-->

Author: RobinMalfait

CHANGELOG.md

@@ -35,6 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Preserve explicit shadow color when overriding shadow size ([#14458](https://github.com/tailwindlabs/tailwindcss/pull/14458))
 - Preserve explicit transition duration and timing function when overriding transition property ([#14490](https://github.com/tailwindlabs/tailwindcss/pull/14490))
 - Change the implementation for `@import` resolution to speed up initial builds ([#14446](https://github.com/tailwindlabs/tailwindcss/pull/14446))
+- Remove automatic `var(…)` injection ([#13657](https://github.com/tailwindlabs/tailwindcss/pull/13657))
 
 ## [4.0.0-alpha.24] - 2024-09-11
 

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