Releasing support for the css prop in create-react-app 💅💖

The styled-components Babel macro now has full support for the brand new css prop. Go from zero to React app with css prop in fifteen seconds! 🎉

We recently announced native support for the css prop in styled-components when using our Babel plugin. Unfortunately, create-react-app doesn’t let you add any custom Babel plugins… but as of v2 they do support Babel macros.

So, we got to work and rebuilt the css prop transform to also work as a macro. Today, we’re excited to introduce support for the css prop in create-react-app! 🎉

From zero to css prop in fifteen seconds 🏎💨

There’s only three simple steps to kickstart your new React app with css prop support:

1. Create your React app: create-react-app myapp (if you already have an existing cra-based app, skip this step)
2. Install styled-components: npm install --save styled-components
3. Use the Babel macro: import 'styled-components/macro'

That’s it, now you’re ready to css and roll! 🎉

import 'styled-components/macro';
<h1 css="color: papayawhip">Hello css prop</h1>

Note: Babel macros only run on files they are imported in, so you have to add the styled-components/macro import in every file that uses the css prop.

Huge shoutout to Satya and Luc for their help with this feature! 💖👏

From all of us in the styled-components core team, we hope you enjoy the css prop, stay stylish and merry Christmas 💅🎄🎅