VNodeStyle type checking error for "delayed" and "remove" styles

Author: zaccritesCreated Sep 12, 2024Updated Nov 24, 2024

Hello. I am getting a typing error on VNodeStyles which use delayed and/or remove, despite following the examples from the README almost exactly.

typescript

const x: VNodeStyle = {
    opacity: "0",
    transition: "opacity 1s",
    delayed: {
        opacity: "1",
    },
    remove: {
        opacity: "0",
    }
};

Type '{ opacity: string; delayed: { opacity: string; }; remove: { opacity: string; }; }' is not assignable to type 'VNodeStyle'.
  Type '{ opacity: string; delayed: { opacity: string; }; remove: { opacity: string; }; }' is not assignable to type 'Record<string, string>'.
    Property 'delayed' is incompatible with index signature.
      Type '{ opacity: string; }' is not assignable to type 'string'.ts(2322)

This works fine at runtime, and I was able to fix the typing error by making the following change in style.d.ts:

diff

import { Module } from "./module.js";
export type ElementStyle = Partial<CSSStyleDeclaration>;
- export type VNodeStyle = ElementStyle & Record<string, string> & {
+ export type VNodeStyle = ElementStyle & {
    delayed?: ElementStyle & Record<string, string>;
    remove?: ElementStyle & Record<string, string>;
};
export declare const styleModule: Module;

It is possible that the problem was introduced in this refactor.

Thanks!

Source: snabbdom/snabbdom

View original on GitHub View discussion on GitHub