Calculation of multiple theme() does not work in arbitrary properties

[Serator]

What version of Tailwind CSS are you using?

v3.3.1

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

play.tailwindcss.com

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/1Z2PI86485

Describe your issue

The calc() function breaks when it has more than one occurrence of theme(). This only happens in arbitrary properties. In arbitrary values, everything works as expected.

I can't be 100% sure, but it seems to have worked in previous versions of Tailwind.

[misha-otto]

https://play.tailwindcss.com/4hxL0Oulkw

[adamwathan]

For whoever gets a chance to hack on this — looks like a bug in our parser, specifically only happens when making theme calls with square brackets — can see it works here if the second theme call is using dot notation:

https://play.tailwindcss.com/LR1PXedstt

- <div class="h-10 w-[--test] bg-red-600 [--test:_calc(theme(spacing[5])_+_theme(spacing[5]))]"></div>
+ <div class="h-10 w-[--test] bg-red-600 [--test:_calc(theme(spacing[5])_+_theme(spacing.5))]"></div>

[RobinMalfait]

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

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

Updated the Tailwind Play to use the latest insiders version to see the fix in action: https://play.tailwindcss.com/xc7YIpsV1f