Update TypeScript, ESLint and Prettier (#3200)

* Update TypeScript * update in site too * udpaet eslint typescript * update eslint * Update Prettier * format files * update some snapshots * update some snapshots
emotion-js · Jun 16, 2024 · b4da6d3 · b4da6d3
1 parent 65a1eea
commit b4da6d3
Show file tree

Hide file tree

Showing 38 changed files with 1,663 additions and 482 deletions.
diff --git a/package.json b/package.json
@@ -185,8 +185,8 @@
     "@types/jest": "^27.0.3",
     "@types/node": "^12.20.37",
     "@types/react": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
     "babel-check-duplicated-nodes": "^1.0.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.4.5",
@@ -200,14 +200,14 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
-    "eslint": "^7.10.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-react": "^1.1.7",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.21.3",
-    "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "html-tag-names": "^1.1.2",
     "husky": "^3.0.9",
     "jest": "^27.4.5",
@@ -223,7 +223,7 @@
     "npm-run-all": "^4.0.2",
     "opencollective": "^1.0.3",
     "polished": "^1.2.1",
-    "prettier": "^2.3.0",
+    "prettier": "^3.3.2",
     "raf": "^3.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -235,7 +235,7 @@
     "react18-test-renderer": "npm:react-test-renderer@18.0.0-rc.0-next-aa8f2bdbc-20211215",
     "svg-tag-names": "^1.1.1",
     "through": "^2.3.8",
-    "typescript": "^4.5.5",
+    "typescript": "^5.4.5",
     "unified": "^6.1.6",
     "webpack-bundle-analyzer": "3.3.2"
   },

diff --git a/packages/babel-plugin/__tests__/__snapshots__/styled.js.snap b/packages/babel-plugin/__tests__/__snapshots__/styled.js.snap
@@ -901,15 +901,13 @@ exports[`emotion-babel-plugin styled two-consecutive-interpolations 1`] = `
 import { css } from '@emotion/react'
 
 const H1 = styled.h1\`
-  \${props =>
-    css\`
-      color: red;
-    \`}
+  \${props => css\`
+    color: red;
+  \`}
   /* dummy comment */
-  \${props =>
-    css\`
-      text-transform: uppercase;
-    \`}
+  \${props => css\`
+    text-transform: uppercase;
+  \`}
 \`
 
 
@@ -927,7 +925,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "15r1ir2-H1",
   styles: "text-transform:uppercase;label:H1;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVTyIsImZpbGUiOiJ0d28tY29uc2VjdXRpdmUtaW50ZXJwb2xhdGlvbnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBIMSA9IHN0eWxlZC5oMWBcbiAgJHtwcm9wcyA9PlxuICAgIGNzc2BcbiAgICAgIGNvbG9yOiByZWQ7XG4gICAgYH1cbiAgLyogZHVtbXkgY29tbWVudCAqL1xuICAke3Byb3BzID0+XG4gICAgY3NzYFxuICAgICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgICBgfVxuYFxuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRZ0IiLCJmaWxlIjoidHdvLWNvbnNlY3V0aXZlLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgSDEgPSBzdHlsZWQuaDFgXG4gICR7cHJvcHMgPT4gY3NzYFxuICAgIGNvbG9yOiByZWQ7XG4gIGB9XG4gIC8qIGR1bW15IGNvbW1lbnQgKi9cbiAgJHtwcm9wcyA9PiBjc3NgXG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgYH1cbmBcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
@@ -937,7 +935,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1yd8rfk-H1",
   styles: "color:red;label:H1;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLTyIsImZpbGUiOiJ0d28tY29uc2VjdXRpdmUtaW50ZXJwb2xhdGlvbnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBIMSA9IHN0eWxlZC5oMWBcbiAgJHtwcm9wcyA9PlxuICAgIGNzc2BcbiAgICAgIGNvbG9yOiByZWQ7XG4gICAgYH1cbiAgLyogZHVtbXkgY29tbWVudCAqL1xuICAke3Byb3BzID0+XG4gICAgY3NzYFxuICAgICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgICBgfVxuYFxuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJZ0IiLCJmaWxlIjoidHdvLWNvbnNlY3V0aXZlLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgSDEgPSBzdHlsZWQuaDFgXG4gICR7cHJvcHMgPT4gY3NzYFxuICAgIGNvbG9yOiByZWQ7XG4gIGB9XG4gIC8qIGR1bW15IGNvbW1lbnQgKi9cbiAgJHtwcm9wcyA9PiBjc3NgXG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgYH1cbmBcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
@@ -946,7 +944,7 @@ const H1 = /*#__PURE__*/_styled("h1", process.env.NODE_ENV === "production" ? {
 } : {
   target: "e45grep0",
   label: "H1"
-})(props => _ref2, props => _ref, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0IiLCJmaWxlIjoidHdvLWNvbnNlY3V0aXZlLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgSDEgPSBzdHlsZWQuaDFgXG4gICR7cHJvcHMgPT5cbiAgICBjc3NgXG4gICAgICBjb2xvcjogcmVkO1xuICAgIGB9XG4gIC8qIGR1bW15IGNvbW1lbnQgKi9cbiAgJHtwcm9wcyA9PlxuICAgIGNzc2BcbiAgICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gICAgYH1cbmBcbiJdfQ== */"));"
+})(props => _ref2, props => _ref, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0IiLCJmaWxlIjoidHdvLWNvbnNlY3V0aXZlLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgSDEgPSBzdHlsZWQuaDFgXG4gICR7cHJvcHMgPT4gY3NzYFxuICAgIGNvbG9yOiByZWQ7XG4gIGB9XG4gIC8qIGR1bW15IGNvbW1lbnQgKi9cbiAgJHtwcm9wcyA9PiBjc3NgXG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgYH1cbmBcbiJdfQ== */"));"
 `;
 
 exports[`emotion-babel-plugin styled with-spread 1`] = `

diff --git a/packages/babel-plugin/__tests__/styled-macro/__fixtures__/two-consecutive-interpolations.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/two-consecutive-interpolations.js
@@ -2,13 +2,11 @@ import styled from '@emotion/styled/macro'
 import { css } from '@emotion/react'
 
 const H1 = styled.h1`
-  ${props =>
-    css`
-      color: red;
-    `}
+  ${props => css`
+    color: red;
+  `}
   /* dummy comment */
-  ${props =>
-    css`
-      text-transform: uppercase;
-    `}
+  ${props => css`
+    text-transform: uppercase;
+  `}
 `
diff --git a/packages/babel-plugin/__tests__/styled-macro/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/styled-macro/__snapshots__/index.js.snap
@@ -878,15 +878,13 @@ exports[`@emotion/styled.macro two-consecutive-interpolations 1`] = `
 import { css } from '@emotion/react'
 
 const H1 = styled.h1\`
-  \${props =>
-    css\`
-      color: red;
-    \`}
+  \${props => css\`
+    color: red;
+  \`}
   /* dummy comment */
-  \${props =>
-    css\`
-      text-transform: uppercase;
-    \`}
+  \${props => css\`
+    text-transform: uppercase;
+  \`}
 \`
 
 
@@ -901,10 +899,10 @@ const H1 = /*#__PURE__*/_styled("h1", process.env.NODE_ENV === "production" ? {
   target: "e45grep0",
   label: "H1"
 })(props => css\`
-      color: red;
-    \`, props => css\`
-      text-transform: uppercase;
-    \`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0IiLCJmaWxlIjoidHdvLWNvbnNlY3V0aXZlLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgSDEgPSBzdHlsZWQuaDFgXG4gICR7cHJvcHMgPT5cbiAgICBjc3NgXG4gICAgICBjb2xvcjogcmVkO1xuICAgIGB9XG4gIC8qIGR1bW15IGNvbW1lbnQgKi9cbiAgJHtwcm9wcyA9PlxuICAgIGNzc2BcbiAgICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gICAgYH1cbmBcbiJdfQ== */"));"
+    color: red;
+  \`, props => css\`
+    text-transform: uppercase;
+  \`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0IiLCJmaWxlIjoidHdvLWNvbnNlY3V0aXZlLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgSDEgPSBzdHlsZWQuaDFgXG4gICR7cHJvcHMgPT4gY3NzYFxuICAgIGNvbG9yOiByZWQ7XG4gIGB9XG4gIC8qIGR1bW15IGNvbW1lbnQgKi9cbiAgJHtwcm9wcyA9PiBjc3NgXG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgYH1cbmBcbiJdfQ== */"));"
 `;
 
 exports[`@emotion/styled.macro with-spread 1`] = `

diff --git a/packages/cache/__tests__/hydration.js b/packages/cache/__tests__/hydration.js
@@ -10,9 +10,8 @@ beforeEach(() => {
 test('it works', () => {
   let css = `color:hotpink;`
   let hash = hashString(css)
-  safeQuerySelector(
-    'body'
-  ).innerHTML = `<style data-emotion="css ${hash}">.css-${hash}{${css}}</style>`
+  safeQuerySelector('body').innerHTML =
+    `<style data-emotion="css ${hash}">.css-${hash}{${css}}</style>`
   let cache = createCache({ key: 'css' })
   expect(cache.inserted).toEqual({ [hash]: true })
   expect(document.documentElement).toMatchSnapshot()
@@ -21,9 +20,8 @@ test('it works', () => {
 test('rehydrated styles to head can be flushed', () => {
   let css = `color:hotpink;`
   let hash = hashString(css)
-  safeQuerySelector(
-    'head'
-  ).innerHTML = `<style data-emotion="emo ${hash}">.emo-${hash}{${css}}</style>`
+  safeQuerySelector('head').innerHTML =
+    `<style data-emotion="emo ${hash}">.emo-${hash}{${css}}</style>`
 
   // this moves emotion style tags at initialization time
   jest.resetModules()
@@ -86,9 +84,8 @@ test('should only hydrate style elements matching the cache key', () => {
   let css = `color:hotpink;`
   let hash = hashString(css)
 
-  safeQuerySelector(
-    'body'
-  ).innerHTML = `<style data-emotion="emo ${hash}">.emo-${hash}{${css}}</style>`
+  safeQuerySelector('body').innerHTML =
+    `<style data-emotion="emo ${hash}">.emo-${hash}{${css}}</style>`
 
   const cache = createCache({ key: 'custom-key' })
 
@@ -125,9 +122,8 @@ test('should only hydrate style elements matching the cache key', () => {
 
 test('Existing client-side inserted styles from Emotion 10 should not be moved', () => {
   // the nested nature isn't special, it's just meant to be a general "make sure they're not moved"
-  safeQuerySelector(
-    'body'
-  ).innerHTML = `<div><style data-emotion="css-global"></style><div><style data-emotion="css"></style></div></div>`
+  safeQuerySelector('body').innerHTML =
+    `<div><style data-emotion="css-global"></style><div><style data-emotion="css"></style></div></div>`
   expect(document.documentElement).toMatchInlineSnapshot(`
     <html>
       <head />

diff --git a/packages/cache/package.json b/packages/cache/package.json
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@definitelytyped/dtslint": "0.0.112",
     "@emotion/hash": "*",
-    "typescript": "^4.5.5"
+    "typescript": "^5.4.5"
   },
   "files": [
     "src",

diff --git a/packages/css/package.json b/packages/css/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@definitelytyped/dtslint": "0.0.112",
-    "typescript": "^4.5.5"
+    "typescript": "^5.4.5"
   },
   "author": "Kye Hohenberger",
   "homepage": "https://emotion.sh",

diff --git a/packages/css/test/instance/__snapshots__/inline.test.js.snap b/packages/css/test/instance/__snapshots__/inline.test.js.snap
@@ -6,12 +6,12 @@ exports[`hydration only inserts rules that are not in the critical css 1`] = `
 >
   @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
 </style>
-<style data-emotion="some-key 14e1j2p-hoverStyles-Something_Main"
+<style data-emotion="some-key fgjrlg-hoverStyles-Something_Main"
        nonce="some-nonce"
 >
-  .some-key-14e1j2p-hoverStyles-Something_Main{color:hotpink;display:flex;}.some-key-14e1j2p-hoverStyles-Something_Main:hover{color:hotpink;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .some-key-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.some-key-fgjrlg-hoverStyles-Something_Main:hover{color:hotpink;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
-<main class="some-key-14e1j2p-hoverStyles-Something_Main">
+<main class="some-key-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="some-key 1h1w8ez-Image"
          nonce="some-nonce"
   >
@@ -28,11 +28,11 @@ exports[`hydration only inserts rules that are not in the critical css 1`] = `
 `;
 
 exports[`hydration only inserts rules that are not in the critical css 2`] = `
-".some-key-1icu1xs-hoverStyles {
+".some-key-v31heb-hoverStyles {
   color: hotpink;
 }
 
-.some-key-1icu1xs-hoverStyles:hover {
+.some-key-v31heb-hoverStyles:hover {
   color: hotpink;
   background-color: lightgray;
   border-color: aqua;
@@ -79,12 +79,12 @@ exports[`hydration only inserts rules that are not in the critical css 3`] = `
   justify-content: center;
 }
 
-.some-key-14e1j2p-hoverStyles-Something_Main {
+.some-key-fgjrlg-hoverStyles-Something_Main {
   color: hotpink;
   display: flex;
 }
 
-.some-key-14e1j2p-hoverStyles-Something_Main:hover {
+.some-key-fgjrlg-hoverStyles-Something_Main:hover {
   color: hotpink;
   background-color: lightgray;
   border-color: aqua;
@@ -2314,12 +2314,12 @@ exports[`renderStylesToString renders styles with ids 1`] = `
 >
   @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
 </style>
-<style data-emotion="some-key 14e1j2p-hoverStyles-Something_Main"
+<style data-emotion="some-key fgjrlg-hoverStyles-Something_Main"
        nonce="some-nonce"
 >
-  .some-key-14e1j2p-hoverStyles-Something_Main{color:hotpink;display:flex;}.some-key-14e1j2p-hoverStyles-Something_Main:hover{color:hotpink;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .some-key-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.some-key-fgjrlg-hoverStyles-Something_Main:hover{color:hotpink;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
-<main class="some-key-14e1j2p-hoverStyles-Something_Main">
+<main class="some-key-fgjrlg-hoverStyles-Something_Main">
   <style data-emotion="some-key 1h1w8ez-Image"
          nonce="some-nonce"
   >
@@ -2341,12 +2341,12 @@ exports[`renderStylesToString renders styles with ids 2`] = `
 >
   @font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024f,U+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}
 </style>
-<style data-emotion="some-key 14e1j2p-hoverStyles-Something_Main"
+<style data-emotion="some-key fgjrlg-hoverStyles-Something_Main"
        nonce="some-nonce"
 >
-  .some-key-14e1j2p-hoverStyles-Something_Main{color:hotpink;display:flex;}.some-key-14e1j2p-hoverStyles-Something_Main:hover{color:hotpink;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
+  .some-key-fgjrlg-hoverStyles-Something_Main{color:hotpink;display:flex;}.some-key-fgjrlg-hoverStyles-Something_Main:hover{color:hotpink;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
 </style>
-<main class="some-key-14e1j2p-hoverStyles-Something_Main">
+<main class="some-key-fgjrlg-hoverStyles-Something_Main">
   <div>
     Hello
   </div>