Docz: Bug/Task: Upgrade to emotion 10

Created on 4 Dec 2018 · 18Comments · Source: doczjs/docz

Emotion has upgraded several components to support server-side rendering as well as some other benefits. We will need to upgrade to...
@emotion/core & @emotion/styled

emotion-theming just needs a version upgrade.

IssueHuntFest

Source

Jared-Dev

👍3

All 18 comments

As part of this it would be convenient if the jsxPragma in mdx files was updated to use emotion's jsx function. This would allow usage of the css prop in mdx files.

jtmthf on 4 Dec 2018

❤1

@issuehuntfest has funded $40.00 to this issue. See it on IssueHunt

IssueHuntBot on 5 Dec 2018

This would allow usage of the css prop in mdx files.

THIS WOULD BE AMAZING

kentcdodds on 8 Dec 2018

I wonder if there could be a way to isolate my code from docz's code so we don't have these version mis-matches in the future.

I guess that's why storybook uses iframes. I'm not hugely excited by that, but I wonder if we could accomplish something similar by either using portals or something...

kentcdodds on 8 Dec 2018

Or maybe some manual ReactDOM.render to keep my tree outside of your tree?

kentcdodds on 8 Dec 2018

@kentcdodds it looks like mdx-js/mdx#166 is the blocker for allowing usage of the css prop in mdx files for now.

In regards to isolating emotion, it doesn't seem like that is needed. I've now tested both emotion 10 components running in emotion 9 docz and vice versa with no issues. It seems that as long as each module pulls in its specified version of emotion, they don't conflict with each other.

jtmthf on 8 Dec 2018

When I tried upgrading emotion to 10 today I got an error in the playground components I rendered. Something about context.stylis not being defined 🤔

kentcdodds on 8 Dec 2018

👍1

Same for me which prompted this issue 😞

Jared-Dev on 8 Dec 2018

thanks by the job @jtmthf, I'm merging your pull request now 🙏

pedronauck on 13 Dec 2018

🎉1

@pedronauck has submitted a pull request. See it on IssueHunt

IssueHuntBot on 13 Dec 2018

@pedronauck has rewarded $28.00 to @pedronauck. See it on IssueHunt

:moneybag: Total deposit: $40.00
:tada: Repository reward(20%): $8.00
:wrench: Service fee(10%): $4.00

IssueHuntBot on 13 Dec 2018

Landed on 0.12.16 ✅

pedronauck on 13 Dec 2018

Hooray! Thank you 👏

kentcdodds on 13 Dec 2018

🎉1

I don't get if it's still possible to use the emotion 10 css prop in mdx files, particularly in Playground components.
I used to do this with emotion 9 and it worked. How to do the same with the new version?

<Playground
  css={`
    button:not(:first-child) {
      margin-left: 10px;
    }
  `}
>
  <Button>Click me</Button>
  <Button disabled>Disabled</Button>
</Playground>