Arbitrary CSS variable with variant prefix

[zipper]

What version of Tailwind CSS are you using?
3.3.2

What build tool (or framework if it abstracts the build tool) are you using?
Not sure, simulated on Tailwind Play though.

What version of Node.js are you using?
See above.

What browser are you using?
Doesn't matter.

What operating system are you using?
Doesn't matter.

Reproduction URL
https://play.tailwindcss.com/uGZbOX6jll

Describe your issue
When using arbitrary CSS variables as seen in docs https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties, there is an issue when:

• Variant prefix for media is used (may be a problem with other variants as well, not sure)
• and theme function is used using [] to retrieve value.

E.g. these classes does work properly
✔️ [--bar:theme('spacing[1.5]')] - even though [] is used, it still works because there is no variant.
✔️ md:[--foo:theme('spacing.2')] - variant is used, but dot notation for value.

But this one doesn't:
❌ md:[--bar:theme('spacing[2.5]')] - [] and variant is used together, resulting in malformed CSS output.

All three classes are used in demo above, where first two works as intended, but the last one does not.

[abhayra12]

@zipper
To work around the bug, you can use the following workaround:

Instead of using the [] syntax to specify an arbitrary value, you can use the var(--) syntax instead. For example, instead of using md:[--bar:theme('spacing[2.5]')], you can use md:var(--bar, theme('spacing[2.5]')).

[ktmn]

Also reproduced it: https://play.tailwindcss.com/jJkDkENm1o

In the generated CSS there is a selector missing from a CSS rule:

.\[--space\:theme\(spacing\.20\)\] {
  --space: 5rem;
}

.\[--space\:theme\(spacing\[20\]\)\] {
  --space: 5rem;
}

.hover\:\[--space\:theme\(spacing\.10\)\]:hover {
  --space: 2.5rem;
}

{
  --space: 2.5rem;
}

[Serator]

https://play.tailwindcss.com/k2Eu5JVprh - a simple example to reproduce the problem.

The media expression is output without a selector.

[atavistock]

A leading square bracket [ is actually not valid to start any css class (per the spec including the most recent https://www.w3.org/TR/selectors-4/). The first character must be one of [a-zA-Z0-9], and follow characters can be any from a much larger set.

So while these seem to work in browsers, they will fail in many css parsers

.\[--space\:theme\(spacing\.20\)\] {
  --space: 5rem;
}

.\[--space\:theme\(spacing\[20\]\)\] {
  --space: 5rem;
}

Which I discovered the hard way...

[Serator]

@atavistock Why not? The class must begin with ., which can be followed by an escaped sequence of characters (which includes [). You can check this in your browser console using CSS.escape('[--space:theme(spacing.20)]').

[atavistock]

@Serator Yeah, I spoke prematurely. I was looking more carefully through the CSS spec and it does seem like a leading [ or any other escaped printable character is okay per spec. I had an entry like that which works fine in all browsers, but when I was parsing them with CSS parser libraries they exploed on that. I tried with two different parsers and got the same result, but now I think its a bug in those libraries (and I guess one stole the bug from the other).

[RobinMalfait]

Hey, thank you for this bug report! 🙏

This should be fixed by #11709, and will be available in the next release.

You can already try it by using the insiders build npm install tailwindcss@insiders.