styled-components

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

https://styled-components.com

14,122 members

Channels

# stylelint-processor

Team

Announcing support for the css prop! 🎉

November 26, 2018 at 8:39am

Max StoiberTeam

@mxstbr

Announcing support for the css prop! 🎉

November 26, 2018 at 8:39am

Excited to announce that styled-components now has native support for the css prop!

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

Simply upgrade to the latest Babel plugin version and you're ready to css and roll 💃🏼

Announcement blogpost with a lot more info: https://medium.com/styled-components/announcing-native-support-for-the-css-prop-in-styled-components-245ca5252feb

Let us know what you think! 💜

Show previous messages

January 12, 2019 at 5:30am

Brian Beck@exogen

5:30am

Should the Babel plugin update have been a major breaking version bump, perhaps? It seems very presumptuous to assume that nobody had any existing props called css anywhere in their app. The Babel plugin would start hijacking those if you installed with e.g. ^1.0.0, wouldn't it?

Edited

5:33am

I'm curious about whether or not this is actually possible, based on the description of how it works. I don't see how the transformation could hoist all of the necessary local variables up into the outer scope where I assume it puts the generated component. Does it actually work?

Edited

August 20, 2019 at 5:28pm

Luis Fernando Valenzuela@bulletninja

5:28pm

Do any one of you know a way to properly highlight syntax within the css prop in VSCode? Bonus points if you know how to make colorize work there too!

5:33pm

Sorry, wrong channel (?) 🙈 (maybe should go to #help)

Edited

September 10, 2019 at 5:50am

Yoshihiro Nakamura@taneba

5:50am

@bulletninja

You can get the syntax highlight by installing vscode-styled-components extension and using css helper.