Arbitrary value for anchor-name outputs as custom variable instead of identifier value

[mitchuman]

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

<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:

.\[anchor-name\:--foo\] {
  anchor-name: var(--foo);
}

.hover\:\[anchor-name\:--foo\]:hover {
  anchor-name: var(--foo);
}

[Desired] --foo instead of var(--foo)

.\[anchor-name\:--foo\] {
  anchor-name: --foo;
}

.hover\:\[anchor-name\:--foo\]:hover {
  anchor-name: --foo;
}

[thecrypticace]

I've merged the fix for this in #13826 and it'll be available in the next v3 patch release — probably gonna tag it next week. In the meantime you can try it once our insiders build publishes to NPM (this may take like ~15m or so):

npm install tailwindcss@insiders