Install babel-plugin-styled-components in create-react-app

Create react app v2 has support for babel macros. There is a NPM package for styled-components macro. Just add the package to create react app and you are done.

yarn add styled-components.macro --dev

Doing this does not require eject of CRA.

There is a much easier way of achieving this and it doesn't require ejecting or any additional packages to be installed:

Instead of importing styled-components like this:

import styled from 'styled-components';

Import it like this:

import styled from 'styled-components/macro';

If that isn't working for you it is likely that you need to update styled-components or react. Further information can be found in the styled-components documentation.

After some tips of Daniel, I tried to install the babel plugin another way. As it turns out, you can not add a babel plugin to a create-react-app (https://github.com/facebookincubator/create-react-app/issues/2611) without ejecting it and to install the plugin by hand. To do that, i ran those commands:

npm run eject
npm install --save-dev babel-plugin-styled-components

After that, I got a whole bunch of new files and my package.json got way bigger but also included a section for babel like this:

  "babel": {
    "presets": [
      "react-app"
    ]
  }

all was left to do was to add the babel-plugin there, to be able to use it. So for the styled-components Plugin, my babel section in the package.json now looks like this:

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": ["babel-plugin-styled-components"]
  }

Now the plugin works and I am happy =) Thanks Daniel for pointing me in the right direction!