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

08 August 2020

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.

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.

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
  }
}

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.