Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Arbitrary CSS variable with variant prefix #11241

Closed
zipper opened this issue May 16, 2023 · 7 comments · Fixed by #11709
Closed

Arbitrary CSS variable with variant prefix #11241

zipper opened this issue May 16, 2023 · 7 comments · Fixed by #11709
Assignees

Comments

@zipper
Copy link

zipper commented May 16, 2023

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
Copy link

@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
Copy link

ktmn commented May 21, 2023

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
Copy link

Serator commented May 31, 2023

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

The media expression is output without a selector.

image

@atavistock
Copy link

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
Copy link

Serator commented Jul 7, 2023

@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
Copy link

@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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
6 participants