[bug]: When using tailwind class prefix, importing a component, which has multiple whitespaces between classes, adds a prefix to a whitespace

[LukasKez]

Describe the bug

I noticed that when using tailwind class prefix and installing a UI component, it adds a prefix to a whitespace, if the class definition had multiple whitespaces between classes, essentially adding a class of a tailwind prefix.

Affected component/components

AlertDialog, Carousel, Dialog, Sheet

How to reproduce

1. Setup tailwind prefix (using tw- for this example)
2. Do a fresh installation of a sheet component
3. SheetOverlay component and right sheet variant will have tw- classes.

Codesandbox/StackBlitz link

https://codesandbox.io/p/sandbox/react-shadcn-ui-demo-967vh5

Logs

No response

System Info

-

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[LukasKez]

The prefixes work great. What I mean is, that if the component had multiple whitespaces in the class definition (like sheet component does), when installing the component, the prefix is added to a whitespace and gives this as a result:

tw- is a prefix, and should not be added as a separate class, which is happening right now.

Here's a link to source code, there are two whitespaces between background color and open state animation classes:

ui/apps/www/registry/default/ui/sheet.tsx

Line 24 in 816b654

"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",

.

[servesh-chaturvedi]

Great catch! I didn't actually understand the question at first. Thanks for putting the ss to clarify.