From 3afb0adb5260b6cebdfa2956abc477d75fd9b6fe Mon Sep 17 00:00:00 2001 From: Mark Kittisopikul Date: Fri, 29 May 2026 22:09:00 -0400 Subject: [PATCH] fix: use correct attribute selector syntax in data-slot Tailwind variants MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [&_data-slot=icon] generates the invalid CSS selector `data-slot=icon`. The correct Tailwind arbitrary variant is [&_[data-slot=icon]], which produces the valid attribute selector `[data-slot=icon]`. Affected files: - packages/react/src/theme/rating.tsx ([&_data-slot=icon] × 4) - packages/react/src/theme/select.tsx ([&_data-slot=placeholder] × 1) Without this fix, esbuild and other CSS minifiers emit css-syntax-error warnings for every project that scans @material-tailwind/react source files, and the styles silently fail in browsers because the selectors are invalid per the CSS spec. Fixes #860 --- packages/react/src/theme/rating.tsx | 2 +- packages/react/src/theme/select.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/theme/rating.tsx b/packages/react/src/theme/rating.tsx index 4f3ac2e37..a355773a9 100644 --- a/packages/react/src/theme/rating.tsx +++ b/packages/react/src/theme/rating.tsx @@ -39,7 +39,7 @@ export const ratingTheme = { readonly: false, }, baseStyle: - "inline-flex items-center [&_data-slot=icon]:w-5 [&_data-slot=icon]:h-5 [&_data-slot=icon]:text-inherit [&_data-slot=icon]:cursor-pointer", + "inline-flex items-center [&_[data-slot=icon]]:w-5 [&_[data-slot=icon]]:h-5 [&_[data-slot=icon]]:text-inherit [&_[data-slot=icon]]:cursor-pointer", color: { primary: "text-primary", secondary: "text-secondary", diff --git a/packages/react/src/theme/select.tsx b/packages/react/src/theme/select.tsx index b8580021b..a169ea348 100644 --- a/packages/react/src/theme/select.tsx +++ b/packages/react/src/theme/select.tsx @@ -43,7 +43,7 @@ export const selectTriggerTheme = { ), }, baseStyle: - "flex items-center gap-4 justify-between h-max w-full outline-none focus:outline-none text-foreground bg-transparent ring-transparent border border-surface transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none data-[error=true]:border-error data-[success=true]:border-success select-none text-start data-[shape=pill]:rounded-full [&_data-slot=placeholder]:text-foreground/60", + "flex items-center gap-4 justify-between h-max w-full outline-none focus:outline-none text-foreground bg-transparent ring-transparent border border-surface transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none data-[error=true]:border-error data-[success=true]:border-success select-none text-start data-[shape=pill]:rounded-full [&_[data-slot=placeholder]]:text-foreground/60", size: { sm: "text-sm rounded-md py-1.5 px-2 ring shadow-sm", md: "text-sm rounded-md py-2 px-2.5 ring shadow-sm",