diff --git a/packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap b/packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap
index baeb7187f..a46307533 100644
--- a/packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap
+++ b/packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap
@@ -12,77 +12,77 @@ const obj = {
     display: "block"
 };
 export default (({ display })=>/*#__PURE__*/ React.createElement("div", {
-        className: "jsx-98c353683ca4620a " + _JSXStyle.dynamic([
+        className: "jsx-a53d3fed849cb49a " + _JSXStyle.dynamic([
             [
-                "f7dcddda350c6320",
+                "c50d3655f9555840",
                 [
                     display ? "block" : "none"
                 ]
             ],
             [
-                "65d7e76c4745f188",
+                "aa8b3fef53a12c64",
                 [
                     darken(color) + 2
                 ]
             ],
             [
-                "a8df94b8a9a6d3d6",
+                "aa8b3fef53a12c64",
                 [
                     darken(color)
                 ]
             ]
         ])
     }, /*#__PURE__*/ React.createElement("p", {
-        className: "jsx-98c353683ca4620a " + _JSXStyle.dynamic([
+        className: "jsx-a53d3fed849cb49a " + _JSXStyle.dynamic([
             [
-                "f7dcddda350c6320",
+                "c50d3655f9555840",
                 [
                     display ? "block" : "none"
                 ]
             ],
             [
-                "65d7e76c4745f188",
+                "aa8b3fef53a12c64",
                 [
                     darken(color) + 2
                 ]
             ],
             [
-                "a8df94b8a9a6d3d6",
+                "aa8b3fef53a12c64",
                 [
                     darken(color)
                 ]
             ]
         ])
     }, "test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "db378e8860ef77d0"
-    }, \`p.\${color}.jsx-98c353683ca4620a{color:\${otherColor};display:\${obj.display}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
+        id: "53d6a63a58fafa5e"
+    }, \`p.\${color}.jsx-a53d3fed849cb49a{color:\${otherColor};display:\${obj.display}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
         id: "94239b6d6b42c9b5"
-    }, "p.jsx-98c353683ca4620a{color:red}"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "66fc27aec4ac3c22"
+    }, "p.jsx-a53d3fed849cb49a{color:red}"), /*#__PURE__*/ React.createElement(_JSXStyle, {
+        id: "2cc47c641d156b6f"
     }, \`body{background:\${color}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "66fc27aec4ac3c22"
+        id: "2cc47c641d156b6f"
     }, \`body{background:\${color}}\`), "// TODO: the next two should have the same hash", /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "7e810e6813878b8c"
-    }, \`p.jsx-98c353683ca4620a{color:\${color}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "7e810e6813878b8c"
-    }, \`p.jsx-98c353683ca4620a{color:\${color}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "a8df94b8a9a6d3d6",
+        id: "61bb13f60e423986"
+    }, \`p.jsx-a53d3fed849cb49a{color:\${color}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
+        id: "61bb13f60e423986"
+    }, \`p.jsx-a53d3fed849cb49a{color:\${color}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
+        id: "aa8b3fef53a12c64",
         dynamic: [
             darken(color)
         ]
     }, \`p.__jsx-style-dynamic-selector{color:\${darken(color)}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "65d7e76c4745f188",
+        id: "aa8b3fef53a12c64",
         dynamic: [
             darken(color) + 2
         ]
     }, \`p.__jsx-style-dynamic-selector{color:\${darken(color) + 2}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "cb506cc21b457018"
-    }, \`@media(min-width:\${mediumScreen}){p.jsx-98c353683ca4620a{color:green}p.jsx-98c353683ca4620a{color:\${\`red\`}}}p.jsx-98c353683ca4620a{color:red}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "3fbd7f33ecd97f05"
-    }, \`p.jsx-98c353683ca4620a{-webkit-animation-duration:\${animationDuration};-moz-animation-duration:\${animationDuration};-o-animation-duration:\${animationDuration};animation-duration:\${animationDuration}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "79b95ec4ba723b8c"
-    }, \`p.jsx-98c353683ca4620a{-webkit-animation:\${animationDuration} forwards \${animationName};-moz-animation:\${animationDuration} forwards \${animationName};-o-animation:\${animationDuration} forwards \${animationName};animation:\${animationDuration} forwards \${animationName}}div.jsx-98c353683ca4620a{background:\${color}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "f7dcddda350c6320",
+        id: "1cd37e399915015c"
+    }, \`@media(min-width:\${mediumScreen}){p.jsx-a53d3fed849cb49a{color:green}p.jsx-a53d3fed849cb49a{color:\${\`red\`}}}p.jsx-a53d3fed849cb49a{color:red}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
+        id: "a79928c1f27369a4"
+    }, \`p.jsx-a53d3fed849cb49a{-webkit-animation-duration:\${animationDuration};-moz-animation-duration:\${animationDuration};-o-animation-duration:\${animationDuration};animation-duration:\${animationDuration}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
+        id: "62a8f2467bcb9608"
+    }, \`p.jsx-a53d3fed849cb49a{-webkit-animation:\${animationDuration} forwards \${animationName};-moz-animation:\${animationDuration} forwards \${animationName};-o-animation:\${animationDuration} forwards \${animationName};animation:\${animationDuration} forwards \${animationName}}div.jsx-a53d3fed849cb49a{background:\${color}}\`), /*#__PURE__*/ React.createElement(_JSXStyle, {
+        id: "c50d3655f9555840",
         dynamic: [
             display ? "block" : "none"
         ]
@@ -276,7 +276,7 @@ export const Test2 = ()=>/*#__PURE__*/ React.createElement("div", {
 export const Test3 = ({ color })=>/*#__PURE__*/ React.createElement("div", {
         className: \`jsx-\${styles.__hash}\` + " " + _JSXStyle.dynamic([
             [
-                "c7cd0c9a271b5596",
+                "61bb13f60e423986",
                 [
                     color
                 ]
@@ -285,14 +285,14 @@ export const Test3 = ({ color })=>/*#__PURE__*/ React.createElement("div", {
     }, /*#__PURE__*/ React.createElement("p", {
         className: \`jsx-\${styles.__hash}\` + " " + _JSXStyle.dynamic([
             [
-                "c7cd0c9a271b5596",
+                "61bb13f60e423986",
                 [
                     color
                 ]
             ]
         ])
     }, "external and dynamic"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "c7cd0c9a271b5596",
+        id: "61bb13f60e423986",
         dynamic: [
             color
         ]
@@ -303,7 +303,7 @@ export const Test3 = ({ color })=>/*#__PURE__*/ React.createElement("div", {
 export const Test4 = ({ color })=>/*#__PURE__*/ React.createElement("div", {
         className: \`jsx-\${styles.__hash}\` + " jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
             [
-                "67ef1d3ae291dad0",
+                "1e84642f90e27a34",
                 [
                     color
                 ]
@@ -312,7 +312,7 @@ export const Test4 = ({ color })=>/*#__PURE__*/ React.createElement("div", {
     }, /*#__PURE__*/ React.createElement("p", {
         className: \`jsx-\${styles.__hash}\` + " jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
             [
-                "67ef1d3ae291dad0",
+                "1e84642f90e27a34",
                 [
                     color
                 ]
@@ -321,7 +321,7 @@ export const Test4 = ({ color })=>/*#__PURE__*/ React.createElement("div", {
     }, "external, static and dynamic"), /*#__PURE__*/ React.createElement(_JSXStyle, {
         id: "ceba8c9ce34e3d0c"
     }, "p.jsx-ceba8c9ce34e3d0c{display:inline-block}"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "67ef1d3ae291dad0",
+        id: "1e84642f90e27a34",
         dynamic: [
             color
         ]
@@ -342,7 +342,7 @@ export const Test5 = ()=>/*#__PURE__*/ React.createElement("div", {
 export const Test6 = ({ color })=>/*#__PURE__*/ React.createElement("div", {
         className: "jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
             [
-                "268577fdfa8f996f",
+                "1e84642f90e27a34",
                 [
                     color
                 ]
@@ -351,7 +351,7 @@ export const Test6 = ({ color })=>/*#__PURE__*/ React.createElement("div", {
     }, /*#__PURE__*/ React.createElement("p", {
         className: "jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
             [
-                "268577fdfa8f996f",
+                "1e84642f90e27a34",
                 [
                     color
                 ]
@@ -360,7 +360,7 @@ export const Test6 = ({ color })=>/*#__PURE__*/ React.createElement("div", {
     }, "static and dynamic"), /*#__PURE__*/ React.createElement(_JSXStyle, {
         id: "ceba8c9ce34e3d0c"
     }, "p.jsx-ceba8c9ce34e3d0c{display:inline-block}"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "268577fdfa8f996f",
+        id: "1e84642f90e27a34",
         dynamic: [
             color
         ]
@@ -369,7 +369,7 @@ export const Test6 = ({ color })=>/*#__PURE__*/ React.createElement("div", {
 export const Test7 = ({ color })=>/*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "326696c8771af70",
+                "61bb13f60e423986",
                 [
                     color
                 ]
@@ -378,14 +378,14 @@ export const Test7 = ({ color })=>/*#__PURE__*/ React.createElement("div", {
     }, /*#__PURE__*/ React.createElement("p", {
         className: _JSXStyle.dynamic([
             [
-                "326696c8771af70",
+                "61bb13f60e423986",
                 [
                     color
                 ]
             ]
         ])
     }, "dynamic only"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "326696c8771af70",
+        id: "61bb13f60e423986",
         dynamic: [
             color
         ]
@@ -399,7 +399,7 @@ export const Test8 = ({ color })=>{
         return /*#__PURE__*/ React.createElement("div", {
             className: _JSXStyle.dynamic([
                 [
-                    "ffdf125bf0c0d312",
+                    "d77a5e7a32304b8e",
                     [
                         innerProps.color
                     ]
@@ -408,14 +408,14 @@ export const Test8 = ({ color })=>{
         }, /*#__PURE__*/ React.createElement("p", {
             className: _JSXStyle.dynamic([
                 [
-                    "ffdf125bf0c0d312",
+                    "d77a5e7a32304b8e",
                     [
                         innerProps.color
                     ]
                 ]
             ])
         }, "dynamic with scoped compound variable"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-            id: "ffdf125bf0c0d312",
+            id: "d77a5e7a32304b8e",
             dynamic: [
                 innerProps.color
             ]
@@ -430,7 +430,7 @@ export const Test9 = ({ color })=>{
     return /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "b39b51f69f1c1b3b",
+                "2a046d311c1cc2ba",
                 [
                     innerProps.color
                 ]
@@ -439,14 +439,14 @@ export const Test9 = ({ color })=>{
     }, /*#__PURE__*/ React.createElement("p", {
         className: _JSXStyle.dynamic([
             [
-                "b39b51f69f1c1b3b",
+                "2a046d311c1cc2ba",
                 [
                     innerProps.color
                 ]
             ]
         ])
     }, "dynamic with compound variable"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "b39b51f69f1c1b3b",
+        id: "2a046d311c1cc2ba",
         dynamic: [
             innerProps.color
         ]
@@ -455,12 +455,12 @@ export const Test9 = ({ color })=>{
 const foo = "red";
 // dynamic with constant variable
 export const Test10 = ()=>/*#__PURE__*/ React.createElement("div", {
-        className: "jsx-4767b73c8fb26397"
+        className: "jsx-61bb13f60e423986"
     }, /*#__PURE__*/ React.createElement("p", {
-        className: "jsx-4767b73c8fb26397"
+        className: "jsx-61bb13f60e423986"
     }, "dynamic with constant variable"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "4767b73c8fb26397"
-    }, \`p.jsx-4767b73c8fb26397{color:\${foo}}\`));
+        id: "61bb13f60e423986"
+    }, \`p.jsx-61bb13f60e423986{color:\${foo}}\`));
 // dynamic with complex scope
 export const Test11 = ({ color })=>{
     const items = Array.from({
@@ -469,14 +469,14 @@ export const Test11 = ({ color })=>{
             key: i,
             className: _JSXStyle.dynamic([
                 [
-                    "2399a69bdbcf0d16",
+                    "898c89dcda3535cf",
                     [
                         color
                     ]
                 ]
             ]) + " " + "item"
         }, /*#__PURE__*/ React.createElement(_JSXStyle, {
-            id: "2399a69bdbcf0d16",
+            id: "898c89dcda3535cf",
             dynamic: [
                 color
             ]
@@ -497,7 +497,7 @@ export default function Component() {
     return /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "e26ad77aa2d4b11f",
+                "b1ae82982dd22841",
                 [
                     width,
                     height,
@@ -508,7 +508,7 @@ export default function Component() {
     }, /*#__PURE__*/ React.createElement("h1", {
         className: _JSXStyle.dynamic([
             [
-                "e26ad77aa2d4b11f",
+                "b1ae82982dd22841",
                 [
                     width,
                     height,
@@ -517,7 +517,7 @@ export default function Component() {
             ]
         ])
     }, "Basic Variables Test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "e26ad77aa2d4b11f",
+        id: "b1ae82982dd22841",
         dynamic: [
             width,
             height,
@@ -556,7 +556,7 @@ export default function Component() {
     return /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "162894eabf3bf6c1",
+                "5103bc23e6adb01",
                 [
                     middleOpacity,
                     rotation,
@@ -569,7 +569,7 @@ export default function Component() {
     }, /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "162894eabf3bf6c1",
+                "5103bc23e6adb01",
                 [
                     middleOpacity,
                     rotation,
@@ -580,7 +580,7 @@ export default function Component() {
             ]
         ]) + " " + "animated"
     }, "Animated Element"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "162894eabf3bf6c1",
+        id: "5103bc23e6adb01",
         dynamic: [
             middleOpacity,
             rotation,
@@ -674,7 +674,7 @@ export default function Component() {
     return /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "604761e0bca7f780",
+                "a84e06e31d411f9f",
                 [
                     dynamicValue,
                     color1,
@@ -688,7 +688,7 @@ export default function Component() {
     }, /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "604761e0bca7f780",
+                "a84e06e31d411f9f",
                 [
                     dynamicValue,
                     color1,
@@ -700,7 +700,7 @@ export default function Component() {
             ]
         ]) + " " + "item"
     }, "CSS Variables and Functions"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "604761e0bca7f780",
+        id: "a84e06e31d411f9f",
         dynamic: [
             dynamicValue,
             color1,
@@ -719,19 +719,19 @@ exports[`Should load swc-confidential wasm plugin correctly > Should transform d
 const color = "red";
 const otherColor = "green";
 const A = ()=>/*#__PURE__*/ React.createElement("div", {
-        className: "jsx-7e810e6813878b8c"
+        className: "jsx-61bb13f60e423986"
     }, /*#__PURE__*/ React.createElement("p", {
-        className: "jsx-7e810e6813878b8c"
+        className: "jsx-61bb13f60e423986"
     }, "test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "7e810e6813878b8c"
-    }, \`p.jsx-7e810e6813878b8c{color:\${color}}\`));
+        id: "61bb13f60e423986"
+    }, \`p.jsx-61bb13f60e423986{color:\${color}}\`));
 const B = ()=>/*#__PURE__*/ React.createElement("div", {
-        className: "jsx-d0d831803ebf1024"
+        className: "jsx-61bb13f60e423986"
     }, /*#__PURE__*/ React.createElement("p", {
-        className: "jsx-d0d831803ebf1024"
+        className: "jsx-61bb13f60e423986"
     }, "test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "d0d831803ebf1024"
-    }, \`p.jsx-d0d831803ebf1024{color:\${otherColor}}\`));
+        id: "61bb13f60e423986"
+    }, \`p.jsx-61bb13f60e423986{color:\${otherColor}}\`));
 export default (()=>/*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(A, null), /*#__PURE__*/ React.createElement(B, null)));
 "
 `;
@@ -1128,7 +1128,7 @@ export default function Component() {
     return /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "d4e687de2b4d1f78",
+                "41976462f2b2e3ed",
                 [
                     id,
                     stringifyCssVariablesObject(cssVariables),
@@ -1140,7 +1140,7 @@ export default function Component() {
     }, /*#__PURE__*/ React.createElement("button", {
         className: _JSXStyle.dynamic([
             [
-                "d4e687de2b4d1f78",
+                "41976462f2b2e3ed",
                 [
                     id,
                     stringifyCssVariablesObject(cssVariables),
@@ -1152,7 +1152,7 @@ export default function Component() {
     }, "Global Styled Button"), /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "d4e687de2b4d1f78",
+                "41976462f2b2e3ed",
                 [
                     id,
                     stringifyCssVariablesObject(cssVariables),
@@ -1162,7 +1162,7 @@ export default function Component() {
             ]
         ])
     }, "Styled Div"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "d4e687de2b4d1f78",
+        id: "41976462f2b2e3ed",
         dynamic: [
             id,
             stringifyCssVariablesObject(cssVariables),
@@ -1223,14 +1223,14 @@ exports[`Should load swc-confidential wasm plugin correctly > Should transform i
 export default (({ breakPoint })=>/*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "6e8f367908723ecb",
+                "56766f16d52e0906",
                 [
                     breakPoint
                 ]
             ]
         ])
     }, /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "6e8f367908723ecb",
+        id: "56766f16d52e0906",
         dynamic: [
             breakPoint
         ]
@@ -1259,7 +1259,7 @@ class _class {
         return /*#__PURE__*/ React.createElement("div", {
             className: _JSXStyle.dynamic([
                 [
-                    "6b704abab74bd4b4",
+                    "ffd9ae483995867d",
                     [
                         Typography.base.size.default,
                         Typography.base.lineHeight,
@@ -1273,7 +1273,7 @@ class _class {
         }, /*#__PURE__*/ React.createElement("p", {
             className: _JSXStyle.dynamic([
                 [
-                    "6b704abab74bd4b4",
+                    "ffd9ae483995867d",
                     [
                         Typography.base.size.default,
                         Typography.base.lineHeight,
@@ -1285,7 +1285,7 @@ class _class {
                 ]
             ])
         }, "test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-            id: "6b704abab74bd4b4",
+            id: "ffd9ae483995867d",
             dynamic: [
                 Typography.base.size.default,
                 Typography.base.lineHeight,
@@ -1344,7 +1344,7 @@ export default function Component() {
     return /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "7e828585df2745e6",
+                "225aa1efd8e5beca",
                 [
                     ResponsiveBreakpoint[breakpoint],
                     mobileWidth
@@ -1354,7 +1354,7 @@ export default function Component() {
     }, /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "7e828585df2745e6",
+                "225aa1efd8e5beca",
                 [
                     ResponsiveBreakpoint[breakpoint],
                     mobileWidth
@@ -1362,7 +1362,7 @@ export default function Component() {
             ]
         ]) + " " + "active"
     }, "Responsive Element"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "7e828585df2745e6",
+        id: "225aa1efd8e5beca",
         dynamic: [
             ResponsiveBreakpoint[breakpoint],
             mobileWidth
@@ -1455,10 +1455,10 @@ import { AppProps } from "next/app";
 const someVar = "--var-1";
 export default function App({ Component, pageProps }) {
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "74a097bbd343520c"
+        id: "b6c119d364497ec3"
     }, \`:root{\${someVar}:red;background-color:var(\${someVar})}\`), /*#__PURE__*/ React.createElement(Component, {
         ...pageProps,
-        className: "jsx-74a097bbd343520c" + " " + (pageProps && pageProps.className != null && pageProps.className || "")
+        className: "jsx-b6c119d364497ec3" + " " + (pageProps && pageProps.className != null && pageProps.className || "")
     }));
 }
 "
@@ -1471,7 +1471,7 @@ export default function Home() {
     return /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "4c387ea5249dc57f",
+                "dc5f83c7824c3ea7",
                 [
                     MOBILE_MAX
                 ]
@@ -1480,14 +1480,14 @@ export default function Home() {
     }, /*#__PURE__*/ React.createElement("h1", {
         className: _JSXStyle.dynamic([
             [
-                "4c387ea5249dc57f",
+                "dc5f83c7824c3ea7",
                 [
                     MOBILE_MAX
                 ]
             ]
         ]) + " " + "header"
     }, "Hello"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "4c387ea5249dc57f",
+        id: "dc5f83c7824c3ea7",
         dynamic: [
             MOBILE_MAX
         ]
@@ -1502,13 +1502,13 @@ import _JSXStyle from "styled-jsx/style";
 const color = "color: red;";
 export default function RootLayout({ children }) {
     return /*#__PURE__*/ React.createElement("html", {
-        className: "jsx-e7dde8ddcf4ebe1b"
+        className: "jsx-afdf203c35890144"
     }, /*#__PURE__*/ React.createElement("head", {
-        className: "jsx-e7dde8ddcf4ebe1b"
+        className: "jsx-afdf203c35890144"
     }), /*#__PURE__*/ React.createElement("body", {
-        className: "jsx-e7dde8ddcf4ebe1b"
+        className: "jsx-afdf203c35890144"
     }, children), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "e7dde8ddcf4ebe1b"
+        id: "afdf203c35890144"
     }, \`body{\${color}}body p{font-size:72px}\`));
 }
 "
@@ -1568,14 +1568,14 @@ exports[`Should load swc-confidential wasm plugin correctly > Should transform n
 import Link from "next/link";
 export default function IndexPage() {
     return /*#__PURE__*/ React.createElement("div", {
-        className: "jsx-3b7e3a8058515bc5"
+        className: "jsx-2fd54d403cc6cfce"
     }, "Hello World.", " ", /*#__PURE__*/ React.createElement(Link, {
         href: "/about"
     }, /*#__PURE__*/ React.createElement("a", {
-        className: "jsx-3b7e3a8058515bc5"
+        className: "jsx-2fd54d403cc6cfce"
     }, "Abound")), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "3b7e3a8058515bc5"
-    }, \`a.jsx-3b7e3a8058515bc5{color:\${"#abcdef"}12}\`));
+        id: "2fd54d403cc6cfce"
+    }, \`a.jsx-2fd54d403cc6cfce{color:\${"#abcdef"}12}\`));
 }
 "
 `;
@@ -1596,9 +1596,9 @@ exports[`Should load swc-confidential wasm plugin correctly > Should transform p
 "import _JSXStyle from "styled-jsx/style";
 const { className: cardClassName, styles } = {
     styles: /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "e19557e37cedae26"
-    }, \`.jsx-e19557e37cedae26:hover{z-index:\${hoverAnimation ? "1" : "auto"}}\`),
-    className: "jsx-e19557e37cedae26"
+        id: "5c7ef760406d8b84"
+    }, \`.jsx-5c7ef760406d8b84:hover{z-index:\${hoverAnimation ? "1" : "auto"}}\`),
+    className: "jsx-5c7ef760406d8b84"
 };
 "
 `;
@@ -1666,33 +1666,33 @@ bar.__hash = "aaed0341accea8f";
 const baz = new String("div{font-size:3em}");
 baz.__hash = "aaed0341accea8f";
 const a = new String(\`div{font-size:\${size}em}\`);
-a.__hash = "81ceb794f2cae382";
+a.__hash = "46f2e9b5d30184c5";
 export const uh = bar;
-export const foo = new String(\`div.jsx-9593f414a33169e1{color:\${color}}\`);
-foo.__hash = "9593f414a33169e1";
+export const foo = new String(\`div.jsx-ca61d6988dbd342c{color:\${color}}\`);
+foo.__hash = "ca61d6988dbd342c";
 ({
     styles: /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "aae6f73a05684c5a"
-    }, \`div.jsx-aae6f73a05684c5a{color:\${colors.green.light}}a.jsx-aae6f73a05684c5a{color:red}\`),
-    className: "jsx-aae6f73a05684c5a"
+        id: "dcc1f480c8dc0d33"
+    }, \`div.jsx-dcc1f480c8dc0d33{color:\${colors.green.light}}a.jsx-dcc1f480c8dc0d33{color:red}\`),
+    className: "jsx-dcc1f480c8dc0d33"
 });
 const b = {
     styles: /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "ec08f8cce5a842a0"
-    }, \`div.jsx-ec08f8cce5a842a0{color:\${colors.green.light}}a.jsx-ec08f8cce5a842a0{color:red}\`),
-    className: "jsx-ec08f8cce5a842a0"
+        id: "503124c5a649ce10"
+    }, \`div.jsx-503124c5a649ce10{color:\${colors.green.light}}a.jsx-503124c5a649ce10{color:red}\`),
+    className: "jsx-503124c5a649ce10"
 };
 const dynamic = (colors)=>{
     const b = {
         styles: /*#__PURE__*/ React.createElement(_JSXStyle, {
-            id: "4bfc45a0f1223605",
+            id: "8fe15b70d68a09a7",
             dynamic: [
                 colors.green.light
             ]
         }, \`div.__jsx-style-dynamic-selector{color:\${colors.green.light}}a.__jsx-style-dynamic-selector{color:red}\`),
         className: _JSXStyle.dynamic([
             [
-                "4bfc45a0f1223605",
+                "8fe15b70d68a09a7",
                 [
                     colors.green.light
                 ]
@@ -1702,9 +1702,9 @@ const dynamic = (colors)=>{
 };
 export default {
     styles: /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "9cced4345a314fba"
-    }, \`div.jsx-9cced4345a314fba{font-size:3em}p.jsx-9cced4345a314fba{color:\${color}}\`),
-    className: "jsx-9cced4345a314fba"
+        id: "593eba3ae6c6d0e3"
+    }, \`div.jsx-593eba3ae6c6d0e3{font-size:3em}p.jsx-593eba3ae6c6d0e3{color:\${color}}\`),
+    className: "jsx-593eba3ae6c6d0e3"
 };
 "
 `;
@@ -1751,7 +1751,7 @@ const MaskedDivBad = ()=>{
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "6f8b8f9bb31b5548",
+                "d926f1e801290da9",
                 [
                     0.5 + HEAD_MARGIN_PERCENTAGE,
                     0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
@@ -1761,7 +1761,7 @@ const MaskedDivBad = ()=>{
     }, /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "6f8b8f9bb31b5548",
+                "d926f1e801290da9",
                 [
                     0.5 + HEAD_MARGIN_PERCENTAGE,
                     0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
@@ -1769,7 +1769,7 @@ const MaskedDivBad = ()=>{
             ]
         ]) + " " + "avatar-wrapper"
     })), /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "6f8b8f9bb31b5548",
+        id: "d926f1e801290da9",
         dynamic: [
             0.5 + HEAD_MARGIN_PERCENTAGE,
             0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
@@ -1785,7 +1785,7 @@ export const Red = ({ Component = "button" })=>{
     return /*#__PURE__*/ React.createElement(Component, {
         className: _JSXStyle.dynamic([
             [
-                "52fd9cadbaec4156",
+                "916d0f562633f50a",
                 [
                     e1,
                     e2,
@@ -1806,7 +1806,7 @@ export const Red = ({ Component = "button" })=>{
             ]
         ])
     }, /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "52fd9cadbaec4156",
+        id: "916d0f562633f50a",
         dynamic: [
             e1,
             e2,
@@ -1852,14 +1852,14 @@ export default function Home({ fontFamily }) {
     return /*#__PURE__*/ React.createElement("div", {
         className: _JSXStyle.dynamic([
             [
-                "40fd48184c00b68",
+                "6054eb4c2c4c1b51",
                 [
                     fontFamily
                 ]
             ]
         ])
     }, /*#__PURE__*/ React.createElement(_JSXStyle, {
-        id: "40fd48184c00b68",
+        id: "6054eb4c2c4c1b51",
         dynamic: [
             fontFamily
         ]
@@ -1875,7 +1875,7 @@ class _class {
         return /*#__PURE__*/ React.createElement("div", {
             className: _JSXStyle.dynamic([
                 [
-                    "ac1863fa45ef18c3",
+                    "105c023a498a847c",
                     [
                         inputSize ? "height: calc(2 * var(--a)) !important;" : ""
                     ]
@@ -1884,14 +1884,14 @@ class _class {
         }, /*#__PURE__*/ React.createElement("p", {
             className: _JSXStyle.dynamic([
                 [
-                    "ac1863fa45ef18c3",
+                    "105c023a498a847c",
                     [
                         inputSize ? "height: calc(2 * var(--a)) !important;" : ""
                     ]
                 ]
             ])
         }, "test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-            id: "ac1863fa45ef18c3",
+            id: "105c023a498a847c",
             dynamic: [
                 inputSize ? "height: calc(2 * var(--a)) !important;" : ""
             ]
@@ -1909,7 +1909,7 @@ class _class {
         return /*#__PURE__*/ React.createElement("div", {
             className: _JSXStyle.dynamic([
                 [
-                    "c8f770348e60420a",
+                    "aff7a3d3136089df",
                     [
                         a[b],
                         -1 * (c || 0),
@@ -1920,7 +1920,7 @@ class _class {
         }, /*#__PURE__*/ React.createElement("p", {
             className: _JSXStyle.dynamic([
                 [
-                    "c8f770348e60420a",
+                    "aff7a3d3136089df",
                     [
                         a[b],
                         -1 * (c || 0),
@@ -1929,7 +1929,7 @@ class _class {
                 ]
             ])
         }, "test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-            id: "c8f770348e60420a",
+            id: "aff7a3d3136089df",
             dynamic: [
                 a[b],
                 -1 * (c || 0),
@@ -1949,7 +1949,7 @@ class _class {
         return /*#__PURE__*/ React.createElement("div", {
             className: _JSXStyle.dynamic([
                 [
-                    "a482e3616e0a0c3a",
+                    "9a30330155b13818",
                     [
                         a
                     ]
@@ -1958,14 +1958,14 @@ class _class {
         }, /*#__PURE__*/ React.createElement("p", {
             className: _JSXStyle.dynamic([
                 [
-                    "a482e3616e0a0c3a",
+                    "9a30330155b13818",
                     [
                         a
                     ]
                 ]
             ])
         }, "test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-            id: "a482e3616e0a0c3a",
+            id: "9a30330155b13818",
             dynamic: [
                 a
             ]
@@ -1983,7 +1983,7 @@ class _class {
         return /*#__PURE__*/ React.createElement("div", {
             className: _JSXStyle.dynamic([
                 [
-                    "8806e34777bf1832",
+                    "d2309480d6dbc170",
                     [
                         a || "var(--c)",
                         b || "inherit"
@@ -1993,7 +1993,7 @@ class _class {
         }, /*#__PURE__*/ React.createElement("p", {
             className: _JSXStyle.dynamic([
                 [
-                    "8806e34777bf1832",
+                    "d2309480d6dbc170",
                     [
                         a || "var(--c)",
                         b || "inherit"
@@ -2001,7 +2001,7 @@ class _class {
                 ]
             ])
         }, "test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-            id: "8806e34777bf1832",
+            id: "d2309480d6dbc170",
             dynamic: [
                 a || "var(--c)",
                 b || "inherit"
@@ -2020,7 +2020,7 @@ class _class {
         return /*#__PURE__*/ React.createElement("div", {
             className: _JSXStyle.dynamic([
                 [
-                    "a037c47811943013",
+                    "96f395b26cba58f4",
                     [
                         a ? "100%" : "200px",
                         b ? "0" : "8px 20px"
@@ -2030,7 +2030,7 @@ class _class {
         }, /*#__PURE__*/ React.createElement("p", {
             className: _JSXStyle.dynamic([
                 [
-                    "a037c47811943013",
+                    "96f395b26cba58f4",
                     [
                         a ? "100%" : "200px",
                         b ? "0" : "8px 20px"
@@ -2038,7 +2038,7 @@ class _class {
                 ]
             ])
         }, "test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
-            id: "a037c47811943013",
+            id: "96f395b26cba58f4",
             dynamic: [
                 a ? "100%" : "200px",
                 b ? "0" : "8px 20px"
diff --git a/packages/styled-jsx/transform/src/visitor.rs b/packages/styled-jsx/transform/src/visitor.rs
index 68f705d0a..60fb0674d 100644
--- a/packages/styled-jsx/transform/src/visitor.rs
+++ b/packages/styled-jsx/transform/src/visitor.rs
@@ -1,21 +1,18 @@
-use std::{
-    collections::hash_map::DefaultHasher,
-    hash::{Hash, Hasher},
-    mem::take,
-    sync::Arc,
-};
+use std::{collections::hash_map::DefaultHasher, hash::Hasher, mem::take, sync::Arc};
 
 use anyhow::{bail, format_err, Error, Result};
 use preset_env_base::Versions;
 use rustc_hash::FxHashSet;
 use serde::Deserialize;
-use swc_common::{errors::HANDLER, util::take::Take, FileName, SourceMap, Span, DUMMY_SP};
+use swc_common::{
+    errors::HANDLER, util::take::Take, FileName, SourceMap, SourceMapper, Span, Spanned, DUMMY_SP,
+};
 use swc_ecma_ast::*;
 use swc_ecma_minifier::{
     eval::{EvalResult, Evaluator},
     marks::Marks,
 };
-use swc_ecma_utils::{collect_decls, drop_span, prepend_stmt, private_ident};
+use swc_ecma_utils::{collect_decls, prepend_stmt, private_ident};
 use swc_ecma_visit::{Fold, FoldWith, Visit, VisitWith};
 
 use crate::{
@@ -130,6 +127,31 @@ enum StyleExpr<'a> {
     Ident(&'a Ident),
 }
 
+fn hash_expr_for_style<H: Hasher>(cm: &SourceMap, expr: &Expr, state: &mut H) {
+    if let Ok(source) = cm.span_to_snippet(expr.span()) {
+        if let Some(source) = source.strip_prefix('`').and_then(|s| s.strip_suffix('`')) {
+            state.write(source.as_bytes());
+            return;
+        }
+    }
+
+    let Expr::Tpl(tpl) = expr else {
+        return;
+    };
+
+    for i in 0..tpl.quasis.len() {
+        state.write(tpl.quasis[i].raw.as_bytes());
+
+        if let Some(expr) = tpl.exprs.get(i) {
+            state.write(b"${");
+            if let Ok(source) = cm.span_to_snippet(expr.span()) {
+                state.write(source.as_bytes());
+            }
+            state.write(b"}");
+        }
+    }
+}
+
 impl Fold for StyledJSXTransformer<'_> {
     fn fold_jsx_element(&mut self, el: JSXElement) -> JSXElement {
         if is_styled_jsx(&el) {
@@ -521,7 +543,7 @@ impl StyledJSXTransformer<'_> {
                     css_span = *span;
                     is_dynamic = false;
                 } else {
-                    drop_span(expr.clone()).hash(&mut hasher);
+                    hash_expr_for_style(&self.cm, expr, &mut hasher);
                     let mut s = String::new();
                     for i in 0..quasis.len() {
                         // TODO: Handle comments
diff --git a/packages/styled-jsx/transform/tests/fixture/attribute-generation-modes/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/attribute-generation-modes/output.lightningcss.js
index fd1feac72..93bd9ff4b 100644
--- a/packages/styled-jsx/transform/tests/fixture/attribute-generation-modes/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/attribute-generation-modes/output.lightningcss.js
@@ -16,7 +16,7 @@ export const Test2 = ()=><div className={"jsx-81a68341e430a972 " + `jsx-${styles
 // external and dynamic
 export const Test3 = ({ color })=><div className={`jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([
         [
-            "7113a62c00624bef",
+            "b940b8041b63a0fa",
             [
                 color
             ]
@@ -24,13 +24,13 @@ export const Test3 = ({ color })=><div className={`jsx-${styles.__hash}` + " " +
     ])}>
     <p className={`jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([
         [
-            "7113a62c00624bef",
+            "b940b8041b63a0fa",
             [
                 color
             ]
         ]
     ])}>external and dynamic</p>
-    <_JSXStyle id={"7113a62c00624bef"} dynamic={[
+    <_JSXStyle id={"b940b8041b63a0fa"} dynamic={[
         color
     ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
@@ -38,7 +38,7 @@ export const Test3 = ({ color })=><div className={`jsx-${styles.__hash}` + " " +
 // external, static and dynamic
 export const Test4 = ({ color })=><div className={`jsx-${styles.__hash}` + " jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
         [
-            "8db39ad50e58394a",
+            "98567cd857d5ceb8",
             [
                 color
             ]
@@ -46,14 +46,14 @@ export const Test4 = ({ color })=><div className={`jsx-${styles.__hash}` + " jsx
     ])}>
     <p className={`jsx-${styles.__hash}` + " jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
         [
-            "8db39ad50e58394a",
+            "98567cd857d5ceb8",
             [
                 color
             ]
         ]
     ])}>external, static and dynamic</p>
     <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-ceba8c9ce34e3d0c{display:inline-block}"}</_JSXStyle>
-    <_JSXStyle id={"8db39ad50e58394a"} dynamic={[
+    <_JSXStyle id={"98567cd857d5ceb8"} dynamic={[
         color
     ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
@@ -67,7 +67,7 @@ export const Test5 = ()=><div className={"jsx-df0159ebd3f9fb6f"}>
 // static and dynamic
 export const Test6 = ({ color })=><div className={"jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
         [
-            "4375826949b9259f",
+            "98567cd857d5ceb8",
             [
                 color
             ]
@@ -75,21 +75,21 @@ export const Test6 = ({ color })=><div className={"jsx-ceba8c9ce34e3d0c " + _JSX
     ])}>
     <p className={"jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
         [
-            "4375826949b9259f",
+            "98567cd857d5ceb8",
             [
                 color
             ]
         ]
     ])}>static and dynamic</p>
     <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-ceba8c9ce34e3d0c{display:inline-block}"}</_JSXStyle>
-    <_JSXStyle id={"4375826949b9259f"} dynamic={[
+    <_JSXStyle id={"98567cd857d5ceb8"} dynamic={[
         color
     ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
   </div>;
 // dynamic only
 export const Test7 = ({ color })=><div className={_JSXStyle.dynamic([
         [
-            "c6c05a90f95d6b50",
+            "b940b8041b63a0fa",
             [
                 color
             ]
@@ -97,13 +97,13 @@ export const Test7 = ({ color })=><div className={_JSXStyle.dynamic([
     ])}>
     <p className={_JSXStyle.dynamic([
         [
-            "c6c05a90f95d6b50",
+            "b940b8041b63a0fa",
             [
                 color
             ]
         ]
     ])}>dynamic only</p>
-    <_JSXStyle id={"c6c05a90f95d6b50"} dynamic={[
+    <_JSXStyle id={"b940b8041b63a0fa"} dynamic={[
         color
     ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
   </div>;
@@ -115,7 +115,7 @@ export const Test8 = ({ color })=>{
         };
         return <div className={_JSXStyle.dynamic([
             [
-                "3a5cdfa6d75c82e1",
+                "4b0346d74685e510",
                 [
                     innerProps.color
                 ]
@@ -123,13 +123,13 @@ export const Test8 = ({ color })=>{
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "3a5cdfa6d75c82e1",
+                "4b0346d74685e510",
                 [
                     innerProps.color
                 ]
             ]
         ])}>dynamic with scoped compound variable</p>
-        <_JSXStyle id={"3a5cdfa6d75c82e1"} dynamic={[
+        <_JSXStyle id={"4b0346d74685e510"} dynamic={[
             innerProps.color
         ]}>{`p.__jsx-style-dynamic-selector{color:${innerProps.color}}`}</_JSXStyle>
       </div>;
@@ -142,7 +142,7 @@ export const Test9 = ({ color })=>{
     };
     return <div className={_JSXStyle.dynamic([
         [
-            "78eaf0c7b6cf1e02",
+            "4ace5e4208a4ea7e",
             [
                 innerProps.color
             ]
@@ -150,22 +150,22 @@ export const Test9 = ({ color })=>{
     ])}>
       <p className={_JSXStyle.dynamic([
         [
-            "78eaf0c7b6cf1e02",
+            "4ace5e4208a4ea7e",
             [
                 innerProps.color
             ]
         ]
     ])}>dynamic with compound variable</p>
-      <_JSXStyle id={"78eaf0c7b6cf1e02"} dynamic={[
+      <_JSXStyle id={"4ace5e4208a4ea7e"} dynamic={[
         innerProps.color
     ]}>{`p.__jsx-style-dynamic-selector{color:${innerProps.color}}`}</_JSXStyle>
     </div>;
 };
 const foo = "red";
 // dynamic with constant variable
-export const Test10 = ()=><div className={"jsx-568a62763d5e1d43"}>
-    <p className={"jsx-568a62763d5e1d43"}>dynamic with constant variable</p>
-    <_JSXStyle id={"568a62763d5e1d43"}>{`p.jsx-568a62763d5e1d43{color:${foo}}`}</_JSXStyle>
+export const Test10 = ()=><div className={"jsx-202b7151f9e63377"}>
+    <p className={"jsx-202b7151f9e63377"}>dynamic with constant variable</p>
+    <_JSXStyle id={"202b7151f9e63377"}>{`p.jsx-202b7151f9e63377{color:${foo}}`}</_JSXStyle>
   </div>;
 // dynamic with complex scope
 export const Test11 = ({ color })=>{
@@ -173,13 +173,13 @@ export const Test11 = ({ color })=>{
         length: 5
     }).map((item, i)=><li key={i} className={_JSXStyle.dynamic([
             [
-                "6074b9c2542c8080",
+                "8069b86d641a1446",
                 [
                     color
                 ]
             ]
         ]) + " " + "item"}>
-      <_JSXStyle id={"6074b9c2542c8080"} dynamic={[
+      <_JSXStyle id={"8069b86d641a1446"} dynamic={[
             color
         ]}>{`.item.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
       Item #{i + 1}
diff --git a/packages/styled-jsx/transform/tests/fixture/attribute-generation-modes/output.swc.js b/packages/styled-jsx/transform/tests/fixture/attribute-generation-modes/output.swc.js
index fd1feac72..93bd9ff4b 100644
--- a/packages/styled-jsx/transform/tests/fixture/attribute-generation-modes/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/attribute-generation-modes/output.swc.js
@@ -16,7 +16,7 @@ export const Test2 = ()=><div className={"jsx-81a68341e430a972 " + `jsx-${styles
 // external and dynamic
 export const Test3 = ({ color })=><div className={`jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([
         [
-            "7113a62c00624bef",
+            "b940b8041b63a0fa",
             [
                 color
             ]
@@ -24,13 +24,13 @@ export const Test3 = ({ color })=><div className={`jsx-${styles.__hash}` + " " +
     ])}>
     <p className={`jsx-${styles.__hash}` + " " + _JSXStyle.dynamic([
         [
-            "7113a62c00624bef",
+            "b940b8041b63a0fa",
             [
                 color
             ]
         ]
     ])}>external and dynamic</p>
-    <_JSXStyle id={"7113a62c00624bef"} dynamic={[
+    <_JSXStyle id={"b940b8041b63a0fa"} dynamic={[
         color
     ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
@@ -38,7 +38,7 @@ export const Test3 = ({ color })=><div className={`jsx-${styles.__hash}` + " " +
 // external, static and dynamic
 export const Test4 = ({ color })=><div className={`jsx-${styles.__hash}` + " jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
         [
-            "8db39ad50e58394a",
+            "98567cd857d5ceb8",
             [
                 color
             ]
@@ -46,14 +46,14 @@ export const Test4 = ({ color })=><div className={`jsx-${styles.__hash}` + " jsx
     ])}>
     <p className={`jsx-${styles.__hash}` + " jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
         [
-            "8db39ad50e58394a",
+            "98567cd857d5ceb8",
             [
                 color
             ]
         ]
     ])}>external, static and dynamic</p>
     <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-ceba8c9ce34e3d0c{display:inline-block}"}</_JSXStyle>
-    <_JSXStyle id={"8db39ad50e58394a"} dynamic={[
+    <_JSXStyle id={"98567cd857d5ceb8"} dynamic={[
         color
     ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
     <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
@@ -67,7 +67,7 @@ export const Test5 = ()=><div className={"jsx-df0159ebd3f9fb6f"}>
 // static and dynamic
 export const Test6 = ({ color })=><div className={"jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
         [
-            "4375826949b9259f",
+            "98567cd857d5ceb8",
             [
                 color
             ]
@@ -75,21 +75,21 @@ export const Test6 = ({ color })=><div className={"jsx-ceba8c9ce34e3d0c " + _JSX
     ])}>
     <p className={"jsx-ceba8c9ce34e3d0c " + _JSXStyle.dynamic([
         [
-            "4375826949b9259f",
+            "98567cd857d5ceb8",
             [
                 color
             ]
         ]
     ])}>static and dynamic</p>
     <_JSXStyle id={"ceba8c9ce34e3d0c"}>{"p.jsx-ceba8c9ce34e3d0c{display:inline-block}"}</_JSXStyle>
-    <_JSXStyle id={"4375826949b9259f"} dynamic={[
+    <_JSXStyle id={"98567cd857d5ceb8"} dynamic={[
         color
     ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
   </div>;
 // dynamic only
 export const Test7 = ({ color })=><div className={_JSXStyle.dynamic([
         [
-            "c6c05a90f95d6b50",
+            "b940b8041b63a0fa",
             [
                 color
             ]
@@ -97,13 +97,13 @@ export const Test7 = ({ color })=><div className={_JSXStyle.dynamic([
     ])}>
     <p className={_JSXStyle.dynamic([
         [
-            "c6c05a90f95d6b50",
+            "b940b8041b63a0fa",
             [
                 color
             ]
         ]
     ])}>dynamic only</p>
-    <_JSXStyle id={"c6c05a90f95d6b50"} dynamic={[
+    <_JSXStyle id={"b940b8041b63a0fa"} dynamic={[
         color
     ]}>{`p.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
   </div>;
@@ -115,7 +115,7 @@ export const Test8 = ({ color })=>{
         };
         return <div className={_JSXStyle.dynamic([
             [
-                "3a5cdfa6d75c82e1",
+                "4b0346d74685e510",
                 [
                     innerProps.color
                 ]
@@ -123,13 +123,13 @@ export const Test8 = ({ color })=>{
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "3a5cdfa6d75c82e1",
+                "4b0346d74685e510",
                 [
                     innerProps.color
                 ]
             ]
         ])}>dynamic with scoped compound variable</p>
-        <_JSXStyle id={"3a5cdfa6d75c82e1"} dynamic={[
+        <_JSXStyle id={"4b0346d74685e510"} dynamic={[
             innerProps.color
         ]}>{`p.__jsx-style-dynamic-selector{color:${innerProps.color}}`}</_JSXStyle>
       </div>;
@@ -142,7 +142,7 @@ export const Test9 = ({ color })=>{
     };
     return <div className={_JSXStyle.dynamic([
         [
-            "78eaf0c7b6cf1e02",
+            "4ace5e4208a4ea7e",
             [
                 innerProps.color
             ]
@@ -150,22 +150,22 @@ export const Test9 = ({ color })=>{
     ])}>
       <p className={_JSXStyle.dynamic([
         [
-            "78eaf0c7b6cf1e02",
+            "4ace5e4208a4ea7e",
             [
                 innerProps.color
             ]
         ]
     ])}>dynamic with compound variable</p>
-      <_JSXStyle id={"78eaf0c7b6cf1e02"} dynamic={[
+      <_JSXStyle id={"4ace5e4208a4ea7e"} dynamic={[
         innerProps.color
     ]}>{`p.__jsx-style-dynamic-selector{color:${innerProps.color}}`}</_JSXStyle>
     </div>;
 };
 const foo = "red";
 // dynamic with constant variable
-export const Test10 = ()=><div className={"jsx-568a62763d5e1d43"}>
-    <p className={"jsx-568a62763d5e1d43"}>dynamic with constant variable</p>
-    <_JSXStyle id={"568a62763d5e1d43"}>{`p.jsx-568a62763d5e1d43{color:${foo}}`}</_JSXStyle>
+export const Test10 = ()=><div className={"jsx-202b7151f9e63377"}>
+    <p className={"jsx-202b7151f9e63377"}>dynamic with constant variable</p>
+    <_JSXStyle id={"202b7151f9e63377"}>{`p.jsx-202b7151f9e63377{color:${foo}}`}</_JSXStyle>
   </div>;
 // dynamic with complex scope
 export const Test11 = ({ color })=>{
@@ -173,13 +173,13 @@ export const Test11 = ({ color })=>{
         length: 5
     }).map((item, i)=><li key={i} className={_JSXStyle.dynamic([
             [
-                "6074b9c2542c8080",
+                "8069b86d641a1446",
                 [
                     color
                 ]
             ]
         ]) + " " + "item"}>
-      <_JSXStyle id={"6074b9c2542c8080"} dynamic={[
+      <_JSXStyle id={"8069b86d641a1446"} dynamic={[
             color
         ]}>{`.item.__jsx-style-dynamic-selector{color:${color}}`}</_JSXStyle>
       Item #{i + 1}
diff --git a/packages/styled-jsx/transform/tests/fixture/basic-variables-in-css/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/basic-variables-in-css/output.lightningcss.js
index d0bba808f..a2cb07be0 100644
--- a/packages/styled-jsx/transform/tests/fixture/basic-variables-in-css/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/basic-variables-in-css/output.lightningcss.js
@@ -5,7 +5,7 @@ export default function Component() {
     const color = '#FF0000';
     return <div className={_JSXStyle.dynamic([
         [
-            "86648f899afe2bd5",
+            "6894d960b236be5c",
             [
                 width,
                 height,
@@ -15,7 +15,7 @@ export default function Component() {
     ])}>
       <h1 className={_JSXStyle.dynamic([
         [
-            "86648f899afe2bd5",
+            "6894d960b236be5c",
             [
                 width,
                 height,
@@ -23,7 +23,7 @@ export default function Component() {
             ]
         ]
     ])}>Basic Variables Test</h1>
-      <_JSXStyle id={"86648f899afe2bd5"} dynamic={[
+      <_JSXStyle id={"6894d960b236be5c"} dynamic={[
         width,
         height,
         color
diff --git a/packages/styled-jsx/transform/tests/fixture/basic-variables-in-css/output.swc.js b/packages/styled-jsx/transform/tests/fixture/basic-variables-in-css/output.swc.js
index d0bba808f..a2cb07be0 100644
--- a/packages/styled-jsx/transform/tests/fixture/basic-variables-in-css/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/basic-variables-in-css/output.swc.js
@@ -5,7 +5,7 @@ export default function Component() {
     const color = '#FF0000';
     return <div className={_JSXStyle.dynamic([
         [
-            "86648f899afe2bd5",
+            "6894d960b236be5c",
             [
                 width,
                 height,
@@ -15,7 +15,7 @@ export default function Component() {
     ])}>
       <h1 className={_JSXStyle.dynamic([
         [
-            "86648f899afe2bd5",
+            "6894d960b236be5c",
             [
                 width,
                 height,
@@ -23,7 +23,7 @@ export default function Component() {
             ]
         ]
     ])}>Basic Variables Test</h1>
-      <_JSXStyle id={"86648f899afe2bd5"} dynamic={[
+      <_JSXStyle id={"6894d960b236be5c"} dynamic={[
         width,
         height,
         color
diff --git a/packages/styled-jsx/transform/tests/fixture/complex-animation-keyframes/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/complex-animation-keyframes/output.lightningcss.js
index b80ef6684..5ed1b7347 100644
--- a/packages/styled-jsx/transform/tests/fixture/complex-animation-keyframes/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/complex-animation-keyframes/output.lightningcss.js
@@ -7,7 +7,7 @@ export default function Component() {
     const delay = 200;
     return <div className={_JSXStyle.dynamic([
         [
-            "30b0abc2151c644d",
+            "a1b8eedfc07bffec",
             [
                 middleOpacity,
                 rotation,
@@ -19,7 +19,7 @@ export default function Component() {
     ]) + " " + "wrapper"}>
       <div className={_JSXStyle.dynamic([
         [
-            "30b0abc2151c644d",
+            "a1b8eedfc07bffec",
             [
                 middleOpacity,
                 rotation,
@@ -29,7 +29,7 @@ export default function Component() {
             ]
         ]
     ]) + " " + "animated"}>Animated Element</div>
-      <_JSXStyle id={"30b0abc2151c644d"} dynamic={[
+      <_JSXStyle id={"a1b8eedfc07bffec"} dynamic={[
         middleOpacity,
         rotation,
         duration,
diff --git a/packages/styled-jsx/transform/tests/fixture/complex-animation-keyframes/output.swc.js b/packages/styled-jsx/transform/tests/fixture/complex-animation-keyframes/output.swc.js
index 5fd80e525..3d1228871 100644
--- a/packages/styled-jsx/transform/tests/fixture/complex-animation-keyframes/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/complex-animation-keyframes/output.swc.js
@@ -7,7 +7,7 @@ export default function Component() {
     const delay = 200;
     return <div className={_JSXStyle.dynamic([
         [
-            "30b0abc2151c644d",
+            "a1b8eedfc07bffec",
             [
                 middleOpacity,
                 rotation,
@@ -19,7 +19,7 @@ export default function Component() {
     ]) + " " + "wrapper"}>
       <div className={_JSXStyle.dynamic([
         [
-            "30b0abc2151c644d",
+            "a1b8eedfc07bffec",
             [
                 middleOpacity,
                 rotation,
@@ -29,7 +29,7 @@ export default function Component() {
             ]
         ]
     ]) + " " + "animated"}>Animated Element</div>
-      <_JSXStyle id={"30b0abc2151c644d"} dynamic={[
+      <_JSXStyle id={"a1b8eedfc07bffec"} dynamic={[
         middleOpacity,
         rotation,
         duration,
diff --git a/packages/styled-jsx/transform/tests/fixture/css-variables-and-functions/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/css-variables-and-functions/output.lightningcss.js
index c0bc74fce..5ffbca306 100644
--- a/packages/styled-jsx/transform/tests/fixture/css-variables-and-functions/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/css-variables-and-functions/output.lightningcss.js
@@ -7,7 +7,7 @@ export default function Component() {
     const spacing = 10;
     return <div className={_JSXStyle.dynamic([
         [
-            "7901c83573157acb",
+            "ef11d9bc22be9e3d",
             [
                 dynamicValue,
                 color1,
@@ -20,7 +20,7 @@ export default function Component() {
     ]) + " " + "container"}>
       <div className={_JSXStyle.dynamic([
         [
-            "7901c83573157acb",
+            "ef11d9bc22be9e3d",
             [
                 dynamicValue,
                 color1,
@@ -31,7 +31,7 @@ export default function Component() {
             ]
         ]
     ]) + " " + "item"}>CSS Variables and Functions</div>
-      <_JSXStyle id={"7901c83573157acb"} dynamic={[
+      <_JSXStyle id={"ef11d9bc22be9e3d"} dynamic={[
         dynamicValue,
         color1,
         color2,
diff --git a/packages/styled-jsx/transform/tests/fixture/css-variables-and-functions/output.swc.js b/packages/styled-jsx/transform/tests/fixture/css-variables-and-functions/output.swc.js
index e65f53586..9ea572634 100644
--- a/packages/styled-jsx/transform/tests/fixture/css-variables-and-functions/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/css-variables-and-functions/output.swc.js
@@ -7,7 +7,7 @@ export default function Component() {
     const spacing = 10;
     return <div className={_JSXStyle.dynamic([
         [
-            "7901c83573157acb",
+            "ef11d9bc22be9e3d",
             [
                 dynamicValue,
                 color1,
@@ -20,7 +20,7 @@ export default function Component() {
     ]) + " " + "container"}>
       <div className={_JSXStyle.dynamic([
         [
-            "7901c83573157acb",
+            "ef11d9bc22be9e3d",
             [
                 dynamicValue,
                 color1,
@@ -31,7 +31,7 @@ export default function Component() {
             ]
         ]
     ]) + " " + "item"}>CSS Variables and Functions</div>
-      <_JSXStyle id={"7901c83573157acb"} dynamic={[
+      <_JSXStyle id={"ef11d9bc22be9e3d"} dynamic={[
         dynamicValue,
         color1,
         color2,
diff --git a/packages/styled-jsx/transform/tests/fixture/different-jsx-ids/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/different-jsx-ids/output.lightningcss.js
index 717360394..bc36c5b14 100644
--- a/packages/styled-jsx/transform/tests/fixture/different-jsx-ids/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/different-jsx-ids/output.lightningcss.js
@@ -1,13 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
 const color = "red";
 const otherColor = "green";
-const A = ()=><div className={"jsx-c97f2e17d45fcb22"}>
-    <p className={"jsx-c97f2e17d45fcb22"}>test</p>
-    <_JSXStyle id={"c97f2e17d45fcb22"}>{`p.jsx-c97f2e17d45fcb22{color:${color}}`}</_JSXStyle>
+const A = ()=><div className={"jsx-b940b8041b63a0fa"}>
+    <p className={"jsx-b940b8041b63a0fa"}>test</p>
+    <_JSXStyle id={"b940b8041b63a0fa"}>{`p.jsx-b940b8041b63a0fa{color:${color}}`}</_JSXStyle>
   </div>;
-const B = ()=><div className={"jsx-baa9af07b36dbed2"}>
-    <p className={"jsx-baa9af07b36dbed2"}>test</p>
-    <_JSXStyle id={"baa9af07b36dbed2"}>{`p.jsx-baa9af07b36dbed2{color:${otherColor}}`}</_JSXStyle>
+const B = ()=><div className={"jsx-664aac2d10a660c"}>
+    <p className={"jsx-664aac2d10a660c"}>test</p>
+    <_JSXStyle id={"664aac2d10a660c"}>{`p.jsx-664aac2d10a660c{color:${otherColor}}`}</_JSXStyle>
   </div>;
 export default (()=><div>
     <A/>
diff --git a/packages/styled-jsx/transform/tests/fixture/different-jsx-ids/output.swc.js b/packages/styled-jsx/transform/tests/fixture/different-jsx-ids/output.swc.js
index 717360394..bc36c5b14 100644
--- a/packages/styled-jsx/transform/tests/fixture/different-jsx-ids/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/different-jsx-ids/output.swc.js
@@ -1,13 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
 const color = "red";
 const otherColor = "green";
-const A = ()=><div className={"jsx-c97f2e17d45fcb22"}>
-    <p className={"jsx-c97f2e17d45fcb22"}>test</p>
-    <_JSXStyle id={"c97f2e17d45fcb22"}>{`p.jsx-c97f2e17d45fcb22{color:${color}}`}</_JSXStyle>
+const A = ()=><div className={"jsx-b940b8041b63a0fa"}>
+    <p className={"jsx-b940b8041b63a0fa"}>test</p>
+    <_JSXStyle id={"b940b8041b63a0fa"}>{`p.jsx-b940b8041b63a0fa{color:${color}}`}</_JSXStyle>
   </div>;
-const B = ()=><div className={"jsx-baa9af07b36dbed2"}>
-    <p className={"jsx-baa9af07b36dbed2"}>test</p>
-    <_JSXStyle id={"baa9af07b36dbed2"}>{`p.jsx-baa9af07b36dbed2{color:${otherColor}}`}</_JSXStyle>
+const B = ()=><div className={"jsx-664aac2d10a660c"}>
+    <p className={"jsx-664aac2d10a660c"}>test</p>
+    <_JSXStyle id={"664aac2d10a660c"}>{`p.jsx-664aac2d10a660c{color:${otherColor}}`}</_JSXStyle>
   </div>;
 export default (()=><div>
     <A/>
diff --git a/packages/styled-jsx/transform/tests/fixture/global-styles-with-dynamic-values/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/global-styles-with-dynamic-values/output.lightningcss.js
index 494af6b0c..8e1967ea6 100644
--- a/packages/styled-jsx/transform/tests/fixture/global-styles-with-dynamic-values/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/global-styles-with-dynamic-values/output.lightningcss.js
@@ -12,7 +12,7 @@ export default function Component() {
     const backgroundColor = '#f0f0f0';
     return <div className={_JSXStyle.dynamic([
         [
-            "d25e9a52454a82d1",
+            "6924cd1224cf7739",
             [
                 id,
                 stringifyCssVariablesObject(cssVariables),
@@ -23,7 +23,7 @@ export default function Component() {
     ]) + " " + `scope-${id}`}>
       <button className={_JSXStyle.dynamic([
         [
-            "d25e9a52454a82d1",
+            "6924cd1224cf7739",
             [
                 id,
                 stringifyCssVariablesObject(cssVariables),
@@ -34,7 +34,7 @@ export default function Component() {
     ])}>Global Styled Button</button>
       <div className={_JSXStyle.dynamic([
         [
-            "d25e9a52454a82d1",
+            "6924cd1224cf7739",
             [
                 id,
                 stringifyCssVariablesObject(cssVariables),
@@ -43,7 +43,7 @@ export default function Component() {
             ]
         ]
     ])}>Styled Div</div>
-      <_JSXStyle id={"d25e9a52454a82d1"} dynamic={[
+      <_JSXStyle id={"6924cd1224cf7739"} dynamic={[
         id,
         stringifyCssVariablesObject(cssVariables),
         buttonColor,
diff --git a/packages/styled-jsx/transform/tests/fixture/global-styles-with-dynamic-values/output.swc.js b/packages/styled-jsx/transform/tests/fixture/global-styles-with-dynamic-values/output.swc.js
index 494af6b0c..8e1967ea6 100644
--- a/packages/styled-jsx/transform/tests/fixture/global-styles-with-dynamic-values/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/global-styles-with-dynamic-values/output.swc.js
@@ -12,7 +12,7 @@ export default function Component() {
     const backgroundColor = '#f0f0f0';
     return <div className={_JSXStyle.dynamic([
         [
-            "d25e9a52454a82d1",
+            "6924cd1224cf7739",
             [
                 id,
                 stringifyCssVariablesObject(cssVariables),
@@ -23,7 +23,7 @@ export default function Component() {
     ]) + " " + `scope-${id}`}>
       <button className={_JSXStyle.dynamic([
         [
-            "d25e9a52454a82d1",
+            "6924cd1224cf7739",
             [
                 id,
                 stringifyCssVariablesObject(cssVariables),
@@ -34,7 +34,7 @@ export default function Component() {
     ])}>Global Styled Button</button>
       <div className={_JSXStyle.dynamic([
         [
-            "d25e9a52454a82d1",
+            "6924cd1224cf7739",
             [
                 id,
                 stringifyCssVariablesObject(cssVariables),
@@ -43,7 +43,7 @@ export default function Component() {
             ]
         ]
     ])}>Styled Div</div>
-      <_JSXStyle id={"d25e9a52454a82d1"} dynamic={[
+      <_JSXStyle id={"6924cd1224cf7739"} dynamic={[
         id,
         stringifyCssVariablesObject(cssVariables),
         buttonColor,
diff --git a/packages/styled-jsx/transform/tests/fixture/interpolation/1/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/interpolation/1/output.lightningcss.js
index 96cfd3f08..1d2ec0fe0 100644
--- a/packages/styled-jsx/transform/tests/fixture/interpolation/1/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/interpolation/1/output.lightningcss.js
@@ -2,13 +2,13 @@ import _JSXStyle from "styled-jsx/style";
 export default function Home() {
     const breakpoint = "500px";
     return <>
-            <div className={"jsx-81df6e2eb900c146" + " " + "container"}>
+            <div className={"jsx-3f85910312d1cf7b" + " " + "container"}>
                 container (should be blue)
-                <div className={"jsx-81df6e2eb900c146" + " " + "responsive"}>
+                <div className={"jsx-3f85910312d1cf7b" + " " + "responsive"}>
                     responsive (purple on mobile, orange on desktop)
                 </div>
             </div>
 
-            <_JSXStyle id={"81df6e2eb900c146"}>{`.container.jsx-81df6e2eb900c146{color:#00f;padding:3rem}@media (max-width:${breakpoint}){.container.jsx-81df6e2eb900c146 .responsive.jsx-81df6e2eb900c146{color:purple}}`}</_JSXStyle>
+            <_JSXStyle id={"3f85910312d1cf7b"}>{`.container.jsx-3f85910312d1cf7b{color:#00f;padding:3rem}@media (max-width:${breakpoint}){.container.jsx-3f85910312d1cf7b .responsive.jsx-3f85910312d1cf7b{color:purple}}`}</_JSXStyle>
         </>;
 }
diff --git a/packages/styled-jsx/transform/tests/fixture/interpolation/1/output.swc.js b/packages/styled-jsx/transform/tests/fixture/interpolation/1/output.swc.js
index f590fa4fd..5fb4aaa9a 100644
--- a/packages/styled-jsx/transform/tests/fixture/interpolation/1/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/interpolation/1/output.swc.js
@@ -2,13 +2,13 @@ import _JSXStyle from "styled-jsx/style";
 export default function Home() {
     const breakpoint = "500px";
     return <>
-            <div className={"jsx-81df6e2eb900c146" + " " + "container"}>
+            <div className={"jsx-3f85910312d1cf7b" + " " + "container"}>
                 container (should be blue)
-                <div className={"jsx-81df6e2eb900c146" + " " + "responsive"}>
+                <div className={"jsx-3f85910312d1cf7b" + " " + "responsive"}>
                     responsive (purple on mobile, orange on desktop)
                 </div>
             </div>
 
-            <_JSXStyle id={"81df6e2eb900c146"}>{`.container.jsx-81df6e2eb900c146{color:#00f;padding:3rem}@media (width<=${breakpoint}){.container.jsx-81df6e2eb900c146 .responsive.jsx-81df6e2eb900c146{color:purple}}`}</_JSXStyle>
+            <_JSXStyle id={"3f85910312d1cf7b"}>{`.container.jsx-3f85910312d1cf7b{color:#00f;padding:3rem}@media (width<=${breakpoint}){.container.jsx-3f85910312d1cf7b .responsive.jsx-3f85910312d1cf7b{color:purple}}`}</_JSXStyle>
         </>;
 }
diff --git a/packages/styled-jsx/transform/tests/fixture/interpolation/2/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/interpolation/2/output.lightningcss.js
index a5bed2ddb..59d631389 100644
--- a/packages/styled-jsx/transform/tests/fixture/interpolation/2/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/interpolation/2/output.lightningcss.js
@@ -1,14 +1,14 @@
 import _JSXStyle from "styled-jsx/style";
 export default function Home() {
     const breakpoint = "500px";
-    return <div className={"jsx-81df6e2eb900c146"}>
-      <div className={"jsx-81df6e2eb900c146" + " " + "container"}>
+    return <div className={"jsx-3f85910312d1cf7b"}>
+      <div className={"jsx-3f85910312d1cf7b" + " " + "container"}>
         container (should be blue)
-        <div className={"jsx-81df6e2eb900c146" + " " + "responsive"}>
+        <div className={"jsx-3f85910312d1cf7b" + " " + "responsive"}>
           responsive (purple on mobile, orange on desktop)
         </div>
       </div>
 
-      <_JSXStyle id={"81df6e2eb900c146"}>{`.container.jsx-81df6e2eb900c146{color:#00f;padding:3rem}@media (max-width:${breakpoint}){.container.jsx-81df6e2eb900c146 .responsive.jsx-81df6e2eb900c146{color:purple}}`}</_JSXStyle>
+      <_JSXStyle id={"3f85910312d1cf7b"}>{`.container.jsx-3f85910312d1cf7b{color:#00f;padding:3rem}@media (max-width:${breakpoint}){.container.jsx-3f85910312d1cf7b .responsive.jsx-3f85910312d1cf7b{color:purple}}`}</_JSXStyle>
     </div>;
 }
diff --git a/packages/styled-jsx/transform/tests/fixture/interpolation/2/output.swc.js b/packages/styled-jsx/transform/tests/fixture/interpolation/2/output.swc.js
index c6c73a016..a73daac42 100644
--- a/packages/styled-jsx/transform/tests/fixture/interpolation/2/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/interpolation/2/output.swc.js
@@ -1,14 +1,14 @@
 import _JSXStyle from "styled-jsx/style";
 export default function Home() {
     const breakpoint = "500px";
-    return <div className={"jsx-81df6e2eb900c146"}>
-      <div className={"jsx-81df6e2eb900c146" + " " + "container"}>
+    return <div className={"jsx-3f85910312d1cf7b"}>
+      <div className={"jsx-3f85910312d1cf7b" + " " + "container"}>
         container (should be blue)
-        <div className={"jsx-81df6e2eb900c146" + " " + "responsive"}>
+        <div className={"jsx-3f85910312d1cf7b" + " " + "responsive"}>
           responsive (purple on mobile, orange on desktop)
         </div>
       </div>
 
-      <_JSXStyle id={"81df6e2eb900c146"}>{`.container.jsx-81df6e2eb900c146{color:#00f;padding:3rem}@media (width<=${breakpoint}){.container.jsx-81df6e2eb900c146 .responsive.jsx-81df6e2eb900c146{color:purple}}`}</_JSXStyle>
+      <_JSXStyle id={"3f85910312d1cf7b"}>{`.container.jsx-3f85910312d1cf7b{color:#00f;padding:3rem}@media (width<=${breakpoint}){.container.jsx-3f85910312d1cf7b .responsive.jsx-3f85910312d1cf7b{color:purple}}`}</_JSXStyle>
     </div>;
 }
diff --git a/packages/styled-jsx/transform/tests/fixture/issue-30480/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/issue-30480/output.lightningcss.js
index 6f3854f0f..65da22e6f 100644
--- a/packages/styled-jsx/transform/tests/fixture/issue-30480/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/issue-30480/output.lightningcss.js
@@ -1,13 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
 export default (({ breakPoint })=><div className={_JSXStyle.dynamic([
         [
-            "b337a8f16e1f64aa",
+            "85f5f0d778322feb",
             [
                 breakPoint
             ]
         ]
     ])}>
-    <_JSXStyle id={"b337a8f16e1f64aa"} dynamic={[
+    <_JSXStyle id={"85f5f0d778322feb"} dynamic={[
         breakPoint
     ]}>{`@media (${breakPoint}){.test.__jsx-style-dynamic-selector{margin-bottom:1em}}`}</_JSXStyle>
   </div>);
diff --git a/packages/styled-jsx/transform/tests/fixture/issue-30480/output.swc.js b/packages/styled-jsx/transform/tests/fixture/issue-30480/output.swc.js
index 6f3854f0f..65da22e6f 100644
--- a/packages/styled-jsx/transform/tests/fixture/issue-30480/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/issue-30480/output.swc.js
@@ -1,13 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
 export default (({ breakPoint })=><div className={_JSXStyle.dynamic([
         [
-            "b337a8f16e1f64aa",
+            "85f5f0d778322feb",
             [
                 breakPoint
             ]
         ]
     ])}>
-    <_JSXStyle id={"b337a8f16e1f64aa"} dynamic={[
+    <_JSXStyle id={"85f5f0d778322feb"} dynamic={[
         breakPoint
     ]}>{`@media (${breakPoint}){.test.__jsx-style-dynamic-selector{margin-bottom:1em}}`}</_JSXStyle>
   </div>);
diff --git a/packages/styled-jsx/transform/tests/fixture/issue-31562-interpolation-in-mdea/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/issue-31562-interpolation-in-mdea/output.lightningcss.js
index e7a291621..7aef20187 100644
--- a/packages/styled-jsx/transform/tests/fixture/issue-31562-interpolation-in-mdea/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/issue-31562-interpolation-in-mdea/output.lightningcss.js
@@ -3,7 +3,7 @@ export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
             [
-                "b471a4b31d7ba07",
+                "21743196af4d3213",
                 [
                     Typography.base.size.default,
                     Typography.base.lineHeight,
@@ -16,7 +16,7 @@ export default class {
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "b471a4b31d7ba07",
+                "21743196af4d3213",
                 [
                     Typography.base.size.default,
                     Typography.base.lineHeight,
@@ -27,7 +27,7 @@ export default class {
                 ]
             ]
         ])}>test</p>
-        <_JSXStyle id={"b471a4b31d7ba07"} dynamic={[
+        <_JSXStyle id={"21743196af4d3213"} dynamic={[
             Typography.base.size.default,
             Typography.base.lineHeight,
             Target.mediumPlus,
diff --git a/packages/styled-jsx/transform/tests/fixture/issue-31562-interpolation-in-mdea/output.swc.js b/packages/styled-jsx/transform/tests/fixture/issue-31562-interpolation-in-mdea/output.swc.js
index e7a291621..7aef20187 100644
--- a/packages/styled-jsx/transform/tests/fixture/issue-31562-interpolation-in-mdea/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/issue-31562-interpolation-in-mdea/output.swc.js
@@ -3,7 +3,7 @@ export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
             [
-                "b471a4b31d7ba07",
+                "21743196af4d3213",
                 [
                     Typography.base.size.default,
                     Typography.base.lineHeight,
@@ -16,7 +16,7 @@ export default class {
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "b471a4b31d7ba07",
+                "21743196af4d3213",
                 [
                     Typography.base.size.default,
                     Typography.base.lineHeight,
@@ -27,7 +27,7 @@ export default class {
                 ]
             ]
         ])}>test</p>
-        <_JSXStyle id={"b471a4b31d7ba07"} dynamic={[
+        <_JSXStyle id={"21743196af4d3213"} dynamic={[
             Typography.base.size.default,
             Typography.base.lineHeight,
             Target.mediumPlus,
diff --git a/packages/styled-jsx/transform/tests/fixture/media-queries-with-variables/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/media-queries-with-variables/output.lightningcss.js
index 070b7e616..1bc7082de 100644
--- a/packages/styled-jsx/transform/tests/fixture/media-queries-with-variables/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/media-queries-with-variables/output.lightningcss.js
@@ -9,7 +9,7 @@ export default function Component() {
     const mobileWidth = 320;
     return <div className={_JSXStyle.dynamic([
         [
-            "faea2af7e3b51d6f",
+            "37dd327e06920032",
             [
                 ResponsiveBreakpoint[breakpoint],
                 mobileWidth
@@ -18,14 +18,14 @@ export default function Component() {
     ]) + " " + "component"}>
       <div className={_JSXStyle.dynamic([
         [
-            "faea2af7e3b51d6f",
+            "37dd327e06920032",
             [
                 ResponsiveBreakpoint[breakpoint],
                 mobileWidth
             ]
         ]
     ]) + " " + "active"}>Responsive Element</div>
-      <_JSXStyle id={"faea2af7e3b51d6f"} dynamic={[
+      <_JSXStyle id={"37dd327e06920032"} dynamic={[
         ResponsiveBreakpoint[breakpoint],
         mobileWidth
     ]}>{`.component.__jsx-style-dynamic-selector{width:100%}@media (max-width:${ResponsiveBreakpoint[breakpoint]}){.component.__jsx-style-dynamic-selector{width:${mobileWidth}px}.component.active.__jsx-style-dynamic-selector{color:#00f}.component.__jsx-style-dynamic-selector div.__jsx-style-dynamic-selector{display:block}}`}</_JSXStyle>
diff --git a/packages/styled-jsx/transform/tests/fixture/media-queries-with-variables/output.swc.js b/packages/styled-jsx/transform/tests/fixture/media-queries-with-variables/output.swc.js
index aa58bb376..32fd7cffd 100644
--- a/packages/styled-jsx/transform/tests/fixture/media-queries-with-variables/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/media-queries-with-variables/output.swc.js
@@ -9,7 +9,7 @@ export default function Component() {
     const mobileWidth = 320;
     return <div className={_JSXStyle.dynamic([
         [
-            "faea2af7e3b51d6f",
+            "37dd327e06920032",
             [
                 ResponsiveBreakpoint[breakpoint],
                 mobileWidth
@@ -18,14 +18,14 @@ export default function Component() {
     ]) + " " + "component"}>
       <div className={_JSXStyle.dynamic([
         [
-            "faea2af7e3b51d6f",
+            "37dd327e06920032",
             [
                 ResponsiveBreakpoint[breakpoint],
                 mobileWidth
             ]
         ]
     ]) + " " + "active"}>Responsive Element</div>
-      <_JSXStyle id={"faea2af7e3b51d6f"} dynamic={[
+      <_JSXStyle id={"37dd327e06920032"} dynamic={[
         ResponsiveBreakpoint[breakpoint],
         mobileWidth
     ]}>{`.component.__jsx-style-dynamic-selector{width:100%}@media (width<=${ResponsiveBreakpoint[breakpoint]}){.component.__jsx-style-dynamic-selector{width:${mobileWidth}px}.component.__jsx-style-dynamic-selector.active.__jsx-style-dynamic-selector{color:#00f}.component.__jsx-style-dynamic-selector div.__jsx-style-dynamic-selector{display:block}}`}</_JSXStyle>
diff --git a/packages/styled-jsx/transform/tests/fixture/next-55679/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/next-55679/output.lightningcss.js
index c400bd5dd..d7a93d73b 100644
--- a/packages/styled-jsx/transform/tests/fixture/next-55679/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/next-55679/output.lightningcss.js
@@ -3,7 +3,7 @@ import { AppProps } from "next/app";
 const someVar = "--var-1";
 export default function App({ Component, pageProps }) {
     return <>
-      <_JSXStyle id={"78a0e23939332fdf"}>{`:root{${someVar}:red;background-color:var(${someVar})}`}</_JSXStyle>
-      <Component {...pageProps} className={"jsx-78a0e23939332fdf" + " " + (pageProps && pageProps.className != null && pageProps.className || "")}/>
+      <_JSXStyle id={"91a83de9e4159ddc"}>{`:root{${someVar}:red;background-color:var(${someVar})}`}</_JSXStyle>
+      <Component {...pageProps} className={"jsx-91a83de9e4159ddc" + " " + (pageProps && pageProps.className != null && pageProps.className || "")}/>
     </>;
 }
diff --git a/packages/styled-jsx/transform/tests/fixture/next-55679/output.swc.js b/packages/styled-jsx/transform/tests/fixture/next-55679/output.swc.js
index c400bd5dd..d7a93d73b 100644
--- a/packages/styled-jsx/transform/tests/fixture/next-55679/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/next-55679/output.swc.js
@@ -3,7 +3,7 @@ import { AppProps } from "next/app";
 const someVar = "--var-1";
 export default function App({ Component, pageProps }) {
     return <>
-      <_JSXStyle id={"78a0e23939332fdf"}>{`:root{${someVar}:red;background-color:var(${someVar})}`}</_JSXStyle>
-      <Component {...pageProps} className={"jsx-78a0e23939332fdf" + " " + (pageProps && pageProps.className != null && pageProps.className || "")}/>
+      <_JSXStyle id={"91a83de9e4159ddc"}>{`:root{${someVar}:red;background-color:var(${someVar})}`}</_JSXStyle>
+      <Component {...pageProps} className={"jsx-91a83de9e4159ddc" + " " + (pageProps && pageProps.className != null && pageProps.className || "")}/>
     </>;
 }
diff --git a/packages/styled-jsx/transform/tests/fixture/next-61788/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/next-61788/output.lightningcss.js
index b5b840f06..7e3e37f3f 100644
--- a/packages/styled-jsx/transform/tests/fixture/next-61788/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/next-61788/output.lightningcss.js
@@ -3,7 +3,7 @@ const MOBILE_MAX = 767;
 export default function Home() {
     return <div className={_JSXStyle.dynamic([
         [
-            "8a4dbea836af7ee3",
+            "48af8450b487afb7",
             [
                 MOBILE_MAX
             ]
@@ -11,13 +11,13 @@ export default function Home() {
     ])}>
       <h1 className={_JSXStyle.dynamic([
         [
-            "8a4dbea836af7ee3",
+            "48af8450b487afb7",
             [
                 MOBILE_MAX
             ]
         ]
     ]) + " " + "header"}>Hello</h1>
-      <_JSXStyle id={"8a4dbea836af7ee3"} dynamic={[
+      <_JSXStyle id={"48af8450b487afb7"} dynamic={[
         MOBILE_MAX
     ]}>{`.header.__jsx-style-dynamic-selector{font-size:48px}@media screen and (max-width:${MOBILE_MAX}px){.header.__jsx-style-dynamic-selector{font-size:12px}}`}</_JSXStyle>
     </div>;
diff --git a/packages/styled-jsx/transform/tests/fixture/next-61788/output.swc.js b/packages/styled-jsx/transform/tests/fixture/next-61788/output.swc.js
index 2f243972c..077797d9b 100644
--- a/packages/styled-jsx/transform/tests/fixture/next-61788/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/next-61788/output.swc.js
@@ -3,7 +3,7 @@ const MOBILE_MAX = 767;
 export default function Home() {
     return <div className={_JSXStyle.dynamic([
         [
-            "8a4dbea836af7ee3",
+            "48af8450b487afb7",
             [
                 MOBILE_MAX
             ]
@@ -11,13 +11,13 @@ export default function Home() {
     ])}>
       <h1 className={_JSXStyle.dynamic([
         [
-            "8a4dbea836af7ee3",
+            "48af8450b487afb7",
             [
                 MOBILE_MAX
             ]
         ]
     ]) + " " + "header"}>Hello</h1>
-      <_JSXStyle id={"8a4dbea836af7ee3"} dynamic={[
+      <_JSXStyle id={"48af8450b487afb7"} dynamic={[
         MOBILE_MAX
     ]}>{`.header.__jsx-style-dynamic-selector{font-size:48px}@media screen and (width<=${MOBILE_MAX}px){.header.__jsx-style-dynamic-selector{font-size:12px}}`}</_JSXStyle>
     </div>;
diff --git a/packages/styled-jsx/transform/tests/fixture/next-64389/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/next-64389/output.lightningcss.js
index 38aad7dbd..62cfe114b 100644
--- a/packages/styled-jsx/transform/tests/fixture/next-64389/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/next-64389/output.lightningcss.js
@@ -2,9 +2,9 @@
 import _JSXStyle from "styled-jsx/style";
 const color = "color: red;";
 export default function RootLayout({ children }) {
-    return <html className={"jsx-5f8347f95efacbc"}>
-            <head className={"jsx-5f8347f95efacbc"}/>
-            <body className={"jsx-5f8347f95efacbc"}>{children}</body>
-            <_JSXStyle id={"5f8347f95efacbc"}>{`body{${color}}body p{font-size:72px}`}</_JSXStyle>
+    return <html className={"jsx-84c8524f1d6f441e"}>
+            <head className={"jsx-84c8524f1d6f441e"}/>
+            <body className={"jsx-84c8524f1d6f441e"}>{children}</body>
+            <_JSXStyle id={"84c8524f1d6f441e"}>{`body{${color}}body p{font-size:72px}`}</_JSXStyle>
         </html>;
 }
diff --git a/packages/styled-jsx/transform/tests/fixture/next-64389/output.swc.js b/packages/styled-jsx/transform/tests/fixture/next-64389/output.swc.js
index 38aad7dbd..62cfe114b 100644
--- a/packages/styled-jsx/transform/tests/fixture/next-64389/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/next-64389/output.swc.js
@@ -2,9 +2,9 @@
 import _JSXStyle from "styled-jsx/style";
 const color = "color: red;";
 export default function RootLayout({ children }) {
-    return <html className={"jsx-5f8347f95efacbc"}>
-            <head className={"jsx-5f8347f95efacbc"}/>
-            <body className={"jsx-5f8347f95efacbc"}>{children}</body>
-            <_JSXStyle id={"5f8347f95efacbc"}>{`body{${color}}body p{font-size:72px}`}</_JSXStyle>
+    return <html className={"jsx-84c8524f1d6f441e"}>
+            <head className={"jsx-84c8524f1d6f441e"}/>
+            <body className={"jsx-84c8524f1d6f441e"}>{children}</body>
+            <_JSXStyle id={"84c8524f1d6f441e"}>{`body{${color}}body p{font-size:72px}`}</_JSXStyle>
         </html>;
 }
diff --git a/packages/styled-jsx/transform/tests/fixture/number-after-placeholder/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/number-after-placeholder/output.lightningcss.js
index 2ac118eec..8d37fbaa2 100644
--- a/packages/styled-jsx/transform/tests/fixture/number-after-placeholder/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/number-after-placeholder/output.lightningcss.js
@@ -1,11 +1,11 @@
 import _JSXStyle from "styled-jsx/style";
 import Link from "next/link";
 export default function IndexPage() {
-    return <div className={"jsx-293a62b3f365fdb5"}>
+    return <div className={"jsx-36ff035cd6660620"}>
       Hello World.{" "}
       <Link href="/about">
-        <a className={"jsx-293a62b3f365fdb5"}>Abound</a>
+        <a className={"jsx-36ff035cd6660620"}>Abound</a>
       </Link>
-      <_JSXStyle id={"293a62b3f365fdb5"}>{`a.jsx-293a62b3f365fdb5{color:${"#abcdef"}12}`}</_JSXStyle>
+      <_JSXStyle id={"36ff035cd6660620"}>{`a.jsx-36ff035cd6660620{color:${"#abcdef"}12}`}</_JSXStyle>
     </div>;
 }
diff --git a/packages/styled-jsx/transform/tests/fixture/number-after-placeholder/output.swc.js b/packages/styled-jsx/transform/tests/fixture/number-after-placeholder/output.swc.js
index 2ac118eec..8d37fbaa2 100644
--- a/packages/styled-jsx/transform/tests/fixture/number-after-placeholder/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/number-after-placeholder/output.swc.js
@@ -1,11 +1,11 @@
 import _JSXStyle from "styled-jsx/style";
 import Link from "next/link";
 export default function IndexPage() {
-    return <div className={"jsx-293a62b3f365fdb5"}>
+    return <div className={"jsx-36ff035cd6660620"}>
       Hello World.{" "}
       <Link href="/about">
-        <a className={"jsx-293a62b3f365fdb5"}>Abound</a>
+        <a className={"jsx-36ff035cd6660620"}>Abound</a>
       </Link>
-      <_JSXStyle id={"293a62b3f365fdb5"}>{`a.jsx-293a62b3f365fdb5{color:${"#abcdef"}12}`}</_JSXStyle>
+      <_JSXStyle id={"36ff035cd6660620"}>{`a.jsx-36ff035cd6660620{color:${"#abcdef"}12}`}</_JSXStyle>
     </div>;
 }
diff --git a/packages/styled-jsx/transform/tests/fixture/pack-2714/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/pack-2714/output.lightningcss.js
index 45304cefb..4a51f68f8 100644
--- a/packages/styled-jsx/transform/tests/fixture/pack-2714/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/pack-2714/output.lightningcss.js
@@ -1,5 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
 const { className: cardClassName, styles } = {
-    styles: <_JSXStyle id={"61ffb82bb95c235d"}>{`.jsx-61ffb82bb95c235d:hover{z-index:${hoverAnimation ? "1" : "auto"}}`}</_JSXStyle>,
-    className: "jsx-61ffb82bb95c235d"
+    styles: <_JSXStyle id={"46964f8160a8b6e"}>{`.jsx-46964f8160a8b6e:hover{z-index:${hoverAnimation ? "1" : "auto"}}`}</_JSXStyle>,
+    className: "jsx-46964f8160a8b6e"
 };
diff --git a/packages/styled-jsx/transform/tests/fixture/pack-2714/output.swc.js b/packages/styled-jsx/transform/tests/fixture/pack-2714/output.swc.js
index 45304cefb..4a51f68f8 100644
--- a/packages/styled-jsx/transform/tests/fixture/pack-2714/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/pack-2714/output.swc.js
@@ -1,5 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
 const { className: cardClassName, styles } = {
-    styles: <_JSXStyle id={"61ffb82bb95c235d"}>{`.jsx-61ffb82bb95c235d:hover{z-index:${hoverAnimation ? "1" : "auto"}}`}</_JSXStyle>,
-    className: "jsx-61ffb82bb95c235d"
+    styles: <_JSXStyle id={"46964f8160a8b6e"}>{`.jsx-46964f8160a8b6e:hover{z-index:${hoverAnimation ? "1" : "auto"}}`}</_JSXStyle>,
+    className: "jsx-46964f8160a8b6e"
 };
diff --git a/packages/styled-jsx/transform/tests/fixture/styles/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/styles/output.lightningcss.js
index 4f8ffe4e8..79731c1af 100644
--- a/packages/styled-jsx/transform/tests/fixture/styles/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/styles/output.lightningcss.js
@@ -6,26 +6,26 @@ bar.__hash = "aaed0341accea8f";
 const baz = new String("div{font-size:3em}");
 baz.__hash = "aaed0341accea8f";
 const a = new String(`div{font-size:${size}em}`);
-a.__hash = "100f5368f115df32";
+a.__hash = "89fd04668ad7cf7d";
 export const uh = bar;
-export const foo = new String(`div.jsx-ef1a1cb26d811a9f{color:${color}}`);
-foo.__hash = "ef1a1cb26d811a9f";
+export const foo = new String(`div.jsx-67f6a2a1a75d9d6c{color:${color}}`);
+foo.__hash = "67f6a2a1a75d9d6c";
 ({
-    styles: <_JSXStyle id={"bb171c68dcc082f0"}>{`div.jsx-bb171c68dcc082f0{color:${colors.green.light}}a.jsx-bb171c68dcc082f0{color:red}`}</_JSXStyle>,
-    className: "jsx-bb171c68dcc082f0"
+    styles: <_JSXStyle id={"11d335620742f83"}>{`div.jsx-11d335620742f83{color:${colors.green.light}}a.jsx-11d335620742f83{color:red}`}</_JSXStyle>,
+    className: "jsx-11d335620742f83"
 });
 const b = {
-    styles: <_JSXStyle id={"ade616ec874fd5eb"}>{`div.jsx-ade616ec874fd5eb{color:${colors.green.light}}a.jsx-ade616ec874fd5eb{color:red}`}</_JSXStyle>,
-    className: "jsx-ade616ec874fd5eb"
+    styles: <_JSXStyle id={"13b7060dd34f3f97"}>{`div.jsx-13b7060dd34f3f97{color:${colors.green.light}}a.jsx-13b7060dd34f3f97{color:red}`}</_JSXStyle>,
+    className: "jsx-13b7060dd34f3f97"
 };
 const dynamic = (colors)=>{
     const b = {
-        styles: <_JSXStyle id={"27362acd75575fc"} dynamic={[
+        styles: <_JSXStyle id={"3aa9e22f55c362d3"} dynamic={[
             colors.green.light
         ]}>{`div.__jsx-style-dynamic-selector{color:${colors.green.light}}a.__jsx-style-dynamic-selector{color:red}`}</_JSXStyle>,
         className: _JSXStyle.dynamic([
             [
-                "27362acd75575fc",
+                "3aa9e22f55c362d3",
                 [
                     colors.green.light
                 ]
@@ -34,6 +34,6 @@ const dynamic = (colors)=>{
     };
 };
 export default {
-    styles: <_JSXStyle id={"662317bd20d2c6c5"}>{`div.jsx-662317bd20d2c6c5{font-size:3em}p.jsx-662317bd20d2c6c5{color:${color}}`}</_JSXStyle>,
-    className: "jsx-662317bd20d2c6c5"
+    styles: <_JSXStyle id={"2ffe2d57b3f2d2a5"}>{`div.jsx-2ffe2d57b3f2d2a5{font-size:3em}p.jsx-2ffe2d57b3f2d2a5{color:${color}}`}</_JSXStyle>,
+    className: "jsx-2ffe2d57b3f2d2a5"
 };
diff --git a/packages/styled-jsx/transform/tests/fixture/styles/output.swc.js b/packages/styled-jsx/transform/tests/fixture/styles/output.swc.js
index 4f8ffe4e8..79731c1af 100644
--- a/packages/styled-jsx/transform/tests/fixture/styles/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/styles/output.swc.js
@@ -6,26 +6,26 @@ bar.__hash = "aaed0341accea8f";
 const baz = new String("div{font-size:3em}");
 baz.__hash = "aaed0341accea8f";
 const a = new String(`div{font-size:${size}em}`);
-a.__hash = "100f5368f115df32";
+a.__hash = "89fd04668ad7cf7d";
 export const uh = bar;
-export const foo = new String(`div.jsx-ef1a1cb26d811a9f{color:${color}}`);
-foo.__hash = "ef1a1cb26d811a9f";
+export const foo = new String(`div.jsx-67f6a2a1a75d9d6c{color:${color}}`);
+foo.__hash = "67f6a2a1a75d9d6c";
 ({
-    styles: <_JSXStyle id={"bb171c68dcc082f0"}>{`div.jsx-bb171c68dcc082f0{color:${colors.green.light}}a.jsx-bb171c68dcc082f0{color:red}`}</_JSXStyle>,
-    className: "jsx-bb171c68dcc082f0"
+    styles: <_JSXStyle id={"11d335620742f83"}>{`div.jsx-11d335620742f83{color:${colors.green.light}}a.jsx-11d335620742f83{color:red}`}</_JSXStyle>,
+    className: "jsx-11d335620742f83"
 });
 const b = {
-    styles: <_JSXStyle id={"ade616ec874fd5eb"}>{`div.jsx-ade616ec874fd5eb{color:${colors.green.light}}a.jsx-ade616ec874fd5eb{color:red}`}</_JSXStyle>,
-    className: "jsx-ade616ec874fd5eb"
+    styles: <_JSXStyle id={"13b7060dd34f3f97"}>{`div.jsx-13b7060dd34f3f97{color:${colors.green.light}}a.jsx-13b7060dd34f3f97{color:red}`}</_JSXStyle>,
+    className: "jsx-13b7060dd34f3f97"
 };
 const dynamic = (colors)=>{
     const b = {
-        styles: <_JSXStyle id={"27362acd75575fc"} dynamic={[
+        styles: <_JSXStyle id={"3aa9e22f55c362d3"} dynamic={[
             colors.green.light
         ]}>{`div.__jsx-style-dynamic-selector{color:${colors.green.light}}a.__jsx-style-dynamic-selector{color:red}`}</_JSXStyle>,
         className: _JSXStyle.dynamic([
             [
-                "27362acd75575fc",
+                "3aa9e22f55c362d3",
                 [
                     colors.green.light
                 ]
@@ -34,6 +34,6 @@ const dynamic = (colors)=>{
     };
 };
 export default {
-    styles: <_JSXStyle id={"662317bd20d2c6c5"}>{`div.jsx-662317bd20d2c6c5{font-size:3em}p.jsx-662317bd20d2c6c5{color:${color}}`}</_JSXStyle>,
-    className: "jsx-662317bd20d2c6c5"
+    styles: <_JSXStyle id={"2ffe2d57b3f2d2a5"}>{`div.jsx-2ffe2d57b3f2d2a5{font-size:3em}p.jsx-2ffe2d57b3f2d2a5{color:${color}}`}</_JSXStyle>,
+    className: "jsx-2ffe2d57b3f2d2a5"
 };
diff --git a/packages/styled-jsx/transform/tests/fixture/svg-strip/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/svg-strip/output.lightningcss.js
index 302f9e2c9..56876a769 100644
--- a/packages/styled-jsx/transform/tests/fixture/svg-strip/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/svg-strip/output.lightningcss.js
@@ -5,7 +5,7 @@ const MaskedDivBad = ()=>{
     return <>
             <div className={_JSXStyle.dynamic([
         [
-            "df9ed59d32773953",
+            "6a8061079fbe556",
             [
                 0.5 + HEAD_MARGIN_PERCENTAGE,
                 0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
@@ -14,7 +14,7 @@ const MaskedDivBad = ()=>{
     ]) + " " + "head"}>
                 <div className={_JSXStyle.dynamic([
         [
-            "df9ed59d32773953",
+            "6a8061079fbe556",
             [
                 0.5 + HEAD_MARGIN_PERCENTAGE,
                 0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
@@ -22,7 +22,7 @@ const MaskedDivBad = ()=>{
         ]
     ]) + " " + "avatar-wrapper"}/>
             </div>
-            <_JSXStyle id={"df9ed59d32773953"} dynamic={[
+            <_JSXStyle id={"6a8061079fbe556"} dynamic={[
         0.5 + HEAD_MARGIN_PERCENTAGE,
         0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
     ]}>{`.head.__jsx-style-dynamic-selector{position:relative}.avatar-wrapper.__jsx-style-dynamic-selector{-webkit-mask-composite:source-out;background:#ff6b6b;border-radius:50%;width:40px;height:40px;-webkit-mask-image:url("data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1 1\\"><circle r=\\"0.5\\" cx=\\"0.5\\" cy=\\"0.5\\"/></svg>"),url("data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1 1\\"><circle r=\\"${0.5 + HEAD_MARGIN_PERCENTAGE}\\" cx=\\"${0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE}\\" cy=\\"0.5\\"/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1 1\\"><circle r=\\"0.5\\" cx=\\"0.5\\" cy=\\"0.5\\"/></svg>"),url("data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 1 1\\"><circle r=\\"${0.5 + HEAD_MARGIN_PERCENTAGE}\\" cx=\\"${0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE}\\" cy=\\"0.5\\"/></svg>");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-out;mask-composite:subtract}`}</_JSXStyle>
diff --git a/packages/styled-jsx/transform/tests/fixture/svg-strip/output.swc.js b/packages/styled-jsx/transform/tests/fixture/svg-strip/output.swc.js
index 327432c82..f4117260d 100644
--- a/packages/styled-jsx/transform/tests/fixture/svg-strip/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/svg-strip/output.swc.js
@@ -5,7 +5,7 @@ const MaskedDivBad = ()=>{
     return <>
             <div className={_JSXStyle.dynamic([
         [
-            "df9ed59d32773953",
+            "6a8061079fbe556",
             [
                 0.5 + HEAD_MARGIN_PERCENTAGE,
                 0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
@@ -14,7 +14,7 @@ const MaskedDivBad = ()=>{
     ]) + " " + "head"}>
                 <div className={_JSXStyle.dynamic([
         [
-            "df9ed59d32773953",
+            "6a8061079fbe556",
             [
                 0.5 + HEAD_MARGIN_PERCENTAGE,
                 0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
@@ -22,7 +22,7 @@ const MaskedDivBad = ()=>{
         ]
     ]) + " " + "avatar-wrapper"}/>
             </div>
-            <_JSXStyle id={"df9ed59d32773953"} dynamic={[
+            <_JSXStyle id={"6a8061079fbe556"} dynamic={[
         0.5 + HEAD_MARGIN_PERCENTAGE,
         0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE
     ]}>{`.head.__jsx-style-dynamic-selector{position:relative}.avatar-wrapper.__jsx-style-dynamic-selector{width:40px;height:40px;background:#ff6b6b;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-mask-image:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><circle r=\"0.5\" cx=\"0.5\" cy=\"0.5\"/></svg>"),url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><circle r=\"${0.5 + HEAD_MARGIN_PERCENTAGE}\" cx=\"${0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE}\" cy=\"0.5\"/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><circle r=\"0.5\" cx=\"0.5\" cy=\"0.5\"/></svg>"),url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><circle r=\"${0.5 + HEAD_MARGIN_PERCENTAGE}\" cx=\"${0.5 + CUTOUT_AVATAR_PERCENTAGE_VISIBLE + HEAD_MARGIN_PERCENTAGE}\" cy=\"0.5\"/></svg>");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-composite:source-out;mask-composite:subtract}`}</_JSXStyle>
diff --git a/packages/styled-jsx/transform/tests/fixture/too-many/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/too-many/output.lightningcss.js
index 94aa7da9f..965a76979 100644
--- a/packages/styled-jsx/transform/tests/fixture/too-many/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/too-many/output.lightningcss.js
@@ -2,7 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 export const Red = ({ Component = "button" })=>{
     return <Component className={_JSXStyle.dynamic([
         [
-            "9773b6dbae57833a",
+            "e1e8a6a283448e8c",
             [
                 e1,
                 e2,
@@ -23,7 +23,7 @@ export const Red = ({ Component = "button" })=>{
         ]
     ])}>
       { /* Dynamic Styles */ }
-      <_JSXStyle id={"9773b6dbae57833a"} dynamic={[
+      <_JSXStyle id={"e1e8a6a283448e8c"} dynamic={[
         e1,
         e2,
         e3,
diff --git a/packages/styled-jsx/transform/tests/fixture/too-many/output.swc.js b/packages/styled-jsx/transform/tests/fixture/too-many/output.swc.js
index 94aa7da9f..965a76979 100644
--- a/packages/styled-jsx/transform/tests/fixture/too-many/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/too-many/output.swc.js
@@ -2,7 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 export const Red = ({ Component = "button" })=>{
     return <Component className={_JSXStyle.dynamic([
         [
-            "9773b6dbae57833a",
+            "e1e8a6a283448e8c",
             [
                 e1,
                 e2,
@@ -23,7 +23,7 @@ export const Red = ({ Component = "button" })=>{
         ]
     ])}>
       { /* Dynamic Styles */ }
-      <_JSXStyle id={"9773b6dbae57833a"} dynamic={[
+      <_JSXStyle id={"e1e8a6a283448e8c"} dynamic={[
         e1,
         e2,
         e3,
diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-escape-2/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/tpl-escape-2/output.lightningcss.js
index d214ff991..e6bff01e2 100644
--- a/packages/styled-jsx/transform/tests/fixture/tpl-escape-2/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/tpl-escape-2/output.lightningcss.js
@@ -2,13 +2,13 @@ import _JSXStyle from "styled-jsx/style";
 export default function Home({ fontFamily }) {
     return <div className={_JSXStyle.dynamic([
         [
-            "8414538f9d8a398a",
+            "adb1908bd7f8294a",
             [
                 fontFamily
             ]
         ]
     ])}>
-      <_JSXStyle id={"8414538f9d8a398a"} dynamic={[
+      <_JSXStyle id={"adb1908bd7f8294a"} dynamic={[
         fontFamily
     ]}>{`body{font-family:${fontFamily}}code:before,code:after{content:"\`"}`}</_JSXStyle>
     </div>;
diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-escape-2/output.swc.js b/packages/styled-jsx/transform/tests/fixture/tpl-escape-2/output.swc.js
index d214ff991..e6bff01e2 100644
--- a/packages/styled-jsx/transform/tests/fixture/tpl-escape-2/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/tpl-escape-2/output.swc.js
@@ -2,13 +2,13 @@ import _JSXStyle from "styled-jsx/style";
 export default function Home({ fontFamily }) {
     return <div className={_JSXStyle.dynamic([
         [
-            "8414538f9d8a398a",
+            "adb1908bd7f8294a",
             [
                 fontFamily
             ]
         ]
     ])}>
-      <_JSXStyle id={"8414538f9d8a398a"} dynamic={[
+      <_JSXStyle id={"adb1908bd7f8294a"} dynamic={[
         fontFamily
     ]}>{`body{font-family:${fontFamily}}code:before,code:after{content:"\`"}`}</_JSXStyle>
     </div>;
diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-1-as-property/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-1-as-property/output.lightningcss.js
index 810668929..56619b07a 100644
--- a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-1-as-property/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-1-as-property/output.lightningcss.js
@@ -3,7 +3,7 @@ export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
             [
-                "ec1457dadfb838e0",
+                "1124213b939364d4",
                 [
                     inputSize ? "height: calc(2 * var(--a)) !important;" : ""
                 ]
@@ -11,13 +11,13 @@ export default class {
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "ec1457dadfb838e0",
+                "1124213b939364d4",
                 [
                     inputSize ? "height: calc(2 * var(--a)) !important;" : ""
                 ]
             ]
         ])}>test</p>
-        <_JSXStyle id={"ec1457dadfb838e0"} dynamic={[
+        <_JSXStyle id={"1124213b939364d4"} dynamic={[
             inputSize ? "height: calc(2 * var(--a)) !important;" : ""
         ]}>{`@media only screen{a.__jsx-style-dynamic-selector{${inputSize ? "height: calc(2 * var(--a)) !important;" : ""}}}`}</_JSXStyle>
       </div>;
diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-1-as-property/output.swc.js b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-1-as-property/output.swc.js
index 810668929..56619b07a 100644
--- a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-1-as-property/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-1-as-property/output.swc.js
@@ -3,7 +3,7 @@ export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
             [
-                "ec1457dadfb838e0",
+                "1124213b939364d4",
                 [
                     inputSize ? "height: calc(2 * var(--a)) !important;" : ""
                 ]
@@ -11,13 +11,13 @@ export default class {
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "ec1457dadfb838e0",
+                "1124213b939364d4",
                 [
                     inputSize ? "height: calc(2 * var(--a)) !important;" : ""
                 ]
             ]
         ])}>test</p>
-        <_JSXStyle id={"ec1457dadfb838e0"} dynamic={[
+        <_JSXStyle id={"1124213b939364d4"} dynamic={[
             inputSize ? "height: calc(2 * var(--a)) !important;" : ""
         ]}>{`@media only screen{a.__jsx-style-dynamic-selector{${inputSize ? "height: calc(2 * var(--a)) !important;" : ""}}}`}</_JSXStyle>
       </div>;
diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-2-as-part-of-value/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-2-as-part-of-value/output.lightningcss.js
index 5388a9c74..a059282ba 100644
--- a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-2-as-part-of-value/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-2-as-part-of-value/output.lightningcss.js
@@ -3,7 +3,7 @@ export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
             [
-                "22ce9850189b7516",
+                "9ce0024cbfa3633f",
                 [
                     a[b],
                     -1 * (c || 0),
@@ -13,7 +13,7 @@ export default class {
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "22ce9850189b7516",
+                "9ce0024cbfa3633f",
                 [
                     a[b],
                     -1 * (c || 0),
@@ -21,7 +21,7 @@ export default class {
                 ]
             ]
         ])}>test</p>
-        <_JSXStyle id={"22ce9850189b7516"} dynamic={[
+        <_JSXStyle id={"9ce0024cbfa3633f"} dynamic={[
             a[b],
             -1 * (c || 0),
             d
diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-2-as-part-of-value/output.swc.js b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-2-as-part-of-value/output.swc.js
index 5388a9c74..a059282ba 100644
--- a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-2-as-part-of-value/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-2-as-part-of-value/output.swc.js
@@ -3,7 +3,7 @@ export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
             [
-                "22ce9850189b7516",
+                "9ce0024cbfa3633f",
                 [
                     a[b],
                     -1 * (c || 0),
@@ -13,7 +13,7 @@ export default class {
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "22ce9850189b7516",
+                "9ce0024cbfa3633f",
                 [
                     a[b],
                     -1 * (c || 0),
@@ -21,7 +21,7 @@ export default class {
                 ]
             ]
         ])}>test</p>
-        <_JSXStyle id={"22ce9850189b7516"} dynamic={[
+        <_JSXStyle id={"9ce0024cbfa3633f"} dynamic={[
             a[b],
             -1 * (c || 0),
             d
diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-3-as-value/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-3-as-value/output.lightningcss.js
index b0fe8398a..369e6065c 100644
--- a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-3-as-value/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-3-as-value/output.lightningcss.js
@@ -3,7 +3,7 @@ export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
             [
-                "52990ef9bd60995a",
+                "802ca8cb9aa44af7",
                 [
                     a
                 ]
@@ -11,13 +11,13 @@ export default class {
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "52990ef9bd60995a",
+                "802ca8cb9aa44af7",
                 [
                     a
                 ]
             ]
         ])}>test</p>
-        <_JSXStyle id={"52990ef9bd60995a"} dynamic={[
+        <_JSXStyle id={"802ca8cb9aa44af7"} dynamic={[
             a
         ]}>{`@media only screen{a.__jsx-style-dynamic-selector{color:${a}}}`}</_JSXStyle>
       </div>;
diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-3-as-value/output.swc.js b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-3-as-value/output.swc.js
index b0fe8398a..369e6065c 100644
--- a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-3-as-value/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-3-as-value/output.swc.js
@@ -3,7 +3,7 @@ export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
             [
-                "52990ef9bd60995a",
+                "802ca8cb9aa44af7",
                 [
                     a
                 ]
@@ -11,13 +11,13 @@ export default class {
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "52990ef9bd60995a",
+                "802ca8cb9aa44af7",
                 [
                     a
                 ]
             ]
         ])}>test</p>
-        <_JSXStyle id={"52990ef9bd60995a"} dynamic={[
+        <_JSXStyle id={"802ca8cb9aa44af7"} dynamic={[
             a
         ]}>{`@media only screen{a.__jsx-style-dynamic-selector{color:${a}}}`}</_JSXStyle>
       </div>;
diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.lightningcss.js
index 854e2d09b..ca3da6417 100644
--- a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.lightningcss.js
@@ -3,7 +3,7 @@ export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
             [
-                "1fca3fd0a076d740",
+                "8cc42b1ab7e8f32e",
                 [
                     a || "var(--c)",
                     b || "inherit"
@@ -12,14 +12,14 @@ export default class {
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "1fca3fd0a076d740",
+                "8cc42b1ab7e8f32e",
                 [
                     a || "var(--c)",
                     b || "inherit"
                 ]
             ]
         ])}>test</p>
-        <_JSXStyle id={"1fca3fd0a076d740"} dynamic={[
+        <_JSXStyle id={"8cc42b1ab7e8f32e"} dynamic={[
             a || "var(--c)",
             b || "inherit"
         ]}>{`.a:hover .b.__jsx-style-dynamic-selector{padding:0 ${a || "var(--c)"};color:${b || "inherit"};display:inline-block}`}</_JSXStyle>
diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.swc.js b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.swc.js
index 9ed579530..be39e8159 100644
--- a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-4-as-part-of-value-in-multiple/output.swc.js
@@ -3,7 +3,7 @@ export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
             [
-                "1fca3fd0a076d740",
+                "8cc42b1ab7e8f32e",
                 [
                     a || "var(--c)",
                     b || "inherit"
@@ -12,14 +12,14 @@ export default class {
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "1fca3fd0a076d740",
+                "8cc42b1ab7e8f32e",
                 [
                     a || "var(--c)",
                     b || "inherit"
                 ]
             ]
         ])}>test</p>
-        <_JSXStyle id={"1fca3fd0a076d740"} dynamic={[
+        <_JSXStyle id={"8cc42b1ab7e8f32e"} dynamic={[
             a || "var(--c)",
             b || "inherit"
         ]}>{`.a:hover .b.__jsx-style-dynamic-selector{display:inline-block;padding:0 ${a || "var(--c)"};color:${b || "inherit"}}`}</_JSXStyle>
diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.lightningcss.js b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.lightningcss.js
index 62eb75c58..672286a90 100644
--- a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.lightningcss.js
+++ b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.lightningcss.js
@@ -3,7 +3,7 @@ export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
             [
-                "26dfd6a14f067868",
+                "471bc632407f371b",
                 [
                     a ? "100%" : "200px",
                     b ? "0" : "8px 20px"
@@ -12,14 +12,14 @@ export default class {
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "26dfd6a14f067868",
+                "471bc632407f371b",
                 [
                     a ? "100%" : "200px",
                     b ? "0" : "8px 20px"
                 ]
             ]
         ])}>test</p>
-        <_JSXStyle id={"26dfd6a14f067868"} dynamic={[
+        <_JSXStyle id={"471bc632407f371b"} dynamic={[
             a ? "100%" : "200px",
             b ? "0" : "8px 20px"
         ]}>{`.item.__jsx-style-dynamic-selector{max-width:${a ? "100%" : "200px"};padding:${b ? "0" : "8px 20px"}}`}</_JSXStyle>
diff --git a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.swc.js b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.swc.js
index 62eb75c58..672286a90 100644
--- a/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.swc.js
+++ b/packages/styled-jsx/transform/tests/fixture/tpl-placeholder-5-values-of-multiple-properties/output.swc.js
@@ -3,7 +3,7 @@ export default class {
     render() {
         return <div className={_JSXStyle.dynamic([
             [
-                "26dfd6a14f067868",
+                "471bc632407f371b",
                 [
                     a ? "100%" : "200px",
                     b ? "0" : "8px 20px"
@@ -12,14 +12,14 @@ export default class {
         ])}>
         <p className={_JSXStyle.dynamic([
             [
-                "26dfd6a14f067868",
+                "471bc632407f371b",
                 [
                     a ? "100%" : "200px",
                     b ? "0" : "8px 20px"
                 ]
             ]
         ])}>test</p>
-        <_JSXStyle id={"26dfd6a14f067868"} dynamic={[
+        <_JSXStyle id={"471bc632407f371b"} dynamic={[
             a ? "100%" : "200px",
             b ? "0" : "8px 20px"
         ]}>{`.item.__jsx-style-dynamic-selector{max-width:${a ? "100%" : "200px"};padding:${b ? "0" : "8px 20px"}}`}</_JSXStyle>