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.
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/
I also encourage you to check what we do at TDSOFT on our brand-new blog 😎.
