Linting

[AdrienLemaire]

Hi there,

Sorry if this tool already exists, in which case this is a question.
We are using the Transition & Transition.Child components to handle animations in our app, and are often facing issues with timing: timeout, unmounting, css delays & durations.

When using an animation (not a transition), I think we need to define "duration-[time]" in addition to our delay & animate classes, else headlessui Transition doesn't understand when to act.

It would be very helpful to have a linting tool that would detect whether an animation cannot be played due to an incorrect timing.

Example:

<Transition.Child
            appear
            key={bubbleType}
            className={bubbleItemCn}
            enter={cn("scale-0")}
            enterTo={cn(
              "animate-show-bubble",
              "duration-[900ms]", // delay-400 + show-bubble = 900ms
              "animation-delay-400"
            )}
            entered={cn("hover:animate-hover-bubble")}
            leave={cn(
              "animation-delay-400",
              "duration-[700ms]",
              "animate-hide-bubble"
            )}
          >
            <button
              type="button"
              key={bubbleType}
              onClick={getHandleClick(bubbleType)}
              className={cn("group")}
            >
              <BubbleIcon icon={<Icon className={iconCn} />} />
            </button>
          </Transition.Child>

Can't headlessui determine on its own that "animation-delay-400" & "animate-show-bubble" (in tailwind.config "show-bubble 0.5s ease-in forwards") is going to take 900ms ?