Announcing native support for the css prop in styled-components πŸŽ‰

A new, convenient way to quickly style and iterate on your components and their boundaries has landed in styled-components πŸ’…

As Ryan Florence once said, the essence of working with components is worrying about the right lines to draw in your app and then filling in the shapes they create with components.

Invented by Sunil Pai in glamor, the css prop has taken over the CSS-in-JS world as a convenient way to build components while staying flexible with the β€œlines”, their boundaries.

const MyButton = () => (
<button
css={`
color: papayawhip;
background: palevioletred;
`}
>
Click me!
</button>
)

By declaring the CSS inline, it’s simple to move elements around your app and iterate on them, allowing you to keep moving fast in the early stages. Then, once you feel comfortable with the boundaries you’ve chosen, you can quickly turn them into styled components and lock them into place.

So far, to get support for the cssprop in styled-components, you had to use user-land libraries such as rebass. They worked great, but required a lot of manual work and the implementation wasn’t the most performant.

Today, we’re excited to announce native support for the css prop in styled-components! πŸŽ‰

Enabling support for the cssΒ prop

All you have to do to enable support for the css prop is to upgrade to the latest version of the styled-components Babel plugin:

npm install --save-dev babel-plugin-styled-components@latest

If you aren’t using the Babel plugin yet, you also have to add it to yourΒ .babelrc.

That’s all there is to it, now you’re ready to css and roll! πŸ’ƒπŸΌ

Using the cssΒ prop

Using the css prop is as simple as adding it to any element in your app. It supports everything a normal styled component supports πŸ’ͺ, including custom components, adapting based on props and theming:

<h1 css="color: palevioletred;">
The css prop
</h1>
<Button
primary
css={css`
color: ${props => props.theme.colors.text};
background: ${props => props.theme.colors.primary};
border-radius: ${props => props.primary ? '4px' : '5px'};
`}
>
Click me
</Button>

Under the hood, the Babel plugin turns any element that has a css prop into a styled component. For example, if you were to write this BlueButton component:

const BlueButton = (props) =>
<button css="color: blue; padding: 1em;" {...props} />
<BlueButton css="background: blue; color: white;">Hey!</BlueButton>

The Babel plugin would turn it into this:

import styled from 'styled-components';
const StyledButton = styled('button')`
color: blue;
padding: 1em;
`
const BlueButton = (props) => <StyledButton {...props} />;
const StyledBlueButton = styled(BlueButton)`
background: blue;
color: white;
`
<StyledBlueButton>Hey!</StyledBlueButton>

Yep, it even adds the styled-components import automatically so you don’t have to think about it. This mechanism also means that support for the css prop adds exactly 0.0kB to the runtime of the library. 😎

Huge shoutout to Satyajit Sahoo, who came up with this ingenious technique!

We hope you enjoy the css prop. πŸ’œ If you want to learn more check out the documentation, and let us know what you think in the community!


As always, stay stylish out there. πŸ’…