53 lines
2.0 KiB
Markdown
53 lines
2.0 KiB
Markdown
# CopilotKit ESLint Rules
|
|
|
|
## `copilotkit/require-cpk-prefix`
|
|
|
|
CopilotKit v2/react uses Tailwind v4's `prefix(cpk)` feature (configured in `src/styles/base.css`) to scope all generated CSS. This prevents CopilotKit's styles from colliding with the host application's own Tailwind classes.
|
|
|
|
The prefix means every Tailwind utility in component code must be written as `cpk:bg-white` instead of `bg-white`. If you forget the prefix, the class silently produces no CSS — there's no build error, no runtime error, just missing styles.
|
|
|
|
This ESLint rule catches that mistake inline in your editor.
|
|
|
|
### Prefix ordering (important!)
|
|
|
|
In Tailwind v4 with `prefix(cpk)`, the prefix **must come before all variants**:
|
|
|
|
```
|
|
cpk:dark:hover:bg-white ✓ generates CSS
|
|
dark:hover:cpk:bg-white ✗ generates NO CSS (silent failure)
|
|
```
|
|
|
|
This rule detects both problems:
|
|
|
|
1. **Missing prefix** — `bg-white` → `cpk:bg-white`
|
|
2. **Wrong prefix position** — `dark:cpk:bg-white` → `cpk:dark:bg-white`
|
|
|
|
### What it checks
|
|
|
|
- `className="..."` string literals
|
|
- ``className={`...`}`` template literals (including expressions inside `${}`)
|
|
- `cn(...)`, `twMerge(...)`, `cva(...)`, `clsx(...)` arguments
|
|
- Ternary and logical expressions inside className values
|
|
|
|
### Auto-fix
|
|
|
|
The rule is auto-fixable. Run `eslint --fix` or use your editor's quick-fix (`Cmd+.`) to insert or reposition the `cpk:` prefix automatically.
|
|
|
|
Variants are handled correctly — `dark:hover:bg-white` becomes `cpk:dark:hover:bg-white`.
|
|
|
|
### Examples
|
|
|
|
```tsx
|
|
// Bad — missing prefix (will warn)
|
|
<div className="flex items-center bg-white" />
|
|
<div className={cn("flex", isActive && "bg-blue-500")} />
|
|
|
|
// Bad — prefix in wrong position (will warn)
|
|
<div className="dark:cpk:bg-white hover:cpk:text-blue-500" />
|
|
|
|
// Good — no warning
|
|
<div className="cpk:flex cpk:items-center cpk:bg-white" />
|
|
<div className={cn("cpk:flex", isActive && "cpk:bg-blue-500")} />
|
|
<div className="cpk:dark:bg-white cpk:hover:text-blue-500" />
|
|
```
|