question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Plan for migration to Emotion 10 or styled-components

See original GitHub issue

See 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:

  1. 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.

  2. 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:closed
  • Created 5 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
emplumscommented, Nov 16, 2018

We might want to wait until Emotion 10 is fully out though so we can weigh the two!

1reaction
shawnbotcommented, Nov 15, 2018

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 😱

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found