-
-
Notifications
You must be signed in to change notification settings - Fork 97
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>,
},
});