The theme() function does not work in custom properties with square brackets inside

[Serator]

What version of Tailwind CSS are you using?

v3.2.1

Reproduction URL

https://play.tailwindcss.com/VZWEHQAaG2

Describe your issue

[Riddhi12349]

Please assign me this issue.

[akbng]

I have looked into the issue and traced the way back to the regular Expressions in the functions of src/lib/defaultExtractor.js

Apparently, there's some issue in the RegEx patterns wherein these particular types of arbitrary properties are parsed/matched incorrectly but are fine with other properties.

For example,

<div class='[height:_calc(100vh_-_theme(spacing[2.5]))]'>Lorem ipsum dolor sit amet.</div>

it is parsed in the class candidate as [height:_calc(100vh_-_theme(spacing[2.5] i.e. the first bracket is closed unexpectedly after 2.5

Similarly,

<div class="[box-shadow:_0_theme(spacing[1.5])_0_theme(colors.green.400)]">Lorem ipsum</div>

it is parsed in the class candidate as [box-shadow:_0_calc(theme(spacing[1.5] and the closing bracket of calc is ignored which is causing the error down the line.

Probable Workaround to this problem:

Use arbitrary values like - class="shadow-[0_theme(spacing[1.5])_0_theme(colors.green.400)]" or class='h-[calc(100vh_-_theme(spacing[2.5]))]

Maintainer, Please assign this to me if nobody is working on this issue, I can work on this & the PR will be up soon 🎈 (once I figure out the regular expressions ).

[akbng]

The PR #9705 for this issue is open now!

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #9705 (thanks @akbng!), and will be available in the next release.

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

[Serator]

Hey. Many thanks for the quick fix! 👍🏻