Upgrade Stylis to v4 (#1817)

* Stylis v4 tryout

* Move @import rules in test to be first

* Improved compat plugin

* Add tests for orphanated pseudos

* orphanated -> orphaned

* Upgrade stylis and improve compat plugin

* Improve compat plugin - avoid double compilation

* Shorten compat plugin a little bit

* Add guard for global top-level rules in the compat plugin

* Fix tagged templates minifier (#1836)

* Add TS test to check for excessive instantiation regressions

* Fix tagged templates minifier

* Use non-forked stylis for minification

* Pass missing argument to toInputTree and fix isAutoInsertedRule for parent-less rules

* Temporarily add @emotion/stylis as dep of @emotion/babel-plugin

* Update snapshots

* Make compat plugin be always included

* move removeLabel into omnipresentPlugins

* Stop special-casing @import insertion

* fix getServerStylisCache

* Remove outdated docs around stylisPlugins and prefix options

* Add changesets

* Add note about prefixer being just a plugin to stylisPlugins docs

* Actually use officially published Stylis v4

* Improve error message about incorrect @import insertion

* Fix flow errors

* Reword error messages and changeset content

Co-authored-by: Mitchell Hamilton <mitchell@hamil.town>

* update snapshots

* Remove mention of `@import` not being usable in `css` calls as it wasnt true for @emotion/react+<Global/>

* Add mention to the changeset about where one can find a prefixer

* Update .changeset/warm-ties-drop.md

Co-authored-by: Mitchell Hamilton <mitchell@hamil.town>

.changeset/lovely-wasps-reply.md

@@ -0,0 +1,5 @@
+---
+'@emotion/babel-plugin': patch
+---
+
+Fixed an issue in our tagged template expressions minifier which has caused whitespace before nested orphaned pseudo selectors being incorrectly removed. In a selector like `& :hover` the whitespace before colon has a semantic meaning and needs to be preserved.

.changeset/tough-fans-do.md

@@ -0,0 +1,5 @@
+---
+'@emotion/sheet': major
+---
+
+`@import` rules are no longer special-cased - they no longer are always inserted at the beginning of the stylesheet. The responsibility to put them first has been moved to a consumer of this package.

.changeset/warm-ties-drop.md

@@ -0,0 +1,15 @@
+---
+'@emotion/cache': major
+'@emotion/css': major
+'@emotion/react': major
+'@emotion/styled': major
+---
+
+The parser we use ([Stylis](https://github.com/thysultan/stylis.js)) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀
+
+It has been completely rewritten and comes with some breaking changes. Most notable ones that might affect Emotion users are:
+
+- 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](https://github.com/thysultan/stylis.js#middleware) and the source code of core plugins.
+- vendor-prefixing was previously customizable using `prefix` option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The `prefix` option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not.
+- Prefixer is now just a plugin which happens to be put in default `stylisPlugins`. If you plan to use custom `stylisPlugins` and you want to have your styles prefixed automatically you must include prefixer in your custom `stylisPlugins`. You can import `prefixer` from the `stylis` module to do that.
+- `@import` rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles.

.changeset/witty-dots-return.md

@@ -0,0 +1,5 @@
+---
+'@emotion/utils': major
+---
+
+`insertStyles` no longer calls `cache.insert` with a scoped class name as a selector when inserting keyframes. The change is internal and has no effect on Emotion users.

docs/cache-provider.mdx

@@ -15,16 +15,6 @@ const myCache = createCache({
   stylisPlugins: [
     /* your plugins here */
   ],
-  // prefix based on the css property
-  prefix: key => {
-    switch (key) {
-      case 'flex':
-        return false
-      case 'transform':
-      default:
-        return true
-    }
-  }
 })
 
 render(

docs/ssr.mdx

@@ -175,16 +175,6 @@ export const createMyCache = () =>
     stylisPlugins: [
       /* your plugins here */
     ],
-    // prefix based on the css property
-    prefix: key => {
-      switch (key) {
-        case 'flex':
-          return false
-        case 'transform':
-        default:
-          return true
-      }
-    }
   })
 
 export const myCache = createMyCache()

package.json

@@ -257,8 +257,6 @@
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.5",
     "react-test-renderer": "16.8.6",
-    "stylis": "3.5.4",
-    "stylis-rule-sheet": "^0.0.10",
     "svg-tag-names": "^1.1.1",
     "through": "^2.3.8",
     "unified": "^6.1.6",

packages/babel-plugin/__tests__/__snapshots__/css.js.snap

@@ -710,7 +710,7 @@ import { css } from '@emotion/react';
 function media(...args) {
   return (
     /*#__PURE__*/
-    css(\\"@media (min-width:100px){\\",
+    css(\\"@media (min-width: 100px){\\",
     /*#__PURE__*/
     css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:media;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\")
   );

packages/babel-plugin/__tests__/__snapshots__/vanilla-emotion.js.snap

@@ -81,44 +81,44 @@ css(process.env.NODE_ENV === \\"production\\" ? {
 
 /*#__PURE__*/
 css(process.env.NODE_ENV === \\"production\\" ? {
-  name: \\"1q5yx8v\\",
-  styles: \\"/* @noflip */ left:1px\\"
+  name: \\"14fte1c\\",
+  styles: \\"/* @noflip */left:1px\\"
 } : {
-  name: \\"1q5yx8v\\",
-  styles: \\"/* @noflip */ left:1px\\",
+  name: \\"14fte1c\\",
+  styles: \\"/* @noflip */left:1px\\",
   map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5jc3NgXG4gIC8vIGRpc3BsYXk6ZmxleDtcblxuICAvKlxud2VmXG5cbmRmd2YqL1xuICBjb2xvcjogaG90cGluaztcbmBcblxuY3NzYFxuICAvKiBAbm9mbGlwICovXG4gIGxlZnQ6IDFweDtcbmBcblxuY3NzYFxuICBsZWZ0OiAycHg7XG5cbiAgLyogQG5vZmxpcCAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogM3B4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEBub2ZsaXAgKi9cbiAgICByaWdodDogMXB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLyogQHdoYXRldmVyICovXG4gIGxlZnQ6IDRweDtcbmBcblxuY3NzYFxuICBsZWZ0OiA1cHg7XG5cbiAgLyogQHdoYXRldmVyICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiA2cHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQHdoYXRldmVyICovXG4gICAgcmlnaHQ6IDJweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8vIEBub2ZsaXAgc2hvdWxkLWJlLXJlbW92ZWRcbiAgbGVmdDogN3B4O1xuYFxuXG5jc3NgXG4gIC8vIEBzaG91bGRiZXJlbW92ZWRcbiAgbGVmdDogOHB4O1xuYFxuIl19 */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
 /*#__PURE__*/
 css(process.env.NODE_ENV === \\"production\\" ? {
-  name: \\"1d9s3pk\\",
-  styles: \\"left:2px;/* @noflip */ &.foo{left:3px;}&.zot{/* @noflip */ right:1px;}\\"
+  name: \\"hdn0xn\\",
+  styles: \\"left:2px;/* @noflip */&.foo{left:3px;}&.zot{/* @noflip */right:1px;}\\"
 } : {
-  name: \\"1d9s3pk\\",
-  styles: \\"left:2px;/* @noflip */ &.foo{left:3px;}&.zot{/* @noflip */ right:1px;}\\",
+  name: \\"hdn0xn\\",
+  styles: \\"left:2px;/* @noflip */&.foo{left:3px;}&.zot{/* @noflip */right:1px;}\\",
   map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
 /*#__PURE__*/
 css(process.env.NODE_ENV === \\"production\\" ? {
-  name: \\"bfdx0c\\",
-  styles: \\"/* @whatever */ left:4px\\"
+  name: \\"m1e8pu\\",
+  styles: \\"/* @whatever */left:4px\\"
 } : {
-  name: \\"bfdx0c\\",
-  styles: \\"/* @whatever */ left:4px\\",
+  name: \\"m1e8pu\\",
+  styles: \\"/* @whatever */left:4px\\",
   map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
 /*#__PURE__*/
 css(process.env.NODE_ENV === \\"production\\" ? {
-  name: \\"11qyfqd\\",
-  styles: \\"left:5px;/* @whatever */ &.foo{left:6px;}&.zot{/* @whatever */ right:2px;}\\"
+  name: \\"ldghp9\\",
+  styles: \\"left:5px;/* @whatever */&.foo{left:6px;}&.zot{/* @whatever */right:2px;}\\"
 } : {
-  name: \\"11qyfqd\\",
-  styles: \\"left:5px;/* @whatever */ &.foo{left:6px;}&.zot{/* @whatever */ right:2px;}\\",
+  name: \\"ldghp9\\",
+  styles: \\"left:5px;/* @whatever */&.foo{left:6px;}&.zot{/* @whatever */right:2px;}\\",
   map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
@@ -167,7 +167,7 @@ css\`
 import { css } from '@emotion/css';
 
 /*#__PURE__*/
-css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media (min-width:420px){line-height:40px;}width:\\", window.whatever, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJjc3MtYmFzaWMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmNzc2BcbiAgbWFyZ2luOiAxMnB4IDQ4cHg7XG4gIGNvbG9yOiAjZmZmZmZmO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4OiAxIDAgYXV0bztcbiAgY29sb3I6IGJsdWU7XG4gIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgIGxpbmUtaGVpZ2h0OiA0MHB4O1xuICB9XG4gIHdpZHRoOiAke3dpbmRvdy53aGF0ZXZlcn07XG5gXG4iXX0= */\\"));"
+css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media (min-width: 420px){line-height:40px;}width:\\", window.whatever, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJjc3MtYmFzaWMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmNzc2BcbiAgbWFyZ2luOiAxMnB4IDQ4cHg7XG4gIGNvbG9yOiAjZmZmZmZmO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4OiAxIDAgYXV0bztcbiAgY29sb3I6IGJsdWU7XG4gIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgIGxpbmUtaGVpZ2h0OiA0MHB4O1xuICB9XG4gIHdpZHRoOiAke3dpbmRvdy53aGF0ZXZlcn07XG5gXG4iXX0= */\\"));"
 `;
 
 exports[`vanilla emotion css-object 1`] = `
@@ -289,7 +289,7 @@ import { css } from '@emotion/css';
 function test() {
   const cls1 =
   /*#__PURE__*/
-  css(\\"font-size:20px;@media (min-width:420px){color:blue;\\",
+  css(\\"font-size:20px;@media (min-width: 420px){color:blue;\\",
   /*#__PURE__*/
   css(process.env.NODE_ENV === \\"production\\" ? {
     name: \\"14ht2kb\\",
@@ -366,11 +366,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string
 
 import { injectGlobal } from '@emotion/css';
 injectGlobal(process.env.NODE_ENV === \\"production\\" ? {
-  name: \\"1d66lop\\",
-  styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\"
+  name: \\"59k0ad\\",
+  styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\"
 } : {
-  name: \\"1d66lop\\",
-  styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\",
+  name: \\"59k0ad\\",
+  styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\",
   map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtYmFzaWMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVkiLCJmaWxlIjoiaW5qZWN0LWdsb2JhbC1iYXNpYy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGluamVjdEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuaW5qZWN0R2xvYmFsYFxuICBib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICAmID4gZGl2IHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuICB9XG4gIGh0bWwge1xuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICB9XG5gXG4iXX0= */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });"
@@ -414,11 +414,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string
 
 import { injectGlobal as inject } from '@emotion/css';
 inject(process.env.NODE_ENV === \\"production\\" ? {
-  name: \\"1d66lop\\",
-  styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\"
+  name: \\"59k0ad\\",
+  styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\"
 } : {
-  name: \\"1d66lop\\",
-  styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\",
+  name: \\"59k0ad\\",
+  styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\",
   map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtY2hhbmdlLWltcG9ydC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFTSIsImZpbGUiOiJpbmplY3QtZ2xvYmFsLWNoYW5nZS1pbXBvcnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpbmplY3RHbG9iYWwgYXMgaW5qZWN0IH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5pbmplY3RgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgICYgPiBkaXYge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gIH1cbiAgaHRtbCB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cbmBcblxubGV0IGluamVjdEdsb2JhbCA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgICYgPiBkaXYge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gIH1cbiAgaHRtbCB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cbmBcbiJdfQ== */\\",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
@@ -494,7 +494,7 @@ injectGlobal\`
 
 import { injectGlobal } from '@emotion/css';
 let display = window.whatever;
-injectGlobal(\\"body{margin:0;padding:0;display:\\", display, \\";& > div{display:none;}}html{background:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlZIiwiZmlsZSI6ImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgaW5qZWN0R2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5sZXQgZGlzcGxheSA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGRpc3BsYXk6ICR7ZGlzcGxheX07XG4gICAgJiA+IGRpdiB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuICBodG1sIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuYFxuIl19 */\\"));"
+injectGlobal(\\"body{margin:0;padding:0;display:\\", display, \\";&>div{display:none;}}html{background:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlZIiwiZmlsZSI6ImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgaW5qZWN0R2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5sZXQgZGlzcGxheSA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGRpc3BsYXk6ICR7ZGlzcGxheX07XG4gICAgJiA+IGRpdiB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuICBodG1sIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuYFxuIl19 */\\"));"
 `;
 
 exports[`vanilla emotion keyframes-basic 1`] = `
@@ -552,6 +552,35 @@ const rotate360 =
 keyframes(\\"from{transform:rotate(0deg);}to{transform:rotate(\\", endingRotation, \\");}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:rotate360;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTJCIiwiZmlsZSI6ImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmxldCBlbmRpbmdSb3RhdGlvbiA9IHdpbmRvdy53aGF0ZXZlclxuXG5jb25zdCByb3RhdGUzNjAgPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgke2VuZGluZ1JvdGF0aW9ufSk7XG4gIH1cbmBcbiJdfQ== */\\");"
 `;
 
+exports[`vanilla emotion nested-orphaned-pseudo 1`] = `
+"import { css } from '@emotion/css'
+
+// whitespace before pseudo should be preserved
+css\`
+  & :hover {
+    color: hotpink;
+  }
+\`
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { css } from '@emotion/css'; // whitespace before pseudo should be preserved
+
+/*#__PURE__*/
+css(process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"1e7lzue\\",
+  styles: \\"& :hover{color:hotpink;}\\"
+} : {
+  name: \\"1e7lzue\\",
+  styles: \\"& :hover{color:hotpink;}\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5lc3RlZC1vcnBoYW5lZC1wc2V1ZG8uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0ciLCJmaWxlIjoibmVzdGVkLW9ycGhhbmVkLXBzZXVkby5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuLy8gd2hpdGVzcGFjZSBiZWZvcmUgcHNldWRvIHNob3VsZCBiZSBwcmVzZXJ2ZWRcbmNzc2BcbiAgJiA6aG92ZXIge1xuICAgIGNvbG9yOiBob3RwaW5rO1xuICB9XG5gXG4iXX0= */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
 exports[`vanilla emotion object-label 1`] = `
 "import { css } from '@emotion/css'
 

packages/babel-plugin/__tests__/css-macro/__snapshots__/index.js.snap

@@ -702,7 +702,7 @@ import { css } from \\"@emotion/react\\";
 function media(...args) {
   return (
     /*#__PURE__*/
-    css(\\"@media (min-width:100px){\\",
+    css(\\"@media (min-width: 100px){\\",
     /*#__PURE__*/
     css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:media;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\")
   );

packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/nested-orphaned-pseudo.js

@@ -0,0 +1,8 @@
+import { css } from '@emotion/css/macro'
+
+// whitespace before pseudo should be preserved
+css`
+  & :hover {
+    color: hotpink;
+  }
+`