From 862729d103ebd78791198191201c6f42a9cd356f Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 9 Nov 2021 19:05:25 +0100
Subject: [PATCH 01/14] Current behavior for useId

---
 package.json                            |  2 +
 packages/react/__tests__/rehydration.js | 72 +++++++++++++++++++++++++
 yarn.lock                               | 25 +++++++++
 3 files changed, 99 insertions(+)

diff --git a/package.json b/package.json
index 879aefcb2..6c9f77c5d 100644
--- a/package.json
+++ b/package.json
@@ -261,6 +261,8 @@
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.5",
     "react-test-renderer": "16.8.6",
+    "react18": "npm:react@alpha",
+    "react18-dom": "npm:react-dom@alpha",
     "svg-tag-names": "^1.1.1",
     "through": "^2.3.8",
     "unified": "^6.1.6",
diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
index 1245ec161..58530e788 100644
--- a/packages/react/__tests__/rehydration.js
+++ b/packages/react/__tests__/rehydration.js
@@ -17,6 +17,7 @@ let ReactDOMServer
 let createCache
 let css
 let jsx
+let styled
 let CacheProvider
 let Global
 let createEmotionServer
@@ -35,6 +36,7 @@ const resetAllModules = () => {
   CacheProvider = emotionReact.CacheProvider
   Global = emotionReact.Global
   createEmotionServer = require('@emotion/server/create-instance').default
+  styled = require('@emotion/styled').default
 }
 
 const removeGlobalProp = prop => {
@@ -592,3 +594,73 @@ test('duplicated global styles can be removed safely after rehydrating HTML SSRe
     </head>
   `)
 })
+
+describe('react18', () => {
+  let previousIsReactActEnvironment
+  beforeAll(() => {
+    jest
+      .mock('react', () => {
+        return jest.requireActual('react18')
+      })
+      .mock('react-dom', () => {
+        return jest.requireActual('react18-dom')
+      })
+      .mock('react-dom/server', () => {
+        return jest.requireActual('react18-dom/server')
+      })
+
+    previousIsReactActEnvironment = global.IS_REACT_ACT_ENVIRONMENT
+    global.IS_REACT_ACT_ENVIRONMENT = true
+  })
+
+  afterAll(() => {
+    jest.clearAllMocks()
+    global.IS_REACT_ACT_ENVIRONMENT = previousIsReactActEnvironment
+  })
+
+  test('no hydration mismatch when using useId', () => {
+    const finalHTML = disableBrowserEnvTemporarily(() => {
+      resetAllModules()
+
+      const StyledDivWithId = styled(function DivWithId({ className }) {
+        const id = (React: any).useId()
+        return <div className={className} id={id} />
+      })({
+        border: '1px solid black'
+      })
+
+      return ReactDOMServer.renderToString(<StyledDivWithId />)
+    })
+
+    safeQuerySelector('body').innerHTML = `<div id="root">${finalHTML}</div>`
+
+    resetAllModules()
+
+    const StyledDivWithId = styled(function DivWithId({ className }) {
+      const id = (React: any).useId()
+      return <div className={className} id={id} />
+    })({
+      border: '1px solid black'
+    })
+
+    ;(React: any).unstable_act(() => {
+      ReactDOM.hydrateRoot(safeQuerySelector('#root'), <StyledDivWithId />)
+    })
+
+    expect((console.error: any).mock.calls).toMatchInlineSnapshot(`
+      Array [
+        Array [
+          "Warning: Prop \`%s\` did not match. Server: %s Client: %s%s",
+          "id",
+          "\\"R:2\\"",
+          "\\"R:0\\"",
+          "
+          at div
+          at className (/home/eps1lon/Development/forks/emotion/packages/react/__tests__/rehydration.js:639:57)
+          at Styled(DivWithId) (/home/eps1lon/Development/forks/emotion/packages/react/src/context.js:38:19)",
+        ],
+      ]
+    `)
+    expect((console.warn: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+  })
+})
diff --git a/yarn.lock b/yarn.lock
index dd247b03e..029d35143 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23995,6 +23995,23 @@ react-timer-mixin@^0.13.4:
   resolved "https://registry.npmjs.org/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
   integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
 
+"react18-dom@npm:react-dom@alpha":
+  version "18.0.0-alpha-327d5c484-20211106"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-alpha-327d5c484-20211106.tgz#f8855d8e73876b5dbf6545ca02e14d8644a48008"
+  integrity sha512-yI2Kxy4/+nAFYHtC5uVIwXPURABwBhtqbEgjgRa9cITHsmZIO7AqDee0a5nXVSr8wWmtmbN1vSh29aDicuO03A==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "0.21.0-alpha-327d5c484-20211106"
+
+"react18@npm:react@alpha":
+  version "18.0.0-alpha-327d5c484-20211106"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-alpha-327d5c484-20211106.tgz#f0e29b20b8c371697207a9f7b73a7ab625bee4b7"
+  integrity sha512-CB3JnXquQ9FYkd8IpTlvdpyk+HN1fOUDB7NabXTfbycqqRxuKhtijv7W7F/mbTzPLLMrxV5LwUqrLFc25Zy+UQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 react@16.14.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -25339,6 +25356,14 @@ scheduler@0.19.1, scheduler@^0.19.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@0.21.0-alpha-327d5c484-20211106:
+  version "0.21.0-alpha-327d5c484-20211106"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-alpha-327d5c484-20211106.tgz#16340fd4c7387ff58ad897b64715c0e3098e9489"
+  integrity sha512-VzlBG9d8m/2GwzXMjh7FoV6lpv/vOKdUYFCw3FCVY2aP/lN4oJkKwOlf4on2vEk855ckx+s3bR4eJLrlD7kZSw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.13.6:
   version "0.13.6"
   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"

From 2d79250792f3309aa29d7fd6fc8dabde5ee3091a Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 9 Nov 2021 12:29:27 +0100
Subject: [PATCH 02/14] fix(styled): Ensure no hydration mismatch with
 React.useId

---
 packages/react/__tests__/rehydration.js | 15 +------------
 packages/styled/src/base.js             | 28 ++++++++++++++-----------
 2 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
index 58530e788..afc799e23 100644
--- a/packages/react/__tests__/rehydration.js
+++ b/packages/react/__tests__/rehydration.js
@@ -647,20 +647,7 @@ describe('react18', () => {
       ReactDOM.hydrateRoot(safeQuerySelector('#root'), <StyledDivWithId />)
     })
 
-    expect((console.error: any).mock.calls).toMatchInlineSnapshot(`
-      Array [
-        Array [
-          "Warning: Prop \`%s\` did not match. Server: %s Client: %s%s",
-          "id",
-          "\\"R:2\\"",
-          "\\"R:0\\"",
-          "
-          at div
-          at className (/home/eps1lon/Development/forks/emotion/packages/react/__tests__/rehydration.js:639:57)
-          at Styled(DivWithId) (/home/eps1lon/Development/forks/emotion/packages/react/src/context.js:38:19)",
-        ],
-      ]
-    `)
+    expect((console.error: any).mock.calls).toMatchInlineSnapshot(`Array []`)
     expect((console.warn: any).mock.calls).toMatchInlineSnapshot(`Array []`)
   })
 })
diff --git a/packages/styled/src/base.js b/packages/styled/src/base.js
index 292ecaad6..3804e88d3 100644
--- a/packages/styled/src/base.js
+++ b/packages/styled/src/base.js
@@ -132,6 +132,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
         newProps.ref = ref
 
         const ele = React.createElement(finalTag, newProps)
+        let possiblyStyleElement = <></>
         if (!isBrowser && rules !== undefined) {
           let serializedNames = serialized.name
           let next = serialized.next
@@ -139,20 +140,23 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
             serializedNames += ' ' + next.name
             next = next.next
           }
-          return (
-            <>
-              <style
-                {...{
-                  [`data-emotion`]: `${cache.key} ${serializedNames}`,
-                  dangerouslySetInnerHTML: { __html: rules },
-                  nonce: cache.sheet.nonce
-                }}
-              />
-              {ele}
-            </>
+          possiblyStyleElement = (
+            <style
+              {...{
+                [`data-emotion`]: `${cache.key} ${serializedNames}`,
+                dangerouslySetInnerHTML: { __html: rules },
+                nonce: cache.sheet.nonce
+              }}
+            />
           )
         }
-        return ele
+        // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
+        return (
+          <>
+            {possiblyStyleElement}
+            {ele}
+          </>
+        )
       }
     )
 

From 865ff4a66655f58d7480f6cd81fd6f2804154f03 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 9 Nov 2021 12:33:42 +0100
Subject: [PATCH 03/14] yarn changeset

---
 .changeset/strange-kids-change.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/strange-kids-change.md

diff --git a/.changeset/strange-kids-change.md b/.changeset/strange-kids-change.md
new file mode 100644
index 000000000..42025134b
--- /dev/null
+++ b/.changeset/strange-kids-change.md
@@ -0,0 +1,5 @@
+---
+'@emotion/styled': patch
+---
+
+Fix hydration mismatches if `React.useId` is used

From 7589dda6d36fd89f8c32a09107b05c7bbc4a98ae Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 9 Nov 2021 13:20:47 +0100
Subject: [PATCH 04/14] Update snapshots

---
 .../__snapshots__/react-enzyme.test.js.snap   | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
index 28bcdbefe..1ecad1cb9 100644
--- a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
+++ b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
@@ -446,11 +446,13 @@ exports[`enzyme shallow displayName 1`] = `
 `;
 
 exports[`enzyme shallow empty styled 1`] = `
-<div
-  className="emotion-0 emotion-1"
->
-  Hello
-</div>
+<Fragment>
+  <div
+    className="emotion-0 emotion-1"
+  >
+    Hello
+  </div>
+</Fragment>
 `;
 
 exports[`enzyme shallow nested 1`] = `
@@ -500,11 +502,13 @@ exports[`enzyme shallow styled 1`] = `
   background-color: red;
 }
 
-<div
-  className="emotion-0 emotion-1"
->
-  Hello
-</div>
+<Fragment>
+  <div
+    className="emotion-0 emotion-1"
+  >
+    Hello
+  </div>
+</Fragment>
 `;
 
 exports[`enzyme shallow styled with css prop 1`] = `

From a3fb71927d0a92a8049a03ebd213aa66d4e08507 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 9 Nov 2021 13:20:57 +0100
Subject: [PATCH 05/14] Dirty fix for enzyme matchers

---
 packages/jest/src/utils.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/jest/src/utils.js b/packages/jest/src/utils.js
index 7b0d71cb6..4fd9e651b 100644
--- a/packages/jest/src/utils.js
+++ b/packages/jest/src/utils.js
@@ -58,7 +58,12 @@ function getClassNameProp(node) {
   return (node && node.prop('className')) || ''
 }
 
-function getClassNamesFromEnzyme(selectors, node) {
+function getClassNamesFromEnzyme(selectors, nodeWithFragment) {
+  // TODO: Does approach work with older Emotion versions? Does it cause false positives with components named "Fragment" that aren't `React.Fragment`?
+  const node =
+    nodeWithFragment.name() === 'Fragment'
+      ? nodeWithFragment.children()
+      : nodeWithFragment
   // We need to dive in to get the className if we have a styled element from a shallow render
   const isShallow = shouldDive(node)
   const nodeWithClassName = findNodeWithClassName(

From e98ebd8e423388823249194df080932db8d52080 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 9 Nov 2021 18:13:28 +0100
Subject: [PATCH 06/14] Fragment -> Noop

---
 packages/jest/src/utils.js                               | 2 +-
 .../jest/test/__snapshots__/react-enzyme.test.js.snap    | 9 +++++++++
 packages/styled/src/base.js                              | 3 ++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/jest/src/utils.js b/packages/jest/src/utils.js
index 4fd9e651b..5b903cdfe 100644
--- a/packages/jest/src/utils.js
+++ b/packages/jest/src/utils.js
@@ -62,7 +62,7 @@ function getClassNamesFromEnzyme(selectors, nodeWithFragment) {
   // TODO: Does approach work with older Emotion versions? Does it cause false positives with components named "Fragment" that aren't `React.Fragment`?
   const node =
     nodeWithFragment.name() === 'Fragment'
-      ? nodeWithFragment.children()
+      ? nodeWithFragment.children().at(1)
       : nodeWithFragment
   // We need to dive in to get the className if we have a styled element from a shallow render
   const isShallow = shouldDive(node)
diff --git a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
index 1ecad1cb9..9d18dffaa 100644
--- a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
+++ b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
@@ -48,6 +48,7 @@ exports[`enzyme mount displayName 1`] = `
 
 exports[`enzyme mount empty styled 1`] = `
 <Greeting>
+  <Noop />
   <div
     className="emotion-0 emotion-1"
   >
@@ -97,6 +98,7 @@ exports[`enzyme mount nested styled 1`] = `
 
 <div>
   <Greeting>
+    <Noop />
     <div
       className="emotion-0 emotion-1"
     >
@@ -120,6 +122,7 @@ exports[`enzyme mount nested styled with css prop 1`] = `
   <Button
     className="emotion-0"
   >
+    <Noop />
     <button
       className="emotion-1 emotion-2"
     >
@@ -135,6 +138,7 @@ exports[`enzyme mount styled 1`] = `
 }
 
 <Greeting>
+  <Noop />
   <div
     className="emotion-0 emotion-1"
   >
@@ -156,6 +160,7 @@ exports[`enzyme mount styled with css prop 1`] = `
 <Button
   className="emotion-0"
 >
+  <Noop />
   <button
     className="emotion-1 emotion-2"
   >
@@ -178,6 +183,7 @@ exports[`enzyme mount theming 1`] = `
       }
     }
   >
+    <Noop />
     <button
       className="emotion-0 emotion-1"
     >
@@ -198,6 +204,7 @@ exports[`enzyme mount theming 1`] = `
         }
       }
     >
+      <Noop />
       <button
         className="emotion-0 emotion-1"
       >
@@ -447,6 +454,7 @@ exports[`enzyme shallow displayName 1`] = `
 
 exports[`enzyme shallow empty styled 1`] = `
 <Fragment>
+  <Noop />
   <div
     className="emotion-0 emotion-1"
   >
@@ -503,6 +511,7 @@ exports[`enzyme shallow styled 1`] = `
 }
 
 <Fragment>
+  <Noop />
   <div
     className="emotion-0 emotion-1"
   >
diff --git a/packages/styled/src/base.js b/packages/styled/src/base.js
index 3804e88d3..d2ea17900 100644
--- a/packages/styled/src/base.js
+++ b/packages/styled/src/base.js
@@ -18,6 +18,7 @@ You can read more about this here:
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`
 
 let isBrowser = typeof document !== 'undefined'
+const Noop = () => null
 
 let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -132,7 +133,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
         newProps.ref = ref
 
         const ele = React.createElement(finalTag, newProps)
-        let possiblyStyleElement = <></>
+        let possiblyStyleElement = <Noop />
         if (!isBrowser && rules !== undefined) {
           let serializedNames = serialized.name
           let next = serialized.next

From aac6191cac8699a9af21434c60dfa762a09f854d Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 9 Nov 2021 18:27:28 +0100
Subject: [PATCH 07/14] Apply same pattern to class-names and emotion-element

---
 .../__snapshots__/react-enzyme.test.js.snap   | 300 +++++++++++-------
 packages/react/src/class-names.js             |  30 +-
 packages/react/src/emotion-element.js         |  30 +-
 3 files changed, 220 insertions(+), 140 deletions(-)

diff --git a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
index 9d18dffaa..fbfd548ed 100644
--- a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
+++ b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
@@ -7,9 +7,14 @@ exports[`enzyme mount basic 1`] = `
 
 <Greeting>
   <div
-    className="emotion-0"
+    css="unknown styles"
   >
-    hello
+    <Noop />
+    <div
+      className="emotion-0"
+    >
+      hello
+    </div>
   </div>
 </Greeting>
 `;
@@ -20,13 +25,14 @@ exports[`enzyme mount conditional styles 1`] = `
 }
 
 <div
-  className="emotion-0"
+  css="unknown styles"
 >
-  <span
-    className="emotion-1"
+  <Noop />
+  <div
+    className="emotion-0"
   >
-    Test content
-  </span>
+    <Noop />
+  </div>
 </div>
 `;
 
@@ -36,13 +42,18 @@ exports[`enzyme mount displayName 1`] = `
 }
 
 <CustomDisplayName
-  className="emotion-0"
+  css="unknown styles"
 >
-  <div
+  <Noop />
+  <CustomDisplayName
     className="emotion-0"
   >
-    Hello
-  </div>
+    <div
+      className="emotion-0"
+    >
+      Hello
+    </div>
+  </CustomDisplayName>
 </CustomDisplayName>
 `;
 
@@ -65,9 +76,14 @@ exports[`enzyme mount nested 1`] = `
 <div>
   <Greeting>
     <div
-      className="emotion-0"
+      css="unknown styles"
     >
-      hello
+      <Noop />
+      <div
+        className="emotion-0"
+      >
+        hello
+      </div>
     </div>
   </Greeting>
 </div>
@@ -80,13 +96,18 @@ exports[`enzyme mount nested displayName 1`] = `
 
 <div>
   <CustomDisplayName
-    className="emotion-0"
+    css="unknown styles"
   >
-    <div
+    <Noop />
+    <CustomDisplayName
       className="emotion-0"
     >
-      Hello
-    </div>
+      <div
+        className="emotion-0"
+      >
+        Hello
+      </div>
+    </CustomDisplayName>
   </CustomDisplayName>
 </div>
 `;
@@ -120,14 +141,19 @@ exports[`enzyme mount nested styled with css prop 1`] = `
 
 <div>
   <Button
-    className="emotion-0"
+    css="unknown styles"
   >
     <Noop />
-    <button
-      className="emotion-1 emotion-2"
+    <Button
+      className="emotion-0"
     >
-      iChenLei
-    </button>
+      <Noop />
+      <button
+        className="emotion-1 emotion-2"
+      >
+        iChenLei
+      </button>
+    </Button>
   </Button>
 </div>
 `;
@@ -158,14 +184,19 @@ exports[`enzyme mount styled with css prop 1`] = `
 }
 
 <Button
-  className="emotion-0"
+  css="unknown styles"
 >
   <Noop />
-  <button
-    className="emotion-1 emotion-2"
+  <Button
+    className="emotion-0"
   >
-    iChenLei
-  </button>
+    <Noop />
+    <button
+      className="emotion-1 emotion-2"
+    >
+      iChenLei
+    </button>
+  </Button>
 </Button>
 `;
 
@@ -222,9 +253,14 @@ exports[`enzyme mount with array of styles as css prop 1`] = `
 }
 
 <div
-  className="emotion-0"
+  css="unknown styles"
 >
-  Test content
+  <Noop />
+  <div
+    className="emotion-0"
+  >
+    Test content
+  </div>
 </div>
 `;
 
@@ -236,13 +272,18 @@ exports[`enzyme mount with array of styles in a composite inner child 1`] = `
 
 <div>
   <Inner
-    className="emotion-0"
+    css="unknown styles"
   >
-    <span
+    <Noop />
+    <Inner
       className="emotion-0"
     >
-      Test content
-    </span>
+      <span
+        className="emotion-0"
+      >
+        Test content
+      </span>
+    </Inner>
   </Inner>
 </div>
 `;
@@ -263,9 +304,14 @@ exports[`enzyme mount with prop containing css element 1`] = `
 >
   <div>
     <p
-      className="emotion-0"
+      css="unknown styles"
     >
-      Hello
+      <Noop />
+      <p
+        className="emotion-0"
+      >
+        Hello
+      </p>
     </p>
      
     World!
@@ -291,10 +337,16 @@ exports[`enzyme mount with prop containing css element not at the top level 1`]
   >
     <div>
       <p
-        className="emotion-0"
+        css="unknown styles"
         id="something"
       >
-        Hello
+        <Noop />
+        <p
+          className="emotion-0"
+          id="something"
+        >
+          Hello
+        </p>
       </p>
        
       World!
@@ -326,10 +378,16 @@ exports[`enzyme mount with prop containing css element with other label 1`] = `
     }
   >
     <p
-      className="emotion-0"
+      css="unknown styles"
       id="something"
     >
-      Hello
+      <Noop />
+      <p
+        className="emotion-0"
+        id="something"
+      >
+        Hello
+      </p>
     </p>
      
     World!
@@ -354,10 +412,16 @@ exports[`enzyme mount with prop containing css element with other props 1`] = `
 >
   <div>
     <p
-      className="emotion-0"
+      css="unknown styles"
       id="something"
     >
-      Hello
+      <Noop />
+      <p
+        className="emotion-0"
+        id="something"
+      >
+        Hello
+      </p>
     </p>
      
     World!
@@ -385,13 +449,18 @@ exports[`enzyme mount with styles on top level 1`] = `
 }
 
 <Greeting
-  className="emotion-0"
+  css="unknown styles"
 >
-  <div
+  <Noop />
+  <Greeting
     className="emotion-0"
   >
-    Hello
-  </div>
+    <div
+      className="emotion-0"
+    >
+      Hello
+    </div>
+  </Greeting>
 </Greeting>
 `;
 
@@ -405,22 +474,28 @@ exports[`enzyme parent and child using css property 1`] = `
 }
 
 <div
-  className="emotion-0"
+  css="unknown styles"
 >
-  Test content
+  <Noop />
   <div
-    className="emotion-1"
-  />
+    className="emotion-0"
+  >
+    Test content
+    <div
+      css="unknown styles"
+    >
+      <Noop />
+      <div
+        className="emotion-1"
+      />
+    </div>
+  </div>
 </div>
 `;
 
 exports[`enzyme shallow basic 1`] = `
-.emotion-0 {
-  background-color: red;
-}
-
 <div
-  className="emotion-0"
+  css="unknown styles"
 >
   hello
 </div>
@@ -431,15 +506,18 @@ exports[`enzyme shallow conditional styles 1`] = `
   background-color: black;
 }
 
-<div
-  className="emotion-0"
->
-  <span
-    css="unknown styles"
+<Fragment>
+  <Noop />
+  <div
+    className="emotion-0"
   >
-    Test content
-  </span>
-</div>
+    <span
+      css="unknown styles"
+    >
+      Test content
+    </span>
+  </div>
+</Fragment>
 `;
 
 exports[`enzyme shallow displayName 1`] = `
@@ -447,9 +525,12 @@ exports[`enzyme shallow displayName 1`] = `
   color: hotpink;
 }
 
-<CustomDisplayName
-  className="emotion-0"
-/>
+<Fragment>
+  <Noop />
+  <CustomDisplayName
+    className="emotion-0"
+  />
+</Fragment>
 `;
 
 exports[`enzyme shallow empty styled 1`] = `
@@ -472,13 +553,9 @@ exports[`enzyme shallow nested 1`] = `
 `;
 
 exports[`enzyme shallow nested displayName 1`] = `
-.emotion-0 {
-  color: hotpink;
-}
-
 <div>
   <CustomDisplayName
-    className="emotion-0"
+    css="unknown styles"
   />
 </div>
 `;
@@ -492,13 +569,9 @@ exports[`enzyme shallow nested styled 1`] = `
 `;
 
 exports[`enzyme shallow nested styled with css prop 1`] = `
-.emotion-0 {
-  background-color: black;
-}
-
 <div>
   <Button
-    className="emotion-0"
+    css="unknown styles"
   >
     iChenLei
   </Button>
@@ -525,11 +598,14 @@ exports[`enzyme shallow styled with css prop 1`] = `
   background-color: black;
 }
 
-<Button
-  className="emotion-0"
->
-  iChenLei
-</Button>
+<Fragment>
+  <Noop />
+  <Button
+    className="emotion-0"
+  >
+    iChenLei
+  </Button>
+</Fragment>
 `;
 
 exports[`enzyme shallow theming 1`] = `
@@ -569,22 +645,20 @@ exports[`enzyme shallow with array of styles as css prop 1`] = `
   color: white;
 }
 
-<div
-  className="emotion-0"
->
-  Test content
-</div>
+<Fragment>
+  <Noop />
+  <div
+    className="emotion-0"
+  >
+    Test content
+  </div>
+</Fragment>
 `;
 
 exports[`enzyme shallow with array of styles in a composite inner child 1`] = `
-.emotion-0 {
-  background-color: black;
-  color: white;
-}
-
 <div>
   <Inner
-    className="emotion-0"
+    css="unknown styles"
   >
     Test content
   </Inner>
@@ -592,13 +666,9 @@ exports[`enzyme shallow with array of styles in a composite inner child 1`] = `
 `;
 
 exports[`enzyme shallow with prop containing css element 1`] = `
-.emotion-0 {
-  background-color: blue;
-}
-
 <div>
   <p
-    className="emotion-0"
+    css="unknown styles"
   >
     Hello
   </p>
@@ -625,10 +695,6 @@ exports[`enzyme shallow with prop containing css element not at the top level 1`
 `;
 
 exports[`enzyme shallow with prop containing css element with other label 1`] = `
-.emotion-0 {
-  background-color: blue;
-}
-
 <Thing
   content={
     <div
@@ -637,7 +703,7 @@ exports[`enzyme shallow with prop containing css element with other label 1`] =
   }
 >
   <p
-    className="emotion-0"
+    css="unknown styles"
     id="something"
   >
     Hello
@@ -648,13 +714,9 @@ exports[`enzyme shallow with prop containing css element with other label 1`] =
 `;
 
 exports[`enzyme shallow with prop containing css element with other props 1`] = `
-.emotion-0 {
-  background-color: blue;
-}
-
 <div>
   <p
-    className="emotion-0"
+    css="unknown styles"
     id="something"
   >
     Hello
@@ -675,11 +737,14 @@ exports[`enzyme shallow with styles on top level 1`] = `
   background-color: red;
 }
 
-<Greeting
-  className="emotion-0"
->
-  Hello
-</Greeting>
+<Fragment>
+  <Noop />
+  <Greeting
+    className="emotion-0"
+  >
+    Hello
+  </Greeting>
+</Fragment>
 `;
 
 exports[`enzyme with prop containing css element in fragment 1`] = `
@@ -689,10 +754,13 @@ exports[`enzyme with prop containing css element in fragment 1`] = `
 
 <div>
   x
-  <div
-    className="emotion-0"
-  >
-    y
-  </div>
+  Array [
+    "",
+    <div
+      className="emotion-0"
+    >
+      y
+    </div>,
+  ]
 </div>
 `;
diff --git a/packages/react/src/class-names.js b/packages/react/src/class-names.js
index 1ac618f3b..deabcdce7 100644
--- a/packages/react/src/class-names.js
+++ b/packages/react/src/class-names.js
@@ -88,6 +88,8 @@ type Props = {
   }) => React.Node
 }
 
+const Noop = () => null
+
 export const ClassNames: React.AbstractComponent<Props> =
   /* #__PURE__ */ withEmotionCache((props, cache) => {
     let rules = ''
@@ -125,21 +127,25 @@ export const ClassNames: React.AbstractComponent<Props> =
     }
     let ele = props.children(content)
     hasRendered = true
+    let possiblyStyleElement = <Noop />
     if (!isBrowser && rules.length !== 0) {
-      return (
-        <>
-          <style
-            {...{
-              [`data-emotion`]: `${cache.key} ${serializedHashes.substring(1)}`,
-              dangerouslySetInnerHTML: { __html: rules },
-              nonce: cache.sheet.nonce
-            }}
-          />
-          {ele}
-        </>
+      possiblyStyleElement = (
+        <style
+          {...{
+            [`data-emotion`]: `${cache.key} ${serializedHashes.substring(1)}`,
+            dangerouslySetInnerHTML: { __html: rules },
+            nonce: cache.sheet.nonce
+          }}
+        />
       )
     }
-    return ele
+    // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
+    return (
+      <>
+        {possiblyStyleElement}
+        {ele}
+      </>
+    )
   })
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/react/src/emotion-element.js b/packages/react/src/emotion-element.js
index 8330c14ac..8514f9376 100644
--- a/packages/react/src/emotion-element.js
+++ b/packages/react/src/emotion-element.js
@@ -57,6 +57,8 @@ export const createEmotionProps = (type: React.ElementType, props: Object) => {
   return newProps
 }
 
+const Noop = () => null
+
 let Emotion = /* #__PURE__ */ withEmotionCache<any, any>(
   (props, cache, ref) => {
     let cssProp = props.css
@@ -121,6 +123,7 @@ let Emotion = /* #__PURE__ */ withEmotionCache<any, any>(
     newProps.className = className
 
     const ele = React.createElement(type, newProps)
+    let possiblyStyleElement = <Noop />
     if (!isBrowser && rules !== undefined) {
       let serializedNames = serialized.name
       let next = serialized.next
@@ -128,20 +131,23 @@ let Emotion = /* #__PURE__ */ withEmotionCache<any, any>(
         serializedNames += ' ' + next.name
         next = next.next
       }
-      return (
-        <>
-          <style
-            {...{
-              [`data-emotion`]: `${cache.key} ${serializedNames}`,
-              dangerouslySetInnerHTML: { __html: rules },
-              nonce: cache.sheet.nonce
-            }}
-          />
-          {ele}
-        </>
+      possiblyStyleElement = (
+        <style
+          {...{
+            [`data-emotion`]: `${cache.key} ${serializedNames}`,
+            dangerouslySetInnerHTML: { __html: rules },
+            nonce: cache.sheet.nonce
+          }}
+        />
       )
     }
-    return ele
+    // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
+    return (
+      <>
+        {possiblyStyleElement}
+        {ele}
+      </>
+    )
   }
 )
 

From 77888db016b34027709d78612201258802d97628 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 11 Nov 2021 12:18:32 +0100
Subject: [PATCH 08/14] tweak fragment unwrapping in `@emotion/jest`

---
 packages/jest/src/utils.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/jest/src/utils.js b/packages/jest/src/utils.js
index 5b903cdfe..5d22c41a2 100644
--- a/packages/jest/src/utils.js
+++ b/packages/jest/src/utils.js
@@ -58,12 +58,20 @@ function getClassNameProp(node) {
   return (node && node.prop('className')) || ''
 }
 
-function getClassNamesFromEnzyme(selectors, nodeWithFragment) {
-  // TODO: Does approach work with older Emotion versions? Does it cause false positives with components named "Fragment" that aren't `React.Fragment`?
-  const node =
-    nodeWithFragment.name() === 'Fragment'
-      ? nodeWithFragment.children().at(1)
-      : nodeWithFragment
+function unwrapFromPotentialFragment(node) {
+  // this symbol is rather stable and won't change, it is how jest was handling this initially:
+  // https://github.com/facebook/jest/blob/b0d28888154aec2e05cfb3249520b9a2a1a7c12d/packages/pretty-format/src/plugins/react_element.js#L20
+  // in environments without Symbols this would fail (React fallbacks to integers then for the element types) but we don't support such environments
+  // since then jest has started using `react-is` package and that could be used here too
+  if (node.type() === Symbol.for('react.fragment')) {
+    // the rendered element always comes second as the first slot is reserved for the potential style element
+    return node.childAt(1)
+  }
+  return node
+}
+
+function getClassNamesFromEnzyme(selectors, nodeWithPotentialFragment) {
+  const node = unwrapFromPotentialFragment(nodeWithPotentialFragment)
   // We need to dive in to get the className if we have a styled element from a shallow render
   const isShallow = shouldDive(node)
   const nodeWithClassName = findNodeWithClassName(

From 8c3d765786ff1ecf0b6dc571120042c508959a18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 12 Nov 2021 14:04:58 +0100
Subject: [PATCH 09/14] Fixed enzyme-related serialization tests

---
 packages/jest/src/create-enzyme-serializer.js |  63 +++-
 packages/jest/src/create-serializer.js        |  69 ++--
 packages/jest/src/enzyme-tickler.js           |   8 +-
 packages/jest/src/utils.js                    |  16 +-
 .../__snapshots__/react-enzyme.test.js.snap   | 320 +++++++-----------
 5 files changed, 229 insertions(+), 247 deletions(-)

diff --git a/packages/jest/src/create-enzyme-serializer.js b/packages/jest/src/create-enzyme-serializer.js
index 9208b49b3..ddfe10036 100644
--- a/packages/jest/src/create-enzyme-serializer.js
+++ b/packages/jest/src/create-enzyme-serializer.js
@@ -3,8 +3,63 @@ import type { Options } from './create-serializer'
 import { createSerializer as createEmotionSerializer } from './create-serializer'
 import * as enzymeTickler from './enzyme-tickler'
 import { createSerializer as createEnzymeToJsonSerializer } from 'enzyme-to-json'
+import { isEmotionCssPropElementType, isStyledElementType } from './utils'
 
-const enzymeSerializer = createEnzymeToJsonSerializer({})
+const enzymeToJsonSerializer = createEnzymeToJsonSerializer({
+  map: json => {
+    if (typeof json.node.type === 'string') {
+      return json
+    }
+    const isRealStyled = json.node.type.__emotion_real === json.node.type
+    if (isRealStyled) {
+      return {
+        ...json,
+        children: json.children.slice(-1)
+      }
+    }
+    return json
+  }
+})
+
+// this is a hack, leveraging the internal/implementation knowledge about the enzyme's ShallowWrapper
+// there is no sane way to get this information otherwise though
+const getUnrenderedElement = shallowWrapper => {
+  const symbols = Object.getOwnPropertySymbols(shallowWrapper)
+  const elementValues = symbols.filter(sym => {
+    const val = shallowWrapper[sym]
+    return !!val && val.$$typeof === Symbol.for('react.element')
+  })
+  if (elementValues.length !== 1) {
+    throw new Error(
+      "Could not get unrendered element reliably from the Enzyme's ShallowWrapper. This is a bug in Emotion - please open an issue with repro steps included:\n" +
+        'https://github.com/emotion-js/emotion/issues/new?assignees=&labels=bug%2C+needs+triage&template=--bug-report.md&title='
+    )
+  }
+  return shallowWrapper[elementValues[0]]
+}
+
+const wrappedEnzymeSerializer = {
+  test: enzymeToJsonSerializer.test,
+  print: (enzymeWrapper, printer) => {
+    const isShallow = !!enzymeWrapper.dive
+
+    if (isShallow) {
+      const unrendered = getUnrenderedElement(enzymeWrapper)
+      if (
+        (isEmotionCssPropElementType(unrendered) ||
+          isStyledElementType(unrendered)) &&
+        enzymeWrapper.getElement().type === Symbol.for('react.fragment')
+      ) {
+        return enzymeToJsonSerializer.print(
+          enzymeWrapper.children().last(),
+          printer
+        )
+      }
+    }
+
+    return enzymeToJsonSerializer.print(enzymeWrapper, printer)
+  }
+}
 
 export function createEnzymeSerializer({
   classNameReplacer,
@@ -16,7 +71,7 @@ export function createEnzymeSerializer({
   })
   return {
     test(node: *) {
-      return enzymeSerializer.test(node) || emotionSerializer.test(node)
+      return wrappedEnzymeSerializer.test(node) || emotionSerializer.test(node)
     },
     serialize(
       node: *,
@@ -26,9 +81,9 @@ export function createEnzymeSerializer({
       refs: *,
       printer: Function
     ) {
-      if (enzymeSerializer.test(node)) {
+      if (wrappedEnzymeSerializer.test(node)) {
         const tickled = enzymeTickler.tickle(node)
-        return enzymeSerializer.print(
+        return wrappedEnzymeSerializer.print(
           tickled,
           // https://github.com/facebook/jest/blob/470ef2d29c576d6a10de344ec25d5a855f02d519/packages/pretty-format/src/index.ts#L281
           valChild => printer(valChild, config, indentation, depth, refs)
diff --git a/packages/jest/src/create-serializer.js b/packages/jest/src/create-serializer.js
index 97c070dfd..75b984c34 100644
--- a/packages/jest/src/create-serializer.js
+++ b/packages/jest/src/create-serializer.js
@@ -115,46 +115,45 @@ function isShallowEnzymeElement(
   })
 }
 
-const createConvertEmotionElements =
-  (keys: string[], printer: *) => (node: any) => {
-    if (isPrimitive(node)) {
-      return node
-    }
-    if (isEmotionCssPropEnzymeElement(node)) {
-      const className = enzymeTickler.getTickledClassName(node.props.css)
-      const labels = getLabelsFromClassName(keys, className || '')
-
-      if (isShallowEnzymeElement(node, keys, labels)) {
-        const emotionType = node.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
-        // emotionType will be a string for DOM elements
-        const type =
-          typeof emotionType === 'string'
-            ? emotionType
-            : emotionType.displayName || emotionType.name || 'Component'
-        return {
-          ...node,
-          props: filterEmotionProps({
-            ...node.props,
-            className
-          }),
-          type
-        }
-      } else {
-        return node.children[0]
-      }
-    }
-    if (isEmotionCssPropElementType(node)) {
+const createConvertEmotionElements = (keys: string[]) => (node: any) => {
+  if (isPrimitive(node)) {
+    return node
+  }
+  if (isEmotionCssPropEnzymeElement(node)) {
+    const className = enzymeTickler.getTickledClassName(node.props.css)
+    const labels = getLabelsFromClassName(keys, className || '')
+
+    if (isShallowEnzymeElement(node, keys, labels)) {
+      const emotionType = node.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
+      // emotionType will be a string for DOM elements
+      const type =
+        typeof emotionType === 'string'
+          ? emotionType
+          : emotionType.displayName || emotionType.name || 'Component'
       return {
         ...node,
-        props: filterEmotionProps(node.props),
-        type: node.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
+        props: filterEmotionProps({
+          ...node.props,
+          className
+        }),
+        type
       }
+    } else {
+      return node.children[node.children.length - 1]
     }
-    if (isReactElement(node)) {
-      return copyProps({}, node)
+  }
+  if (isEmotionCssPropElementType(node)) {
+    return {
+      ...node,
+      props: filterEmotionProps(node.props),
+      type: node.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
     }
-    return node
   }
+  if (isReactElement(node)) {
+    return copyProps({}, node)
+  }
+  return node
+}
 
 function clean(node: any, classNames: string[]) {
   if (Array.isArray(node)) {
@@ -199,7 +198,7 @@ export function createSerializer({
   ) {
     const elements = getStyleElements()
     const keys = getKeys(elements)
-    const convertEmotionElements = createConvertEmotionElements(keys, printer)
+    const convertEmotionElements = createConvertEmotionElements(keys)
     const converted = deepTransform(val, convertEmotionElements)
     const nodes = getNodes(converted)
     const classNames = getClassNamesFromNodes(nodes)
diff --git a/packages/jest/src/enzyme-tickler.js b/packages/jest/src/enzyme-tickler.js
index 6daacfb82..aa7af41f3 100644
--- a/packages/jest/src/enzyme-tickler.js
+++ b/packages/jest/src/enzyme-tickler.js
@@ -12,8 +12,12 @@ export const tickle = wrapper => {
       return
     }
 
-    const wrapped = (isShallow ? el.dive() : el.children()).first()
-    tickledCssProps.set(cssProp, wrapped.props().className)
+    const rendered = (isShallow ? el.dive() : el.children()).last()
+    const unwrapped =
+      rendered.type() === Symbol.for('react.fragment')
+        ? rendered.children().last()
+        : rendered
+    tickledCssProps.set(cssProp, unwrapped.props().className)
   })
   return wrapper
 }
diff --git a/packages/jest/src/utils.js b/packages/jest/src/utils.js
index 5d22c41a2..88fe4b997 100644
--- a/packages/jest/src/utils.js
+++ b/packages/jest/src/utils.js
@@ -59,13 +59,8 @@ function getClassNameProp(node) {
 }
 
 function unwrapFromPotentialFragment(node) {
-  // this symbol is rather stable and won't change, it is how jest was handling this initially:
-  // https://github.com/facebook/jest/blob/b0d28888154aec2e05cfb3249520b9a2a1a7c12d/packages/pretty-format/src/plugins/react_element.js#L20
-  // in environments without Symbols this would fail (React fallbacks to integers then for the element types) but we don't support such environments
-  // since then jest has started using `react-is` package and that could be used here too
   if (node.type() === Symbol.for('react.fragment')) {
-    // the rendered element always comes second as the first slot is reserved for the potential style element
-    return node.childAt(1)
+    return node.children().last()
   }
   return node
 }
@@ -99,11 +94,18 @@ export function isReactElement(val: any): boolean {
 export function isEmotionCssPropElementType(val: any): boolean {
   return (
     val.$$typeof === Symbol.for('react.element') &&
-    val.type.$$typeof === Symbol.for('react.forward_ref') &&
     val.type.displayName === 'EmotionCssPropInternal'
   )
 }
 
+export function isStyledElementType(val: any): boolean {
+  if (val.$$typeof !== Symbol.for('react.element')) {
+    return false
+  }
+  const { type } = val
+  return type.__emotion_real === type
+}
+
 export function isEmotionCssPropEnzymeElement(val: any): boolean {
   return (
     val.$$typeof === Symbol.for('react.test.json') &&
diff --git a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
index fbfd548ed..08c2abc06 100644
--- a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
+++ b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
@@ -7,14 +7,9 @@ exports[`enzyme mount basic 1`] = `
 
 <Greeting>
   <div
-    css="unknown styles"
+    className="emotion-0"
   >
-    <Noop />
-    <div
-      className="emotion-0"
-    >
-      hello
-    </div>
+    hello
   </div>
 </Greeting>
 `;
@@ -25,14 +20,13 @@ exports[`enzyme mount conditional styles 1`] = `
 }
 
 <div
-  css="unknown styles"
+  className="emotion-0"
 >
-  <Noop />
-  <div
-    className="emotion-0"
+  <span
+    className="emotion-1"
   >
-    <Noop />
-  </div>
+    Test content
+  </span>
 </div>
 `;
 
@@ -42,24 +36,18 @@ exports[`enzyme mount displayName 1`] = `
 }
 
 <CustomDisplayName
-  css="unknown styles"
+  className="emotion-0"
 >
-  <Noop />
-  <CustomDisplayName
+  <div
     className="emotion-0"
   >
-    <div
-      className="emotion-0"
-    >
-      Hello
-    </div>
-  </CustomDisplayName>
+    Hello
+  </div>
 </CustomDisplayName>
 `;
 
 exports[`enzyme mount empty styled 1`] = `
 <Greeting>
-  <Noop />
   <div
     className="emotion-0 emotion-1"
   >
@@ -76,14 +64,9 @@ exports[`enzyme mount nested 1`] = `
 <div>
   <Greeting>
     <div
-      css="unknown styles"
+      className="emotion-0"
     >
-      <Noop />
-      <div
-        className="emotion-0"
-      >
-        hello
-      </div>
+      hello
     </div>
   </Greeting>
 </div>
@@ -96,18 +79,13 @@ exports[`enzyme mount nested displayName 1`] = `
 
 <div>
   <CustomDisplayName
-    css="unknown styles"
+    className="emotion-0"
   >
-    <Noop />
-    <CustomDisplayName
+    <div
       className="emotion-0"
     >
-      <div
-        className="emotion-0"
-      >
-        Hello
-      </div>
-    </CustomDisplayName>
+      Hello
+    </div>
   </CustomDisplayName>
 </div>
 `;
@@ -119,7 +97,6 @@ exports[`enzyme mount nested styled 1`] = `
 
 <div>
   <Greeting>
-    <Noop />
     <div
       className="emotion-0 emotion-1"
     >
@@ -141,19 +118,13 @@ exports[`enzyme mount nested styled with css prop 1`] = `
 
 <div>
   <Button
-    css="unknown styles"
+    className="emotion-0"
   >
-    <Noop />
-    <Button
-      className="emotion-0"
+    <button
+      className="emotion-1 emotion-2"
     >
-      <Noop />
-      <button
-        className="emotion-1 emotion-2"
-      >
-        iChenLei
-      </button>
-    </Button>
+      iChenLei
+    </button>
   </Button>
 </div>
 `;
@@ -164,7 +135,6 @@ exports[`enzyme mount styled 1`] = `
 }
 
 <Greeting>
-  <Noop />
   <div
     className="emotion-0 emotion-1"
   >
@@ -184,19 +154,13 @@ exports[`enzyme mount styled with css prop 1`] = `
 }
 
 <Button
-  css="unknown styles"
+  className="emotion-0"
 >
-  <Noop />
-  <Button
-    className="emotion-0"
+  <button
+    className="emotion-1 emotion-2"
   >
-    <Noop />
-    <button
-      className="emotion-1 emotion-2"
-    >
-      iChenLei
-    </button>
-  </Button>
+    iChenLei
+  </button>
 </Button>
 `;
 
@@ -214,7 +178,6 @@ exports[`enzyme mount theming 1`] = `
       }
     }
   >
-    <Noop />
     <button
       className="emotion-0 emotion-1"
     >
@@ -235,7 +198,6 @@ exports[`enzyme mount theming 1`] = `
         }
       }
     >
-      <Noop />
       <button
         className="emotion-0 emotion-1"
       >
@@ -253,14 +215,9 @@ exports[`enzyme mount with array of styles as css prop 1`] = `
 }
 
 <div
-  css="unknown styles"
+  className="emotion-0"
 >
-  <Noop />
-  <div
-    className="emotion-0"
-  >
-    Test content
-  </div>
+  Test content
 </div>
 `;
 
@@ -272,18 +229,13 @@ exports[`enzyme mount with array of styles in a composite inner child 1`] = `
 
 <div>
   <Inner
-    css="unknown styles"
+    className="emotion-0"
   >
-    <Noop />
-    <Inner
+    <span
       className="emotion-0"
     >
-      <span
-        className="emotion-0"
-      >
-        Test content
-      </span>
-    </Inner>
+      Test content
+    </span>
   </Inner>
 </div>
 `;
@@ -304,14 +256,9 @@ exports[`enzyme mount with prop containing css element 1`] = `
 >
   <div>
     <p
-      css="unknown styles"
+      className="emotion-0"
     >
-      <Noop />
-      <p
-        className="emotion-0"
-      >
-        Hello
-      </p>
+      Hello
     </p>
      
     World!
@@ -337,16 +284,10 @@ exports[`enzyme mount with prop containing css element not at the top level 1`]
   >
     <div>
       <p
-        css="unknown styles"
+        className="emotion-0"
         id="something"
       >
-        <Noop />
-        <p
-          className="emotion-0"
-          id="something"
-        >
-          Hello
-        </p>
+        Hello
       </p>
        
       World!
@@ -378,16 +319,10 @@ exports[`enzyme mount with prop containing css element with other label 1`] = `
     }
   >
     <p
-      css="unknown styles"
+      className="emotion-0"
       id="something"
     >
-      <Noop />
-      <p
-        className="emotion-0"
-        id="something"
-      >
-        Hello
-      </p>
+      Hello
     </p>
      
     World!
@@ -412,16 +347,10 @@ exports[`enzyme mount with prop containing css element with other props 1`] = `
 >
   <div>
     <p
-      css="unknown styles"
+      className="emotion-0"
       id="something"
     >
-      <Noop />
-      <p
-        className="emotion-0"
-        id="something"
-      >
-        Hello
-      </p>
+      Hello
     </p>
      
     World!
@@ -449,18 +378,13 @@ exports[`enzyme mount with styles on top level 1`] = `
 }
 
 <Greeting
-  css="unknown styles"
+  className="emotion-0"
 >
-  <Noop />
-  <Greeting
+  <div
     className="emotion-0"
   >
-    <div
-      className="emotion-0"
-    >
-      Hello
-    </div>
-  </Greeting>
+    Hello
+  </div>
 </Greeting>
 `;
 
@@ -474,28 +398,22 @@ exports[`enzyme parent and child using css property 1`] = `
 }
 
 <div
-  css="unknown styles"
+  className="emotion-0"
 >
-  <Noop />
+  Test content
   <div
-    className="emotion-0"
-  >
-    Test content
-    <div
-      css="unknown styles"
-    >
-      <Noop />
-      <div
-        className="emotion-1"
-      />
-    </div>
-  </div>
+    className="emotion-1"
+  />
 </div>
 `;
 
 exports[`enzyme shallow basic 1`] = `
+.emotion-0 {
+  background-color: red;
+}
+
 <div
-  css="unknown styles"
+  className="emotion-0"
 >
   hello
 </div>
@@ -506,18 +424,15 @@ exports[`enzyme shallow conditional styles 1`] = `
   background-color: black;
 }
 
-<Fragment>
-  <Noop />
-  <div
-    className="emotion-0"
+<div
+  className="emotion-0"
+>
+  <span
+    css="unknown styles"
   >
-    <span
-      css="unknown styles"
-    >
-      Test content
-    </span>
-  </div>
-</Fragment>
+    Test content
+  </span>
+</div>
 `;
 
 exports[`enzyme shallow displayName 1`] = `
@@ -525,23 +440,17 @@ exports[`enzyme shallow displayName 1`] = `
   color: hotpink;
 }
 
-<Fragment>
-  <Noop />
-  <CustomDisplayName
-    className="emotion-0"
-  />
-</Fragment>
+<CustomDisplayName
+  className="emotion-0"
+/>
 `;
 
 exports[`enzyme shallow empty styled 1`] = `
-<Fragment>
-  <Noop />
-  <div
-    className="emotion-0 emotion-1"
-  >
-    Hello
-  </div>
-</Fragment>
+<div
+  className="emotion-0 emotion-1"
+>
+  Hello
+</div>
 `;
 
 exports[`enzyme shallow nested 1`] = `
@@ -553,9 +462,13 @@ exports[`enzyme shallow nested 1`] = `
 `;
 
 exports[`enzyme shallow nested displayName 1`] = `
+.emotion-0 {
+  color: hotpink;
+}
+
 <div>
   <CustomDisplayName
-    css="unknown styles"
+    className="emotion-0"
   />
 </div>
 `;
@@ -569,9 +482,13 @@ exports[`enzyme shallow nested styled 1`] = `
 `;
 
 exports[`enzyme shallow nested styled with css prop 1`] = `
+.emotion-0 {
+  background-color: black;
+}
+
 <div>
   <Button
-    css="unknown styles"
+    className="emotion-0"
   >
     iChenLei
   </Button>
@@ -583,14 +500,11 @@ exports[`enzyme shallow styled 1`] = `
   background-color: red;
 }
 
-<Fragment>
-  <Noop />
-  <div
-    className="emotion-0 emotion-1"
-  >
-    Hello
-  </div>
-</Fragment>
+<div
+  className="emotion-0 emotion-1"
+>
+  Hello
+</div>
 `;
 
 exports[`enzyme shallow styled with css prop 1`] = `
@@ -598,14 +512,11 @@ exports[`enzyme shallow styled with css prop 1`] = `
   background-color: black;
 }
 
-<Fragment>
-  <Noop />
-  <Button
-    className="emotion-0"
-  >
-    iChenLei
-  </Button>
-</Fragment>
+<Button
+  className="emotion-0"
+>
+  iChenLei
+</Button>
 `;
 
 exports[`enzyme shallow theming 1`] = `
@@ -645,20 +556,22 @@ exports[`enzyme shallow with array of styles as css prop 1`] = `
   color: white;
 }
 
-<Fragment>
-  <Noop />
-  <div
-    className="emotion-0"
-  >
-    Test content
-  </div>
-</Fragment>
+<div
+  className="emotion-0"
+>
+  Test content
+</div>
 `;
 
 exports[`enzyme shallow with array of styles in a composite inner child 1`] = `
+.emotion-0 {
+  background-color: black;
+  color: white;
+}
+
 <div>
   <Inner
-    css="unknown styles"
+    className="emotion-0"
   >
     Test content
   </Inner>
@@ -666,9 +579,13 @@ exports[`enzyme shallow with array of styles in a composite inner child 1`] = `
 `;
 
 exports[`enzyme shallow with prop containing css element 1`] = `
+.emotion-0 {
+  background-color: blue;
+}
+
 <div>
   <p
-    css="unknown styles"
+    className="emotion-0"
   >
     Hello
   </p>
@@ -695,6 +612,10 @@ exports[`enzyme shallow with prop containing css element not at the top level 1`
 `;
 
 exports[`enzyme shallow with prop containing css element with other label 1`] = `
+.emotion-0 {
+  background-color: blue;
+}
+
 <Thing
   content={
     <div
@@ -703,7 +624,7 @@ exports[`enzyme shallow with prop containing css element with other label 1`] =
   }
 >
   <p
-    css="unknown styles"
+    className="emotion-0"
     id="something"
   >
     Hello
@@ -714,9 +635,13 @@ exports[`enzyme shallow with prop containing css element with other label 1`] =
 `;
 
 exports[`enzyme shallow with prop containing css element with other props 1`] = `
+.emotion-0 {
+  background-color: blue;
+}
+
 <div>
   <p
-    css="unknown styles"
+    className="emotion-0"
     id="something"
   >
     Hello
@@ -737,14 +662,11 @@ exports[`enzyme shallow with styles on top level 1`] = `
   background-color: red;
 }
 
-<Fragment>
-  <Noop />
-  <Greeting
-    className="emotion-0"
-  >
-    Hello
-  </Greeting>
-</Fragment>
+<Greeting
+  className="emotion-0"
+>
+  Hello
+</Greeting>
 `;
 
 exports[`enzyme with prop containing css element in fragment 1`] = `

From d56c781e4b35fe4d1661daec3f3fdafef50930c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 13 Nov 2021 11:35:40 +0100
Subject: [PATCH 10/14] Fix more cases and add new tests

---
 packages/jest/src/create-enzyme-serializer.js |  15 +-
 packages/jest/src/enzyme-tickler.js           |  11 +-
 packages/jest/src/utils.js                    |   2 +-
 .../__snapshots__/react-enzyme.test.js.snap   | 183 ++++++++++++++++--
 packages/jest/test/react-enzyme.test.js       |  95 ++++++---
 5 files changed, 252 insertions(+), 54 deletions(-)

diff --git a/packages/jest/src/create-enzyme-serializer.js b/packages/jest/src/create-enzyme-serializer.js
index ddfe10036..52ec73be7 100644
--- a/packages/jest/src/create-enzyme-serializer.js
+++ b/packages/jest/src/create-enzyme-serializer.js
@@ -3,7 +3,11 @@ import type { Options } from './create-serializer'
 import { createSerializer as createEmotionSerializer } from './create-serializer'
 import * as enzymeTickler from './enzyme-tickler'
 import { createSerializer as createEnzymeToJsonSerializer } from 'enzyme-to-json'
-import { isEmotionCssPropElementType, isStyledElementType } from './utils'
+import {
+  isEmotionCssPropElementType,
+  isStyledElementType,
+  unwrapFromPotentialFragment
+} from './utils'
 
 const enzymeToJsonSerializer = createEnzymeToJsonSerializer({
   map: json => {
@@ -43,15 +47,14 @@ const wrappedEnzymeSerializer = {
   print: (enzymeWrapper, printer) => {
     const isShallow = !!enzymeWrapper.dive
 
-    if (isShallow) {
+    if (isShallow && enzymeWrapper.root() === enzymeWrapper) {
       const unrendered = getUnrenderedElement(enzymeWrapper)
       if (
-        (isEmotionCssPropElementType(unrendered) ||
-          isStyledElementType(unrendered)) &&
-        enzymeWrapper.getElement().type === Symbol.for('react.fragment')
+        isEmotionCssPropElementType(unrendered) ||
+        isStyledElementType(unrendered)
       ) {
         return enzymeToJsonSerializer.print(
-          enzymeWrapper.children().last(),
+          unwrapFromPotentialFragment(enzymeWrapper),
           printer
         )
       }
diff --git a/packages/jest/src/enzyme-tickler.js b/packages/jest/src/enzyme-tickler.js
index aa7af41f3..45b52f72c 100644
--- a/packages/jest/src/enzyme-tickler.js
+++ b/packages/jest/src/enzyme-tickler.js
@@ -1,3 +1,5 @@
+import { unwrapFromPotentialFragment } from './utils'
+
 const tickledCssProps = new WeakMap()
 
 export const getTickledClassName = cssProp => tickledCssProps.get(cssProp)
@@ -13,11 +15,10 @@ export const tickle = wrapper => {
     }
 
     const rendered = (isShallow ? el.dive() : el.children()).last()
-    const unwrapped =
-      rendered.type() === Symbol.for('react.fragment')
-        ? rendered.children().last()
-        : rendered
-    tickledCssProps.set(cssProp, unwrapped.props().className)
+    tickledCssProps.set(
+      cssProp,
+      unwrapFromPotentialFragment(rendered).props().className
+    )
   })
   return wrapper
 }
diff --git a/packages/jest/src/utils.js b/packages/jest/src/utils.js
index 88fe4b997..766971d20 100644
--- a/packages/jest/src/utils.js
+++ b/packages/jest/src/utils.js
@@ -58,7 +58,7 @@ function getClassNameProp(node) {
   return (node && node.prop('className')) || ''
 }
 
-function unwrapFromPotentialFragment(node) {
+export function unwrapFromPotentialFragment(node) {
   if (node.type() === Symbol.for('react.fragment')) {
     return node.children().last()
   }
diff --git a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
index 08c2abc06..d7dc8a6ea 100644
--- a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
+++ b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
@@ -56,6 +56,67 @@ exports[`enzyme mount empty styled 1`] = `
 </Greeting>
 `;
 
+exports[`enzyme mount fragment with multiple css prop elements 1`] = `
+.emotion-0 {
+  background-color: hotpink;
+}
+
+.emotion-1 {
+  background-color: green;
+}
+
+.emotion-2 {
+  background-color: blue;
+}
+
+<Component>
+  <div
+    className="emotion-0"
+  />
+  <div
+    className="emotion-1"
+  />
+  <div
+    className="emotion-2"
+  />
+</Component>
+`;
+
+exports[`enzyme mount multiple selected components 1`] = `
+Array [
+  .emotion-0 {
+  background-color: hotpink;
+}
+
+<li
+    className="emotion-0"
+    data-item={true}
+  >
+    hello
+  </li>,
+  .emotion-0 {
+  background-color: blue;
+}
+
+<li
+    className="emotion-0"
+    data-item={true}
+  >
+    beautiful
+  </li>,
+  .emotion-0 {
+  background-color: green;
+}
+
+<li
+    className="emotion-0"
+    data-item={true}
+  >
+    world
+  </li>,
+]
+`;
+
 exports[`enzyme mount nested 1`] = `
 .emotion-0 {
   background-color: red;
@@ -129,6 +190,25 @@ exports[`enzyme mount nested styled with css prop 1`] = `
 </div>
 `;
 
+exports[`enzyme mount parent and child using css property 1`] = `
+.emotion-0 {
+  background-color: black;
+}
+
+.emotion-1 {
+  color: white;
+}
+
+<div
+  className="emotion-0"
+>
+  Test content
+  <div
+    className="emotion-1"
+  />
+</div>
+`;
+
 exports[`enzyme mount styled 1`] = `
 .emotion-0 {
   background-color: red;
@@ -208,6 +288,8 @@ exports[`enzyme mount theming 1`] = `
 </div>
 `;
 
+exports[`enzyme mount unmatched selector 1`] = `null`;
+
 exports[`enzyme mount with array of styles as css prop 1`] = `
 .emotion-0 {
   background-color: black;
@@ -388,25 +470,6 @@ exports[`enzyme mount with styles on top level 1`] = `
 </Greeting>
 `;
 
-exports[`enzyme parent and child using css property 1`] = `
-.emotion-0 {
-  background-color: black;
-}
-
-.emotion-1 {
-  color: white;
-}
-
-<div
-  className="emotion-0"
->
-  Test content
-  <div
-    className="emotion-1"
-  />
-</div>
-`;
-
 exports[`enzyme shallow basic 1`] = `
 .emotion-0 {
   background-color: red;
@@ -453,6 +516,67 @@ exports[`enzyme shallow empty styled 1`] = `
 </div>
 `;
 
+exports[`enzyme shallow fragment with multiple css prop elements 1`] = `
+.emotion-0 {
+  background-color: hotpink;
+}
+
+.emotion-1 {
+  background-color: green;
+}
+
+.emotion-2 {
+  background-color: blue;
+}
+
+<Fragment>
+  <div
+    className="emotion-0"
+  />
+  <div
+    className="emotion-1"
+  />
+  <div
+    className="emotion-2"
+  />
+</Fragment>
+`;
+
+exports[`enzyme shallow multiple selected components 1`] = `
+Array [
+  .emotion-0 {
+  background-color: hotpink;
+}
+
+<li
+    className="emotion-0"
+    data-item={true}
+  >
+    hello
+  </li>,
+  .emotion-0 {
+  background-color: blue;
+}
+
+<li
+    className="emotion-0"
+    data-item={true}
+  >
+    beautiful
+  </li>,
+  .emotion-0 {
+  background-color: green;
+}
+
+<li
+    className="emotion-0"
+    data-item={true}
+  >
+    world
+  </li>,
+]
+`;
+
 exports[`enzyme shallow nested 1`] = `
 <div>
   <Greeting>
@@ -495,6 +619,25 @@ exports[`enzyme shallow nested styled with css prop 1`] = `
 </div>
 `;
 
+exports[`enzyme shallow parent and child using css property 1`] = `
+.emotion-0 {
+  background-color: black;
+}
+
+.emotion-1 {
+  color: white;
+}
+
+<div
+  className="emotion-0"
+>
+  Test content
+  <div
+    className="emotion-1"
+  />
+</div>
+`;
+
 exports[`enzyme shallow styled 1`] = `
 .emotion-0 {
   background-color: red;
@@ -550,6 +693,8 @@ exports[`enzyme shallow theming 1`] = `
 </div>
 `;
 
+exports[`enzyme shallow unmatched selector 1`] = `null`;
+
 exports[`enzyme shallow with array of styles as css prop 1`] = `
 .emotion-0 {
   background-color: black;
diff --git a/packages/jest/test/react-enzyme.test.js b/packages/jest/test/react-enzyme.test.js
index 2e772a5c6..76888ddad 100644
--- a/packages/jest/test/react-enzyme.test.js
+++ b/packages/jest/test/react-enzyme.test.js
@@ -14,6 +14,8 @@ import * as serializer from '@emotion/jest/enzyme-serializer'
 expect.extend(matchers)
 expect.addSnapshotSerializer(serializer)
 
+const identity = v => v
+
 const cases = {
   basic: {
     render() {
@@ -278,47 +280,94 @@ const cases = {
         </div>
       )
     }
+  },
+  'parent and child using css property': {
+    render() {
+      const parentStyle = css`
+        background-color: black;
+      `
+
+      const childStyle = css`
+        color: white;
+      `
+
+      return (
+        <div css={parentStyle}>
+          Test content
+          <div css={childStyle} />
+        </div>
+      )
+    }
+  },
+  'fragment with multiple css prop elements': {
+    render() {
+      const Component = () => {
+        return (
+          <>
+            <div css={{ backgroundColor: 'hotpink' }} />
+            <div css={{ backgroundColor: 'green' }} />
+            <div css={{ backgroundColor: 'blue' }} />
+          </>
+        )
+      }
+      return <Component />
+    }
+  },
+  'multiple selected components': {
+    selector: tree =>
+      // with simple `tree.find('[data-item]')` we get elements twice with `mount` since it selects both the css prop element and the host element
+      tree.findWhere(
+        n => typeof n.type() !== 'string' && n.props()['data-item']
+      ),
+    render() {
+      return (
+        <ul>
+          <li data-item css={{ backgroundColor: 'hotpink' }}>
+            {'hello'}
+          </li>
+          <li data-item css={{ backgroundColor: 'blue' }}>
+            {'beautiful'}
+          </li>
+          <li data-item css={{ backgroundColor: 'green' }}>
+            {'world'}
+          </li>
+        </ul>
+      )
+    }
+  },
+  'unmatched selector': {
+    selector: tree => tree.find('div'),
+    render() {
+      return (
+        <ul>
+          <li css={{ backgroundColor: 'hotpink' }}>{'hello'}</li>
+          <li css={{ backgroundColor: 'blue' }}>{'beautiful'}</li>
+          <li css={{ backgroundColor: 'green' }}>{'world'}</li>
+        </ul>
+      )
+    }
   }
 }
 
 describe('enzyme', () => {
   jestInCase(
     'shallow',
-    ({ render }) => {
+    ({ render, selector = identity }) => {
       const wrapper = enzyme.shallow(render())
-      expect(wrapper).toMatchSnapshot()
+      expect(selector(wrapper)).toMatchSnapshot()
     },
     cases
   )
 
   jestInCase(
     'mount',
-    ({ render }) => {
+    ({ render, selector = identity }) => {
       const wrapper = enzyme.mount(render())
-      expect(wrapper).toMatchSnapshot()
+      expect(selector(wrapper)).toMatchSnapshot()
     },
     cases
   )
 
-  test('parent and child using css property', () => {
-    const parentStyle = css`
-      background-color: black;
-    `
-
-    const childStyle = css`
-      color: white;
-    `
-
-    const wrapper = enzyme.mount(
-      <div css={parentStyle}>
-        Test content
-        <div css={childStyle} />
-      </div>
-    )
-
-    expect(wrapper).toMatchSnapshot()
-  })
-
   test('with prop containing css element in fragment', () => {
     const FragmentComponent = () => (
       <React.Fragment>

From 298afaaa04853e945b76636071c1b838e8b75956 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 13 Nov 2021 16:39:52 +0100
Subject: [PATCH 11/14] add tests for avoiding id mismatches when using css
 prop and ClassNames component

---
 packages/react/__tests__/rehydration.js | 100 +++++++++++++++++++++++-
 1 file changed, 99 insertions(+), 1 deletion(-)

diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
index afc799e23..1f56c634a 100644
--- a/packages/react/__tests__/rehydration.js
+++ b/packages/react/__tests__/rehydration.js
@@ -20,6 +20,7 @@ let jsx
 let styled
 let CacheProvider
 let Global
+let ClassNames
 let createEmotionServer
 
 const resetAllModules = () => {
@@ -35,6 +36,7 @@ const resetAllModules = () => {
   jsx = emotionReact.jsx
   CacheProvider = emotionReact.CacheProvider
   Global = emotionReact.Global
+  ClassNames = emotionReact.ClassNames
   createEmotionServer = require('@emotion/server/create-instance').default
   styled = require('@emotion/styled').default
 }
@@ -618,7 +620,7 @@ describe('react18', () => {
     global.IS_REACT_ACT_ENVIRONMENT = previousIsReactActEnvironment
   })
 
-  test('no hydration mismatch when using useId', () => {
+  test('no hydration mismatch for styled when using useId', () => {
     const finalHTML = disableBrowserEnvTemporarily(() => {
       resetAllModules()
 
@@ -650,4 +652,100 @@ describe('react18', () => {
     expect((console.error: any).mock.calls).toMatchInlineSnapshot(`Array []`)
     expect((console.warn: any).mock.calls).toMatchInlineSnapshot(`Array []`)
   })
+
+  test('no hydration mismatch for css prop when using useId', () => {
+    const finalHTML = disableBrowserEnvTemporarily(() => {
+      resetAllModules()
+
+      function DivWithId({ className }) {
+        const id = (React: any).useId()
+        return <div id={id} className={className} />
+      }
+
+      return ReactDOMServer.renderToString(
+        <DivWithId
+          css={{
+            border: '1px solid black'
+          }}
+        />
+      )
+    })
+
+    safeQuerySelector('body').innerHTML = `<div id="root">${finalHTML}</div>`
+
+    resetAllModules()
+
+    function DivWithId({ className }) {
+      const id = (React: any).useId()
+      return <div id={id} className={className} />
+    }
+
+    ;(React: any).unstable_act(() => {
+      ReactDOM.hydrateRoot(
+        safeQuerySelector('#root'),
+        <DivWithId
+          css={{
+            border: '1px solid black'
+          }}
+        />
+      )
+    })
+
+    expect((console.error: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+    expect((console.warn: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+  })
+
+  test('no hydration mismatch for ClassNames when using useId', () => {
+    const finalHTML = disableBrowserEnvTemporarily(() => {
+      resetAllModules()
+
+      const DivWithId = ({ className }) => {
+        const id = (React: any).useId()
+        return <div id={id} className={className} />
+      }
+
+      return ReactDOMServer.renderToString(
+        <ClassNames>
+          {({ css }) => {
+            return (
+              <DivWithId
+                className={css({
+                  border: '1px solid black'
+                })}
+              />
+            )
+          }}
+        </ClassNames>
+      )
+    })
+
+    safeQuerySelector('body').innerHTML = `<div id="root">${finalHTML}</div>`
+
+    resetAllModules()
+
+    const DivWithId = ({ className }) => {
+      const id = (React: any).useId()
+      return <div id={id} className={className} />
+    }
+
+    ;(React: any).unstable_act(() => {
+      ReactDOM.hydrateRoot(
+        safeQuerySelector('#root'),
+        <ClassNames>
+          {({ css }) => {
+            return (
+              <DivWithId
+                className={css({
+                  border: '1px solid black'
+                })}
+              />
+            )
+          }}
+        </ClassNames>
+      )
+    })
+
+    expect((console.error: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+    expect((console.warn: any).mock.calls).toMatchInlineSnapshot(`Array []`)
+  })
 })

From 60d992eb286d6871957ff7f03c65aa56e0e4256f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 13 Nov 2021 16:46:16 +0100
Subject: [PATCH 12/14] Fix flow errors

---
 packages/jest/src/utils.js              | 2 +-
 packages/react/__tests__/rehydration.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/jest/src/utils.js b/packages/jest/src/utils.js
index 766971d20..6eb7dbd14 100644
--- a/packages/jest/src/utils.js
+++ b/packages/jest/src/utils.js
@@ -58,7 +58,7 @@ function getClassNameProp(node) {
   return (node && node.prop('className')) || ''
 }
 
-export function unwrapFromPotentialFragment(node) {
+export function unwrapFromPotentialFragment(node: *) {
   if (node.type() === Symbol.for('react.fragment')) {
     return node.children().last()
   }
diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
index 1f56c634a..d9f382aba 100644
--- a/packages/react/__tests__/rehydration.js
+++ b/packages/react/__tests__/rehydration.js
@@ -657,7 +657,7 @@ describe('react18', () => {
     const finalHTML = disableBrowserEnvTemporarily(() => {
       resetAllModules()
 
-      function DivWithId({ className }) {
+      function DivWithId({ className }: { className?: string }) {
         const id = (React: any).useId()
         return <div id={id} className={className} />
       }
@@ -675,7 +675,7 @@ describe('react18', () => {
 
     resetAllModules()
 
-    function DivWithId({ className }) {
+    function DivWithId({ className }: { className?: string }) {
       const id = (React: any).useId()
       return <div id={id} className={className} />
     }

From 76ddec53b392414fef8603ae192a2bc3cfadcf2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 13 Nov 2021 16:49:08 +0100
Subject: [PATCH 13/14] Reset html before each rehydration test

---
 packages/react/__tests__/rehydration.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
index d9f382aba..32d300afc 100644
--- a/packages/react/__tests__/rehydration.js
+++ b/packages/react/__tests__/rehydration.js
@@ -65,6 +65,11 @@ const disableBrowserEnvTemporarily = <T>(fn: () => T): T => {
   }
 }
 
+beforeEach(() => {
+  safeQuerySelector('head').innerHTML = ''
+  safeQuerySelector('body').innerHTML = ''
+})
+
 test("cache created in render doesn't cause a hydration mismatch", () => {
   safeQuerySelector('body').innerHTML = [
     '<div id="root">',
@@ -481,7 +486,6 @@ test('duplicated global styles can be removed safely after rehydrating HTML SSRe
     }
   })
 
-  safeQuerySelector('head').innerHTML = ''
   safeQuerySelector('body').innerHTML = `<div id="root">${app}</div>`
 
   expect(safeQuerySelector('html')).toMatchInlineSnapshot(`

From d386c78c6e130f91d0f938d3ad8f88cbc25ffaad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 14 Nov 2021 06:46:43 +0100
Subject: [PATCH 14/14] tweak changesets

---
 .changeset/purple-tigers-breathe.md | 8 ++++++++
 .changeset/strange-kids-change.md   | 5 +++--
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/purple-tigers-breathe.md

diff --git a/.changeset/purple-tigers-breathe.md b/.changeset/purple-tigers-breathe.md
new file mode 100644
index 000000000..80e500a4f
--- /dev/null
+++ b/.changeset/purple-tigers-breathe.md
@@ -0,0 +1,8 @@
+---
+'@emotion/jest': minor
+---
+
+author: @eps1lon
+author: @Andarist
+
+Adjusted the serialization logic to unwrap rendered elements from Fragments that had to be added to fix hydration mismatches caused by `React.useId` usage (the upcoming API of the React 18).
diff --git a/.changeset/strange-kids-change.md b/.changeset/strange-kids-change.md
index 42025134b..3548c9d29 100644
--- a/.changeset/strange-kids-change.md
+++ b/.changeset/strange-kids-change.md
@@ -1,5 +1,6 @@
 ---
-'@emotion/styled': patch
+'@emotion/react': minor
+'@emotion/styled': minor
 ---
 
-Fix hydration mismatches if `React.useId` is used
+Fixed hydration mismatches if `React.useId` (the upcoming API of the React 18) is used within a tree below our components.