Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Arbitrary value for `anchor-name` outputs as custom variable instead of identifier value
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**What version of Tailwind CSS are you using?**

`v3.4.4`

**What build tool (or framework if it abstracts the build tool) are you using?**

`"next": "^14.2.3"`

**What version of Node.js are you using?**

`v18.15.0`

**What browser are you using?**

N/A

**What operating system are you using?**

macOS

**Reproduction URL**

https://play.tailwindcss.com/fagqAhZl3j

```html
<div class="[anchor-name:--foo]"></div>

<div class="hover:[anchor-name:--foo]"></div>
```

**Describe your issue**

Arbitrary value for `anchor-name` outputs as custom variable (`var(--foo)`) instead of the desired identifier value (`--foo`).

Per specs by Chrome: https://developer.chrome.com/blog/anchor-positioning-api

[Current issue] the above outputs as:
```css
.\[anchor-name\:--foo\] {
  anchor-name: var(--foo);
}

.hover\:\[anchor-name\:--foo\]:hover {
  anchor-name: var(--foo);
}
```

[Desired] `--foo` instead of `var(--foo)`
```css
.\[anchor-name\:--foo\] {
  anchor-name: --foo;
}

.hover\:\[anchor-name\:--foo\]:hover {
  anchor-name: --foo;
}
```


Hints:
MOhammadreza Xeradm@nd 🧠 Original 
MOhammadreza 🧠 Original 

Patch:
diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -19,6 +19,7 @@ function isCSSFunction(value) {
 // More info:
 // - https://drafts.csswg.org/scroll-animations/#propdef-timeline-scope
 // - https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope#dashed-ident
+// - https://www.w3.org/TR/css-anchor-position-1
 //
 const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
   // Concrete properties
@@ -26,11 +27,16 @@ const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
   'timeline-scope',
   'view-timeline-name',
   'font-palette',
+  'anchor-name',
+  'anchor-scope',
+  'position-anchor',
+  'position-try-options',
 
   // Shorthand properties
   'scroll-timeline',
   'animation-timeline',
   'view-timeline',
+  'position-try',
 ])
 
 // This is not a data type, but rather a function that can normalize the


Test patch:
diff --git a/tests/normalize-data-types.test.js b/tests/normalize-data-types.test.js
--- a/tests/normalize-data-types.test.js
+++ b/tests/normalize-data-types.test.js
@@ -112,7 +112,18 @@ it('should not automatically inject the `var()` for properties that accept `<das
       { raw: '[color:--foo]' },
 
       // Automatic var injection is skipped
+      { raw: '[scroll-timeline-name:--foo]' },
       { raw: '[timeline-scope:--foo]' },
+      { raw: '[view-timeline-name:--foo]' },
+      { raw: '[font-palette:--foo]' },
+      { raw: '[anchor-name:--foo]' },
+      { raw: '[anchor-scope:--foo]' },
+      { raw: '[position-anchor:--foo]' },
+      { raw: '[position-try-options:--foo]' },
+      { raw: '[scroll-timeline:--foo]' },
+      { raw: '[animation-timeline:--foo]' },
+      { raw: '[view-timeline:--foo]' },
+      { raw: '[position-try:--foo]' },
     ],
   }
 
@@ -122,13 +133,45 @@ it('should not automatically inject the `var()` for properties that accept `<das
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      .\[anchor-name\:--foo\] {
+        anchor-name: --foo;
+      }
+      .\[anchor-scope\:--foo\] {
+        anchor-scope: --foo;
+      }
+      .\[animation-timeline\:--foo\] {
+        animation-timeline: --foo;
+      }
       .\[color\:--foo\] {
         color: var(--foo);
       }
-
+      .\[font-palette\:--foo\] {
+        font-palette: --foo;
+      }
+      .\[position-anchor\:--foo\] {
+        position-anchor: --foo;
+      }
+      .\[position-try-options\:--foo\] {
+        position-try-options: --foo;
+      }
+      .\[position-try\:--foo\] {
+        position-try: --foo;
+      }
+      .\[scroll-timeline-name\:--foo\] {
+        scroll-timeline-name: --foo;
+      }
+      .\[scroll-timeline\:--foo\] {
+        scroll-timeline: --foo;
+      }
       .\[timeline-scope\:--foo\] {
         timeline-scope: --foo;
       }
+      .\[view-timeline-name\:--foo\] {
+        view-timeline-name: --foo;
+      }
+      .\[view-timeline\:--foo\] {
+        view-timeline: --foo;
+      }
     `)
   })
 })