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/
Avid software developer with a mind for business.
3 things that make people truly enjoy their work
Ever wondered what is it that makes people truly enjoy their everyday working life? This article might give you some answers.
My 4 tips for Junior Developer candidates
The number of people trying to land a job in the IT world implies a need for you to stand out and attract the recruiter’s eye.