Emotion 11 Gotchas and learnings

[mannycarrera4]

💅 Emotion 11 Gotchas

• In Storybook version 6.3 or less, they use emotion 10. This was causing conflicting imports and our components where using Storybooks emotion 10. To fix this, we had to create an alias to tell storybook to use emotion 11. You can read more on the issue and those who found similar solutions in this thread: Storybook 6.1.0-rc.4 & Emotion 11.0 support storybookjs/storybook#13145

• We extend Emotions theme object like so:

declare module '@emotion/react' {
  export interface Theme {
   canvas: CanvasTheme;
  }
 }
export type EmotionCanvasTheme = {canvas: CanvasTheme};

This allows us to augment the existing Theme object from emotion

• Along with Emotion 11, we upgraded Typescript to 4.1. Because of this, we had to upgrade other dependencies to match the latest versions of Emotion 11 such as @typescript-eslint/eslint-plugin and @typescript-eslint/parser. In this upgrade, we had to update some types along the way.

• In Emotion 11, they’ve upgraded to use csstype3.0.0 to type check CSSObject. If you’re using type check on your styled objects, it’s recommended to upgrade this and any types that might have changed.

• We have a use case where we need to forward the as prop if you are trying to styled a react component. In Emotion’s types for styled, their as prop is of type React.ElementType. In our codebase we had React.ElementType<any>. We’ve updated this to match Emotions as type so that we can forward that prop on to our components.

• Emotion 11 added the as prop to all HTML elements, but they did not for components. This means we still need to use the StyledType for components. My guess is Emotion figures as works properly for elements, but no guarantee it works with components. However it should work for our components using createComponent and verified by verifyComponent

• For example:

const StyledDiv = styled('div')({})
 
 <StyledDiv as="span" /> // works
 
 const StyledBox = styled(Box)({})
 
 <StyledBox as="span" /> // TS error - no as prop
 
 // you have to do this instead like before
 const StyledBox = styled(Box)<StyledType>({})

[vibdev]

Couple gotchas I found while testing

import {CSSObject} from '@emotion/styled'; and import { CSSObject } from '@emotion/core' do not have compatible types

---

The css attribute is different type depending if you use the pragma vs babel:

Babel, uses @emotion/core

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

JSX, uses @emotion/react

interface Theme {}

type WithConditionalCSSProp<P> = 'className' extends keyof P
  ? string extends P['className' & keyof P]
    ? { css?: Interpolation<Theme> }
    : {}
  : {}

---

These were leading to annoying type errors for our repo using CKR 7, the babel plugin, and the css attribute.

---

Luckily it seems like the css function can handle all the differences. In our case we needed to change:

Broken

css={themeRTL(styles.landing)}

Fixed

css={css(themeRTL(styles.landing))}

---

Hook to wrap RTL transformation and css function:

import { css } from '@emotion/react'
import { useThemeRTL } from '@workday/canvas-kit-labs-react/common'
import type { CSSProperties } from '@workday/canvas-kit-react/tokens'

export function useThemedStyles() {
	const { themeRTL, theme } = useThemeRTL()

	const themedStyles = React.useMemo(() => {
		return (...cssObject: CSSProperties[]) => {
			return css(themeRTL(...cssObject))
		}
	}, [themeRTL])

	return { themedStyles, theme }
}

Usage:

const MyComponent = () => {
	const { themedStyles } = useThemedStyles()
	return (
		<div css={themedStyles(styles.landing)}>
			Hello World
		</div>
	)
}

[mannycarrera4]

Ah good find @vibdev! I think we ran into something similar but didn't document it because the type led to the same structure from @emotion/styled and @emotion/react but hadn't looked into the difference of babel and pragma. Thanks for documenting this as well!

[anicholls]

@vibdev I was able to get around the css prop issues by setting the jsxImportSource in our tsconfig! 🎉

{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react"
  }
}

Discovered here: https://dev.to/glocore/configure-emotion-with-your-vite-react-project-7jl

[willklein]

That compiler option was needed for another use case, thanks!

[jamesfan]

After bumping our Gatsby project to Emotion 11 and CK7, I was getting a number of Property 'css' does not exist on type... errors. I was able to get rid of these errors by adding this directive to an any TS file in the project source (which file didn't seem to matter):

/// <reference types="@emotion/react/types/css-prop" />

See the Emotion docs for more info. We use gatsby-plugin-emotion which uses @emotion/babel-preset-css-prop.