[bug]: className in CardHeader causes vite minify warnings

[kapitalistn]

Describe the bug

Got this component via CLI:

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
	return (
		<div
			data-slot="card-header"
			className={cn(
				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
				className
			)}
			{...props}
		/>
	)
}

Which causes:

▲ [WARNING] Unexpected ")" [css-syntax-error]

<stdin>:7:6765:
  7 │ ...:grid-cols-\[1fr_auto\]:has(:is()){grid-template-columns:1fr aut...
    ╵                                    ^

After some investigation, exactly this: has-[data-slot=card-action]:grid-cols-[1fr_auto]
causes warnings.

Affected component/components

CardHeader

How to reproduce

1. Setup React/Vite/TS
2. Install tailwind using Tailwind v4 Setup Guid
3. Configure ShadCN.
4. npx shadcn@latest add card
5. Use this card somewhere
6. npm run build

Codesandbox/StackBlitz link

No response

Logs

▲ [WARNING] Unexpected ")" [css-syntax-error]

    <stdin>:7:6765:
      7 │ ...:grid-cols-\[1fr_auto\]:has(:is()){grid-template-columns:1fr aut...
        ╵                                    ^

System Info

{
	"name": "web",
	"private": true,
	"version": "0.0.0",
	"type": "module",
	"scripts": {
		"dev": "vite",
		"build": "tsc -b && vite build --debug",
		"lint": "eslint .",
		"preview": "vite preview"
	},
	"dependencies": {
		"@hookform/resolvers": "^4.1.3",
		"@radix-ui/react-aspect-ratio": "^1.1.2",
		"@radix-ui/react-avatar": "^1.1.3",
		"@radix-ui/react-checkbox": "^1.1.4",
		"@radix-ui/react-dialog": "^1.1.6",
		"@radix-ui/react-label": "^2.1.2",
		"@radix-ui/react-separator": "^1.1.2",
		"@radix-ui/react-slot": "^1.1.2",
		"@radix-ui/react-tooltip": "^1.1.8",
		"@tailwindcss/vite": "^4.0.14",
		"@tanstack/react-router": "^1.114.17",
		"@tanstack/react-table": "^8.21.2",
		"class-variance-authority": "^0.7.1",
		"i18next": "^24.2.3",
		"i18next-browser-languagedetector": "^8.0.4",
		"i18next-http-backend": "^3.0.2",
		"lucide-react": "^0.482.0",
		"react": "^19.0.0",
		"react-dom": "^19.0.0",
		"react-i18next": "^15.4.1",
		"tailwind-merge": "^3.0.2",
		"tailwindcss": "^4.0.14",
		"tailwindcss-animate": "^1.0.7",
		"zod": "^3.24.2"
	},
	"devDependencies": {
		"@eslint/js": "^9.22.0",
		"@tanstack/react-router-devtools": "^1.114.21",
		"@tanstack/router-plugin": "^1.114.17",
		"@types/node": "^22.13.10",
		"@types/react": "^19.0.10",
		"@types/react-dom": "^19.0.4",
		"@vitejs/plugin-react-swc": "^3.8.0",
		"eslint": "^9.22.0",
		"eslint-plugin-react-hooks": "^5.2.0",
		"eslint-plugin-react-refresh": "^0.4.19",
		"globals": "^16.0.0",
		"typescript": "~5.8.2",
		"typescript-eslint": "^8.26.1",
		"vite": "^6.2.2",
		"vite-plugin-svgr": "^4.3.0"
	}
}

Before submitting

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

[oluijks]

Have the same warning, the generated css looks like this:

.has-\[data-slot\=card-action\]\:grid-cols-\[1fr_auto\]:has(:is()) {
  grid-template-columns: 1fr auto;
}

For some reason the is() has no selector argument...

[drimov]

Have the same warning, i came with a little trick but do the work:

//classname for CardHeader
 has-[data-slot=card-action]:grid-cols-\[1fr_auto\]

and vite build without error

[sharasheero]

Changing

has-[data-slot=card-action]:grid-cols-[1fr_auto]

to

has-data-[slot=card-action]:grid-cols-[1fr_auto] 

(moving the [ after data-) should fix the issue.

[FatahChan]

opened a pr with a fix