import 'twin.macro';

import { css as cssImport } from '@emotion/react';
import { CSSInterpolation } from '@emotion/serialize';
import styledImport from '@emotion/styled';

declare module 'twin.macro' {
  // The styled and css imports
  const styled: typeof styledImport;
  const css: typeof cssImport;
}

declare module 'react' {
  // The css prop
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    css?: CSSInterpolation;
    /**
     * Adding optional `tw` for HTML attributes
     * @see https://github.com/ben-rogerson/twin.macro/issues/442#issuecomment-1001923869
     */
    tw?: string;
  }
  // The inline svg css prop
  interface SVGProps<T> extends SVGProps<SVGSVGElement> {
    css?: CSSInterpolation;
    /**
     * Adding optional `tw` for SVG attributes
     * @see https://github.com/ben-rogerson/twin.macro/issues/442#issuecomment-1001923869
     */
    tw?: string;
  }
}