Plan for migration to Emotion 10 or styled-components
See original GitHub issueSee https://github.com/emotion-js/emotion/issues/637 for the running Emotion 10 API changes. I think the two that affect us the most are:
-
Apparently function interpolations in
css
tagged template literals is going to be deprecated? I didn’t see anything about it in the issue, but got a warning in the console when I tried it recently. -
Static extraction is going to be deprecated entirely. I’m honestly not sure whether/how this affects rendering, but I think the idea is that the
<style>
elements are just rendered alongside (hopefully before?) the styled elements rather than going into the<head>
, so in theory there wouldn’t be any FOUC.
Alternatively, we could just move over to using styled-components and keep the API we’ve got. ✨
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
Migrating to Emotion 10
Incremental Migration The upgrades to Emotion 10 are split into two parts. The first part can be done automatically by using eslint-plugin-emotion ....
Read more >Migrating to emotion 10 docs unclear relating to theming ...
Mainly it promotes using jsx pragma and css prop over styled components API. We believe that styled components is somewhat unnecessary (although ...
Read more >How we migrated 541 components from Styled ... - Storybook
Last quarter we migrated from Styled Components to Emotion across all our codebases. That meant refactoring 541 components across five ...
Read more >Migrate from styled-components - xstyled
You may want to use styled-components Babel macro to use Babel plugin with zero-configuration. You don't need to specify additional topLevelImportPaths config ...
Read more >Emotion 10: CSS-in-JS with Flexible Scoped and Global ...
A new Global component enables dynamic global styling. Those changes contribute to enabling zero-configuration server-side rendering. Emotion ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
We might want to wait until Emotion 10 is fully out though so we can weigh the two!
Thanks for pointing that out, @colebemis. It seems like we’d want to do this in a major version regardless, so renaming the prop on our end would be acceptable, IMO. We’d just want to support upgrading it via the codemods from #320 — which, as @emplums relayed to me, were not helpful in getting the Actions UI upgraded because they use TypeScript 😱