Krzysztof Żuraw

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

In this blog post I will look into how to setup Emotion css 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": [
{ "export": "jsx", "module": "@emotion/core", "import": "___EmotionJSX" }
{ "pragma": "___EmotionJSX", "pragmaFrag": "React.Fragment" }

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.

  1. 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
  1. 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.


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.