fix: use correct attribute selector syntax in data-slot Tailwind variants

[mkitti]

Problem

rating.tsx and select.tsx use Tailwind arbitrary variants of the form [&_data-slot=icon]. The _ in Tailwind arbitrary variants means a descendant space, so this generates the CSS selector:

.[\&_data-slot\=icon\]\:h-5 data-slot=icon { … }

data-slot=icon is not valid CSS — it needs square brackets to be an attribute selector: [data-slot=icon]. Browsers silently skip invalid selectors, so the icon sizing and cursor styles on Rating and the placeholder style on Select are never applied.

This also causes build-tool warnings for every downstream project that scans @material-tailwind/react source files:

▲ [WARNING] Unexpected "=" [css-syntax-error]
    <stdin>:3552:38:
      3552 │ .\[\&_data-slot\=icon\]\:h-5 data-slot=icon {

Reported in issue #860.

Fix

Replace [&_data-slot=value] with [&_[data-slot=value]] — the nested brackets make [data-slot=value] a proper CSS attribute selector:

/* before (invalid) */
.[\&_data-slot\=icon\]\:h-5 data-slot=icon { … }

/* after (valid) */
.[\&_\[data-slot\=icon\]\]\:h-5 [data-slot=icon] { … }

Files changed:

• packages/react/src/theme/rating.tsx — 4 occurrences ([&_data-slot=icon])
• packages/react/src/theme/select.tsx — 1 occurrence ([&_data-slot=placeholder])

Fixes #860

[vercel]

@mkitti is attempting to deploy a commit to the ct-tailwind-team Team on Vercel.

A member of the Team first needs to authorize it.