Statically typed theme in EmotionJS

When designing a frontend application it is important to think ahead about styling. There are many approaches to style a web app, but I would like to introduce you to my favorite one— EmotionJS 👩‍🎤 working under TypeScript watch.

Photo by Robert Katzki on Unsplash

What’s that for?

At TDSOFT.com we are creating various B2B products which colours/fonts vary for each client. The EmotionJS with statically typed theme instances is a great fit for us for that use case.

But this setup will be a great Developer Experience boost for you in any type of project.

Emotion ≤ 10

In order to create a typed styled instance, you have to use the CreateStyled utility type to which you pass your type definition. Then such type is asserted on regular styled utility imported from “@emotion/styled”. You can use exported customStyledInstance anywhere in your app and take advantage of your typed theme from now on.

Emotion ≥ 11 (ReactJS example)

In the newest EmotionJS release, the CreateStyled type has been replaced with TypeScript namespaces.

To create a typed theme instance, you have to create an “emotion.d.ts” file in your project root directory and setup it as follows:

Key Benefits of using EmotionJS 👩‍🎤

• Static analysis and IDE autocompletion at dev time

• Easly reproductive theme system

• Great developer experience with features such as source maps, labels, and testing utilities

You can read more about emotion in the great documentation page they have: https://emotion.sh/