fix: doesn't work spaces inside calc

[bae-sh]

This PR fix a uncomfortable thing that spaces inside calc doesn't work.

When i use arbitrary calc values with spaces <div class="w-[calc(100px + 200px)]></div>, tailwind extract separate words.
Finally, It doesn't work.

So I've added a function that remove spaces inside calc. It can remove spaces inside calc before using extractor.

before

w-[calc(100px + 200px)] -> w-[calc(100px , + , 200px)]

after

w-[calc(100px + 200px)] -> w-[calc(100px+200px)]

[RobinMalfait]

Hey!

Thanks for the PR, however the fact that spaces are not allowed in a class name is not a Tailwind UI issue but it is a side effect of how HTML itself works. Each class is separated by spaces, this means that if you use w-[calc(100px + 200px)] then you actually use 3 separate classes w-[calc(100px, + and 200px)].

Even with this fix, the class name will never match and the styles won't be applied.

That said, we know that spaces are required in calc, so we add them for you. This means that you should just be able to write <div class="w-[calc(100px+200px)]"></div>

This generates the following CSS:

.w-\[calc\(100px\+200px\)\] {
  width: calc(100px + 200px);
}

Hope this helps!

[bae-sh]

Thank you for the review!

The intent of this PR was not only to avoid spaces inside calc, but also to be recognized when spaces are used.
However, i was missing the fact that the html itself uses spaces to separate them.

Thanks for pointing that out! I hope I can contribute again in the future. 😀