-
-
Notifications
You must be signed in to change notification settings - Fork 105
Description
Is your feature request related to a problem? Please describe.
When using this plugin with @typescript-eslint/parser, any classname errors within TypeScript satisfies expressions are not detected.
// this is error
<div className={"invalid-name"} />
// this should be error, but not
<div className={"invalid-name" satisfies string} />Describe the solution you'd like
@typescript-eslint/parser parses satisfies as TSSatisfiesExpression. Since this node contains the expression it decorates, the plugin just need to unwrap it and lint the content.
Additional context (More practical usecase)
Suppose we want to style a button depending on its type (button, submit, reset).
With tailwind-variants, this can be done as below.
The plugin can detect invalid classnames.
import { tv } from 'tailwind-variants';
const buttonStyle = tv({
base: "rounded-md px-6",
variants: {
type: {
button: "bg-blue-500 invalid-classname", // this is error
submit: "bg-green-500",
reset: "bg-gray-300",
},
},
});Then, we want to use satisfies to ensure that each of the property names is correct.
However, when the object is decorated with satisfies, the plugin does not report any errors.
import { tv } from 'tailwind-variants';
type ButtonType = NonNullable<React.ComponentProps<"button">["type"]>;
const buttonStyle = tv({
base: "rounded-md px-6",
variants: {
type: {
button: "bg-blue-500 invalid-classname", // this should be error, but not
submit: "bg-green-500",
reset: "bg-gray-300",
} satisfies Record<ButtonType, string>,
},
});