theme keys with dashes wrongly normalized in calc()

[wongjn]

What version of Tailwind CSS are you using?

v3.3.3

What build tool (or framework if it abstracts the build tool) are you using?

PostCSS 8.4.27
PostCSS Loader 6.2.1
Webpack 5.88.2

Also reproduced in Tailwind Play (see below)

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/tjJ1g2Vy8f

Describe your issue

Hello from your resident calc() bug finder 😅.

When using theme() inside arbitrary calc() values, keys can be mistakenly "normalized" if they contain a dash after a number (at least, that's what Tailwind IntelliSense tells me), causing the CSS rule to not be generated:

✅top-[theme(spacing.1-bar)]
❌top-[calc(theme(spacing.1-bar))]
❌top-[calc(1rem-theme(spacing.1-bar))]
✅top-[calc(theme(spacing.foo-2))]
✅top-[calc(theme(spacing.foo-bar))]

IntelliSense hover shows:

.top-\[calc\(theme\(spacing\.1-bar\)\)\] {
  top: calc(theme(spacing.1 - bar));
}

Versus:

.top-\[theme\(spacing\.1-bar\)\] {
  top: theme(spacing.1-bar);
}

[RobinMalfait]

Hey, thank you for this bug report! 🙏

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

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