From 84ec2f60790781ec7daaa72b54dc588bef207a20 Mon Sep 17 00:00:00 2001 From: FatahChan Date: Thu, 20 Mar 2025 11:01:20 +0200 Subject: [PATCH] fix(v4): card - css syntax warning in tailwind v4 and vite (#6955) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit when building using vite and tailwind vite plugin this following warning appears ``` rendering chunks (10)...warnings when minifying css: ▲ [WARNING] Unexpected ")" [css-syntax-error] grid-cols-\[1fr_auto\]:has(:is()){grid-template-columns:1fr ^ ``` this is fixed by complying to tailwind new way of writing data attribute documented [here](https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes) change ``` [data-slot=card-action]: ``` to ``` data-[slot=card-action]: ``` resolves https://github.com/shadcn-ui/ui/issues/6930 --- apps/v4/registry/new-york-v4/ui/card.tsx | 2 +- apps/www/public/r/styles/new-york-v4/card.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/v4/registry/new-york-v4/ui/card.tsx b/apps/v4/registry/new-york-v4/ui/card.tsx index 99541f3db3..d05bbc6c74 100644 --- a/apps/v4/registry/new-york-v4/ui/card.tsx +++ b/apps/v4/registry/new-york-v4/ui/card.tsx @@ -20,7 +20,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
) {\n return (\n \n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n", + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n", "type": "registry:ui" } ]