Adding unsupported CSS props to theme

[markodvornik]

I'm trying to add a CSS prop wordWrap and wordBreak to theme.styles.code and TypeScript compiler throws an error:

Types of property 'code' are incompatible.
Type '{ display: string; fontFamily: string; fontSize: number; color: string; bg: string; borderRadius: string; my: number; p: number; maxWidth: string; wordWrap: string; wordBreak: string; }' is not assignable to type 'ThemeUICSSObject | ThemeDerivedStyles | undefined'.
Type '{ display: string; fontFamily: string; fontSize: number; color: string; bg: string; borderRadius: string; my: number; p: number; maxWidth: string; wordWrap: string; wordBreak: string; }' is not assignable to type 'ThemeUICSSObject'.
Types of property 'wordBreak' are incompatible.
Type 'string' is not assignable to type 'ThemeUICSSObject | ThemeDerivedStyles | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "normal" | "break-word" | "break-all" | "keep-all" | ("inherit" | ... 9 more ... | undefined)[] | ((theme: Theme) => "inherit" | ... 9 more ... | undefined) | undefined'.ts(2322)

What is the correct way to use unsuported props? Is it something like extending Styled System?

[hasparus]

As a "smart fix", you could use TypeScript declaration merging to add wordBreak and wordWrap.

As a quick fix, you can spread an object with unsupported properties onto theme.styles.code.

styles: {
  code: {
    p: 2,
    fontFamily: 'Fira Code',
    ...({ banana: 'wow' } as {})
  }
}

This seems like a valid bug though. Shouldn't we update our types to include wordBreak and wordWrap?

[atanasster]

The following seems to work for me, can you guys please post a repro?

theme.ts

import { Theme } from 'theme-ui'

const theme: Theme = {
  styles: {
    code: {
      wordBreak: 'break-all',
      wordWrap: 'normal',
    },
  },
}

For other css props that are not supported by csstype, the solution from @hasparus should work

[hasparus]

The following seems to work for me, can you guys please post a repro?

Ha! An award for careful reading. I trusted the title and didn't read the error :P

@macakraca your problem is not with Theme UI. Your problem is with TypeScript. TypeScript not having a full type inference.

I wrote about it in the docs. There's a solution for you there:
https://dev.theme-ui.com/guides/typescript/#union-types-are-not-inferred-without-explicit-annotation