How to properly extend JSX attributes? #1187

ohkimur · 2023-05-16T14:46:21Z

ohkimur
May 16, 2023

I tried to extend the JSX HTMLAttributes so that I can edit the css property. I need to do this because I use twin.macro and I need to run the files through babel first before giving them to mitosis. The only way how I managed to do that at the moment is by copying the content of the jsx-rundime.d.ts file, editing it, and adding it to the typescript compiler.

This is far from ideal since I'd prefer to be able to do something like this, which is much more simple:

import '@builder.io/mitosis/jsx-runtime'
import { JSX as MitosisJSX } from '@builder.io/mitosis/jsx-runtime'

type TwStyle = {
  [key: string]: string | number | TwStyle
}

declare module '@builder.io/mitosis/jsx-runtime' {
  namespace JSX {
    type CSS =
      | (Partial<CSSStyleDeclaration> & {
          [key: string]: Partial<CSSStyleDeclaration> | string
        })
      | TwStyle
      | Record<string, unknown>

    interface HTMLAttributes<T>
      extends MitosisJSX.AriaAttributes,
        MitosisJSX.DOMAttributes<T> {
      css?: CSS | { [key: string]: CSS | undefined }
    }
  }
}