@types/rebass and Emotion

Hey, wanted to get a discussion going about this.

With the switch from styled-components to emotion as the default css-in-js in version 4.0, I think it would make sense to have the DefinetlyTyped typings follow suit.

Right now the types have been updated to match Rebass 4.0 - But, they are using styled-components as the base. This works for the most part, except for css prop, which conflicts with the Emotion definition. Sure you might mostly be using the sx prop for styling Rebass, but it will result in an error if you try to create a component that composes the BoxProps.

// This causes a TypeScript error when using Emotion
type Props = BoxProps & {
 customProp: string
}

Basically the problem is this definition:

export interface BaseProps extends React.RefAttributes<any> {
    as?: React.ElementType;
    css?:
        | StyledComponents.CSSObject
        | StyledComponents.FlattenSimpleInterpolation
        | string;
}

It should look like this when using Emotion:

export interface BaseProps extends React.RefAttributes<any> {
    as?: React.ElementType;
    css?: InterpolationWithTheme<any>
}

I’m not 100% sure of the best way to handle this in DefinetlyTyped, but I think it would make sense to have them split:

• @types/rebass
• @types/rebass_styled-components or @types/rebass/styled-components

I’ve been trying to get it solved in this pull request but surprisingly hard to get the build to pass. I might just try again in a new branch. I’ve created a local copy of the typings, that are working fine on the project i’m working on.

See also #664 which is caused by this issue.

[russellr922]

For anyone else needing to resolve this immediately, put a rebass.overrides.ts file in the src directory with the code below, add any other Prop interfaces from Rebass you may need.:

import { InterpolationWithTheme } from '@emotion/core'

declare module "rebass" {
  interface FlexProps {
    as?: React.ElementType;
    css?: InterpolationWithTheme<any>;
  }
  interface BoxProps {
    as?: React.ElementType;
    css?: InterpolationWithTheme<any>;
  }
  interface TextProps {
    as?: React.ElementType;
    css?: InterpolationWithTheme<any>;
  }
}

declare module 'react' {
  interface DOMAttributes<T> {
    css?: InterpolationWithTheme<any>;
  }
}

declare global {
  namespace JSX {
    interface IntrinsicAttributes {
      css?: InterpolationWithTheme<any>;
    }
  }
}

[lluia]

I could override the error above by pointing TS to the declaration file:

// tsconfig.json
{
  ...,
  "paths": {
    "rebass/styled-components": ["node_modules/@types/rebass"]
  }
}

Not ideal but it kinda saved the day. I’ll keep watching  👀 this issue and consider find time to fix the types on DefinitivelyTyped 👍🏻