How to setup emotion css prop to work with Parcel & TypeScript

In this blog post I will look into how to setup Emotioncss prop with Parcel& TypeScript. There are two ways those tools work with each other. You can either use /** @jsx jsx */ pragma on every file you want to use css prop or you can tell babel to do it for you. I’m a bit lazy so I prefer the second option. Below you will find a quick guide on how to do it.

1. Create the .babelrc file inside the root of your repository. Put the following contents inside:

{"plugins":[["transform-inline-environment-variables"],["babel-plugin-jsx-pragmatic",{"export":"jsx","module":"@emotion/core","import":"___EmotionJSX"}],["@babel/plugin-transform-react-jsx",{"pragma":"___EmotionJSX","pragmaFrag":"React.Fragment"}],["emotion"]]}

In essence you are telling babel to add jsx-pragma when you are using css prop. If you want to know more I recommend this issue on github.

2. Edit tsconfig with jsx & types

{"compilerOptions":{// the rest of configuration"jsx":"preserve",// for babel to work"types":["@emotion/core"]// you can now use css prop on e.g div and TypeScript won't shout at you}}

3. Let parcel install needed deps. Run command for building your parcel project. Parcel is smart enough to install needed dependencies by yourself. If you happen to get an error: Conflicting babel versions found in .babelrc. Make sure all of your plugins and presets depend on the same major version of babel. I recommend to add "@babel/core": "7.10.5" as dev dependency inside package.json and run npm install again.

Summary

In this blog post, I’ve looked into how to setup Emotion css prop with Parcel & TypeScript. You can find an example repo on my github.