Releasing styled-components v4 finalย ๐ŸŽŠ

After a couple weeks of beta testing styled-components v4 is now officially ready for primetime!

If you didnโ€™t read the styled-components v4 announcement, hereโ€™s a quick primer on whatโ€™s in this release:

• Smaller and much, much faster
• A refreshed createGlobalStyle
  API, replacing the old injectGlobal
• Support for the "as" prop, a dynamic alternative toย .withComponent
• Removal of Comp.extendin favor of unifying styled(Comp)
• Full compliance for React v16
• Native support for ref on any styled component

Read the announcement post for the full details on these.

Thatโ€™s a lot already, but we havenโ€™t been sleeping since the initial announcement! Hereโ€™s what new in the final release:

• A brand-new Babel macroso you can get all the goodies of the Babel plugin in create-react-app! ๐ŸŽฃ
• Fully automatic codemods to auto-magically migrate most of your codebase from to v4 ๐ŸŽฉโœจ
• A test util for Enzyme so that unit testing your components is easier
• All the bugfixes since the initial beta release (shoutout to all the early testers for their invaluable feedback)

Announcing the styled-components Babel Macroย ๐ŸŽฃ

Thanks to our contributor Luc Leray weโ€™ve now got a Babel Macro! This means create-react-app users can get all the benefits of the styled-components Babel plugin (most notably, nicer class names) without needing to eject ๐ŸŽ‰

All you have to do is change your import statements to "styled-components/macro" and thatโ€™s it:

import styled from "styled-components";

๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡

import styled from "styled-components/macro";

5 Minute Migration ๐ŸŽฉโœจ

Weโ€™ve worked hard on making this upgrade as easy as possible, so for most of you thereโ€™s only three steps to upgrade your entire codebase to v4:

1. Install the latest styled-components version by running npm install [email protected] [email protected]
2. Install the codemods globally with npm install -g styled-components-codemods
3. Run the codemods on your codebase with styled-components-codemods v4 src/**/*.js. They will auto-magically move all your Comp.extend usages to styled(Comp) and your injectGlobal usages to createGlobalStyle!

If youโ€™re using TypeScript, youโ€™ll also need to upgrade your typings to the new ones from DefinitelyTyped: npm install @types/[email protected]

Note: see the website for more detailed instructions and potential edge cases, and make sure that youโ€™re on React v16.3+, which is required for styled-components v4 due to the new ref system.