Skip to content

[Feature request] Support satisfies operator in TypeScript #396

@rendob

Description

@rendob

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>,
  },
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions