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! πŸŽ‰

Max Stoiber

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 πŸ’…πŸŽ„πŸŽ…

πŸ’… styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…

Max Stoiber

Written by

Technical cofounder of Spectrum.chat, creator of react-boilerplate, co-creator of πŸ’… styled-components and maintainer of KeystoneJS and micro-analytics.

πŸ’… styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…