Styles: Migration to Emotion v11

[ItsJonQ]

Looks like Emotion v11 came out!

---

🆙 Upgrades

I haven't tried the v11 yet. Based on the post, it looks like there are a couple of things we need to adjust in create-styles to make it compatible with v11.

Stylis

plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its README and the source code of core plugins.

I'm aware that Stylis v4 is substantially different than v3 (which was what powered Emotion and Styled Components). I haven't had any experience with Stylis v4 yet.

We'll had to rewrite the current plugins in create-styles to work with the new Stylis v4 middleware layer (previously referred to as "plugins").

Emotion Cache

The key option is now required when creating a custom instance of a cache. Please make sure it’s unique (and not equal to 'css') as it’s used for linking styles to your cache.

This one isn't a huge deal. We may have to change the prefix to something else, perhaps wp-css or something. If we do, we'll have to update all of our screenshots, and perhaps some of the create-styles code that may be looking for .css- specifically.

There's probably more to all of this. My sense is this won't be too bad. I expect all of the upgrades to happen within create-styles. A lot of the code there is modularized, which may make it easier to target and tweak things.

---

❓Should we upgrade?

There's also the question of whether we should or not. At the moment, Gutenberg is using Emotion v10.
Multiple emotion instances should not be a problem. For example, G2 Components can be used within Gutenberg without any conflicts (dedicated style system and all).

I'm not sure about Emotion V11 (if G2 Components upgrades) + Emotion V10 (Gutenberg).
I'm guessing it should be okay?

Would love some thoughts on this :)

cc'ing @saramarcondes

[ItsJonQ]

Chatted with @saramarcondes briefly on this. I think we'll hold on the upgrade for now, since Gutenberg is currently on Emotion v10.

Will keep this issue open, but removing from the "Prep" milestone

[ItsJonQ]

Bumping this! Emotion 11 was something @saramarcondes had mentioned recently during the G2 -> Gutenberg integration process.

I'll be looking into this to see how we can elegantly migrate to Emotion V11 in the create-styles package.

[ItsJonQ]

It looks like @emotion/create-instance would be a good place to start:
https://github.com/emotion-js/emotion/blob/master/packages/css/src/create-instance.js

[ItsJonQ]

Update! Looks like swapping create-emotion with @emotion/css/create-instance works!

The only hiccup is Stylis. Stylis V4 is very different (mentioned in the original issue).
We'll need to make some adjustments there to ensure the plugins work correctly

We can perhaps look to this as an example:
https://github.com/styled-components/stylis-plugin-rtl/blob/master/src/stylis-rtl.js