diff --git a/.github/workflows/karma.yml b/.github/workflows/karma.yml
index 2eac90aa22..27a9a7918d 100644
--- a/.github/workflows/karma.yml
+++ b/.github/workflows/karma.yml
@@ -182,6 +182,7 @@ jobs:
             - run: ENABLE_SYNTHETIC_SHADOW_IN_HYDRATION=1 yarn hydration:sauce:ci
             - run: NODE_ENV_FOR_TEST=production yarn hydration:sauce:ci
             - run: DISABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE=1 yarn hydration:sauce:ci
+            - run: DISABLE_STATIC_CONTENT_OPTIMIZATION=1 yarn hydration:sauce:ci
 
             - name: Upload coverage results
               uses: actions/upload-artifact@v4
diff --git a/packages/@lwc/engine-core/src/framework/hydration.ts b/packages/@lwc/engine-core/src/framework/hydration.ts
index c4c63cd06a..868c9b80d8 100644
--- a/packages/@lwc/engine-core/src/framework/hydration.ts
+++ b/packages/@lwc/engine-core/src/framework/hydration.ts
@@ -858,13 +858,15 @@ function haveCompatibleStaticParts(vnode: VStatic, renderer: RendererAPI) {
             // Explicitly skip hydration validation when static parts don't contain `style` or `className`.
             // This means the style/class attributes are either static or don't exist on the element and
             // cannot be affected by hydration.
-            const hasMatchingStyleAttr = shouldValidateAttr(data, 'style')
-                ? validateStyleAttr(vnode, elm, data, renderer)
-                : true;
+            // We need to do class first, style second to match the ordering of non-static-optimized nodes,
+            // otherwise the ordering of console errors is different between the two.
             const hasMatchingClass = shouldValidateAttr(data, 'className')
                 ? validateClassAttr(vnode, elm, data, renderer)
                 : true;
-            if (isFalse(hasMatchingAttrs && hasMatchingStyleAttr && hasMatchingClass)) {
+            const hasMatchingStyleAttr = shouldValidateAttr(data, 'style')
+                ? validateStyleAttr(vnode, elm, data, renderer)
+                : true;
+            if (isFalse(hasMatchingAttrs && hasMatchingClass && hasMatchingStyleAttr)) {
                 return false;
             }
         } else {
diff --git a/packages/@lwc/integration-karma/scripts/karma-plugins/hydration-tests.js b/packages/@lwc/integration-karma/scripts/karma-plugins/hydration-tests.js
index 3cfb003fec..748b4b7948 100644
--- a/packages/@lwc/integration-karma/scripts/karma-plugins/hydration-tests.js
+++ b/packages/@lwc/integration-karma/scripts/karma-plugins/hydration-tests.js
@@ -11,6 +11,7 @@ const { format } = require('node:util');
 const { rollup } = require('rollup');
 const lwcRollupPlugin = require('@lwc/rollup-plugin');
 const ssr = require('@lwc/engine-server');
+const { DISABLE_STATIC_CONTENT_OPTIMIZATION } = require('../shared/options');
 const Watcher = require('./Watcher');
 
 const context = {
@@ -70,6 +71,7 @@ async function getCompiledModule(dirName) {
                     strict: true,
                 },
                 enableDynamicComponents: true,
+                enableStaticContentOptimization: !DISABLE_STATIC_CONTENT_OPTIMIZATION,
             }),
         ],
         cache,
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-client/index.spec.js
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-client/index.spec.js
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-client/index.spec.js
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-client/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-client/x/main/main.html
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-client/x/main/main.html
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-client/x/main/main.html
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-client/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-client/x/main/main.js
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-client/x/main/main.js
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-client/x/main/main.js
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-server/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-server/index.spec.js
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-server/index.spec.js
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-server/index.spec.js
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-server/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-server/x/main/main.html
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-server/x/main/main.html
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-server/x/main/main.html
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-server/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-server/x/main/main.js
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-extra-class-from-server/x/main/main.js
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/extra-class-from-server/x/main/main.js
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js
new file mode 100644
index 0000000000..cd816f1759
--- /dev/null
+++ b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js
@@ -0,0 +1,36 @@
+export default {
+    props: {
+        ssr: true,
+    },
+    clientProps: {
+        ssr: false,
+    },
+    snapshot(target) {
+        const p = target.shadowRoot.querySelector('p');
+        return {
+            p,
+            classes: p.className,
+        };
+    },
+    test(target, snapshots, consoleCalls) {
+        const p = target.shadowRoot.querySelector('p');
+
+        // TODO [#4656]: static optimization causes mismatches for style/class only when ordering is different
+        if (process.env.DISABLE_STATIC_CONTENT_OPTIMIZATION) {
+            expect(p).toBe(snapshots.p);
+            expect(p.className).toBe(snapshots.classes);
+
+            expect(consoleCalls.error).toHaveSize(0);
+        } else {
+            expect(p).not.toBe(snapshots.p);
+            expect(p.className).toBe('c1 c2 c3');
+
+            TestUtils.expectConsoleCallsDev(consoleCalls, {
+                error: [
+                    'Mismatch hydrating element <p>: attribute "class" has different values, expected "c1 c2 c3" but found "c3 c2 c1"',
+                    'Hydration completed with errors.',
+                ],
+            });
+        }
+    },
+};
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/x/main/main.html
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/x/main/main.html
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/x/main/main.html
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/x/main/main.js
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/x/main/main.js
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-different-order/x/main/main.js
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-with-static-parts/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-with-static-parts/index.spec.js
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-with-static-parts/index.spec.js
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-with-static-parts/index.spec.js
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-with-static-parts/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-with-static-parts/x/main/main.html
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-with-static-parts/x/main/main.html
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-with-static-parts/x/main/main.html
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-with-static-parts/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-with-static-parts/x/main/main.js
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-with-static-parts/x/main/main.js
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same-with-static-parts/x/main/main.js
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same/index.spec.js
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same/index.spec.js
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same/index.spec.js
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same/x/main/main.html
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same/x/main/main.html
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same/x/main/main.html
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same/x/main/main.js
similarity index 100%
rename from packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same/x/main/main.js
rename to packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/same/x/main/main.js
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/index.spec.js
deleted file mode 100644
index af8d4d8f1b..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-same-different-order/index.spec.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export default {
-    props: {
-        ssr: true,
-    },
-    clientProps: {
-        ssr: false,
-    },
-    snapshot(target) {
-        const p = target.shadowRoot.querySelector('p');
-        return {
-            p,
-            classes: p.className,
-        };
-    },
-    test(target, snapshots, consoleCalls) {
-        const p = target.shadowRoot.querySelector('p');
-
-        expect(p).not.toBe(snapshots.p);
-        expect(p.className).toBe('c1 c2 c3');
-
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
-                'Mismatch hydrating element <p>: attribute "class" has different values, expected "c1 c2 c3" but found "c3 c2 c1"',
-                'Hydration completed with errors.',
-            ],
-        });
-    },
-};
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-client/index.spec.js
deleted file mode 100644
index c80772c979..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-client/index.spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-export default {
-    props: {
-        ssr: true,
-    },
-    clientProps: {
-        ssr: false,
-    },
-    snapshot(target) {
-        const p = target.shadowRoot.querySelector('p');
-        return {
-            p,
-            classes: p.className,
-        };
-    },
-    test(target, snapshots, consoleCalls) {
-        const p = target.shadowRoot.querySelector('p');
-
-        expect(p).not.toBe(snapshots.p);
-        expect(p.className).not.toBe(snapshots.classes);
-        expect(p.className).toBe('c1 c2 c3');
-
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
-                'Mismatch hydrating element <p>: attribute "class" has different values, expected "c1 c2 c3" but found "c1 c3"',
-                'Hydration completed with errors.',
-            ],
-        });
-    },
-};
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-client/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-client/x/main/main.html
deleted file mode 100644
index 3818761a8f..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-client/x/main/main.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <template if:true={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p class="c1 c3" lwc:spread={fake}>txt</p>
-    </template>
-    <template if:false={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p class="c1 c2 c3" lwc:spread={fake}>txt</p>
-    </template>
-</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-client/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-client/x/main/main.js
deleted file mode 100644
index 8d248b4077..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-client/x/main/main.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { LightningElement, api } from 'lwc';
-
-export default class Main extends LightningElement {
-    @api ssr;
-}
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-server/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-server/index.spec.js
deleted file mode 100644
index a3af83a2fb..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-server/index.spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-export default {
-    props: {
-        ssr: true,
-    },
-    clientProps: {
-        ssr: false,
-    },
-    snapshot(target) {
-        const p = target.shadowRoot.querySelector('p');
-        return {
-            p,
-            classes: p.className,
-        };
-    },
-    test(target, snapshots, consoleCalls) {
-        const p = target.shadowRoot.querySelector('p');
-
-        expect(p).not.toBe(snapshots.p);
-        expect(p.className).not.toBe(snapshots.classes);
-        expect(p.className).toBe('c1 c3');
-
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
-                'Mismatch hydrating element <p>: attribute "class" has different values, expected "c1 c3" but found "c1 c2 c3"',
-                'Hydration completed with errors.',
-            ],
-        });
-    },
-};
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-server/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-server/x/main/main.html
deleted file mode 100644
index 8b3fedd18c..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-server/x/main/main.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <template if:true={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p class="c1 c2 c3" lwc:spread={fake}>txt</p>
-    </template>
-    <template if:false={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p class="c1 c3" lwc:spread={fake}>txt</p>
-    </template>
-</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-server/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-server/x/main/main.js
deleted file mode 100644
index 8d248b4077..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-extra-class-from-server/x/main/main.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { LightningElement, api } from 'lwc';
-
-export default class Main extends LightningElement {
-    @api ssr;
-}
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-same-different-order/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-same-different-order/index.spec.js
deleted file mode 100644
index 7ff31a5547..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-same-different-order/index.spec.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export default {
-    props: {
-        ssr: true,
-    },
-    clientProps: {
-        ssr: false,
-    },
-    snapshot(target) {
-        const p = target.shadowRoot.querySelector('p');
-        return {
-            p,
-            classes: p.className,
-        };
-    },
-    test(target, snapshots, consoleCalls) {
-        const p = target.shadowRoot.querySelector('p');
-
-        expect(p).toBe(snapshots.p);
-        expect(p.className).toBe(snapshots.classes);
-
-        expect(consoleCalls.error).toHaveSize(0);
-    },
-};
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-same-different-order/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-same-different-order/x/main/main.html
deleted file mode 100644
index 552c3da9c8..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-same-different-order/x/main/main.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <template if:true={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p class="c3 c2 c1" lwc:spread={fake}>txt</p>
-    </template>
-    <template if:false={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p class="c1 c2 c3" lwc:spread={fake}>txt</p>
-    </template>
-</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-same-different-order/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-same-different-order/x/main/main.js
deleted file mode 100644
index 8d248b4077..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/class-attr/static-unoptimized-same-different-order/x/main/main.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { LightningElement, api } from 'lwc';
-
-export default class Main extends LightningElement {
-    @api ssr;
-}
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js
index 3f79f48ef4..39ca39e2a0 100644
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js
+++ b/packages/@lwc/integration-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js
@@ -26,8 +26,8 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [
                 'Mismatch hydrating element <p>: attribute "data-attrs" has different values, expected "client-attrs" but found "ssr-attrs"',
-                'Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: blue;" but found "background-color: red;"',
                 'Mismatch hydrating element <p>: attribute "class" has different values, expected "client-class" but found "ssr-class"',
+                'Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: blue;" but found "background-color: red;"',
                 'Hydration completed with errors.',
             ],
         });
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js
index a52b033c1c..a5ba30cb17 100644
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js
+++ b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/same-different-order/index.spec.js
@@ -15,16 +15,24 @@ export default {
     test(target, snapshots, consoleCalls) {
         const p = target.shadowRoot.querySelector('p');
 
-        expect(p).not.toBe(snapshots.p);
-        expect(p.getAttribute('style')).toBe(
-            'margin: 1px; border-color: red; background-color: red;'
-        );
+        // TODO [#4656]: static optimization causes mismatches for style/class only when ordering is different
+        if (process.env.DISABLE_STATIC_CONTENT_OPTIMIZATION) {
+            expect(p).toBe(snapshots.p);
+            expect(p.getAttribute('style')).toBe(snapshots.style);
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
-                'Mismatch hydrating element <p>: attribute "style" has different values, expected "margin: 1px; border-color: red; background-color: red;" but found "background-color: red; border-color: red; margin: 1px;"',
-                'Hydration completed with errors.',
-            ],
-        });
+            expect(consoleCalls.error).toHaveSize(0);
+        } else {
+            expect(p).not.toBe(snapshots.p);
+            expect(p.getAttribute('style')).toBe(
+                'margin: 1px; border-color: red; background-color: red;'
+            );
+
+            TestUtils.expectConsoleCallsDev(consoleCalls, {
+                error: [
+                    'Mismatch hydrating element <p>: attribute "style" has different values, expected "margin: 1px; border-color: red; background-color: red;" but found "background-color: red; border-color: red; margin: 1px;"',
+                    'Hydration completed with errors.',
+                ],
+            });
+        }
     },
 };
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-different-priority/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-different-priority/index.spec.js
deleted file mode 100644
index 81e4f37237..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-different-priority/index.spec.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export default {
-    props: {
-        ssr: true,
-    },
-    clientProps: {
-        ssr: false,
-    },
-    snapshot(target) {
-        const p = target.shadowRoot.querySelector('p');
-        return {
-            p,
-            style: p.getAttribute('style'),
-        };
-    },
-    test(target, snapshots, consoleCalls) {
-        const p = target.shadowRoot.querySelector('p');
-
-        expect(p).not.toBe(snapshots.p);
-        expect(p.getAttribute('style')).not.toBe(snapshots.style);
-        expect(p.getAttribute('style')).toBe(
-            'background-color: red; border-color: red !important;'
-        );
-
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
-                '[LWC error]: Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red; border-color: red !important;" but found "background-color: red; border-color: red;".',
-                'Hydration completed with errors.',
-            ],
-        });
-    },
-};
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-different-priority/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-different-priority/x/main/main.html
deleted file mode 100644
index 19419c8dc4..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-different-priority/x/main/main.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <template if:false={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p style="background-color: red; border-color: red !important;" lwc:spread={fake}>txt</p>
-    </template>
-    <template if:true={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p style="background-color: red; border-color: red;" lwc:spread={fake}>txt</p>
-    </template>
-</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-different-priority/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-different-priority/x/main/main.js
deleted file mode 100644
index 8d248b4077..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-different-priority/x/main/main.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { LightningElement, api } from 'lwc';
-
-export default class Main extends LightningElement {
-    @api ssr;
-}
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/index.spec.js
deleted file mode 100644
index 242636358b..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/index.spec.js
+++ /dev/null
@@ -1,31 +0,0 @@
-export default {
-    props: {
-        ssr: true,
-    },
-    clientProps: {
-        ssr: false,
-    },
-    snapshot(target) {
-        const p = target.shadowRoot.querySelector('p');
-        return {
-            p,
-            style: p.getAttribute('style'),
-        };
-    },
-    test(target, snapshots, consoleCalls) {
-        const p = target.shadowRoot.querySelector('p');
-
-        expect(p).not.toBe(snapshots.p);
-        expect(p.getAttribute('style')).not.toBe(snapshots.style);
-        expect(p.getAttribute('style')).toBe(
-            'background-color: red; border-color: red; margin: 1px;'
-        );
-
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
-                '[LWC error]: Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red; border-color: red; margin: 1px;" but found "background-color: red; border-color: red;".',
-                'Hydration completed with errors.',
-            ],
-        });
-    },
-};
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/x/main/main.html
deleted file mode 100644
index 09517731f9..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/x/main/main.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <template if:true={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p style="background-color: red; border-color: red;" lwc:spread={fake}>txt</p>
-    </template>
-    <template if:false={ssr}>
-        <!-- `id`` disables static content optimization -->
-        <p style="background-color: red; border-color: red; margin: 1px;" lwc:spread={fake}>txt</p>
-    </template>
-</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/x/main/main.js
deleted file mode 100644
index 8d248b4077..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-client/x/main/main.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { LightningElement, api } from 'lwc';
-
-export default class Main extends LightningElement {
-    @api ssr;
-}
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-server/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-server/index.spec.js
deleted file mode 100644
index 9fa5814075..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-server/index.spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-export default {
-    props: {
-        ssr: true,
-    },
-    clientProps: {
-        ssr: false,
-    },
-    snapshot(target) {
-        const p = target.shadowRoot.querySelector('p');
-        return {
-            p,
-            style: p.getAttribute('style'),
-        };
-    },
-    test(target, snapshots, consoleCalls) {
-        const p = target.shadowRoot.querySelector('p');
-
-        expect(p).not.toBe(snapshots.p);
-        expect(p.getAttribute('style')).not.toBe(snapshots.style);
-        expect(p.getAttribute('style')).toBe('background-color: red; border-color: red;');
-
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
-            error: [
-                '[LWC error]: Mismatch hydrating element <p>: attribute "style" has different values, expected "background-color: red; border-color: red;" but found "background-color: red; border-color: red; margin: 1px;".',
-                'Hydration completed with errors.',
-            ],
-        });
-    },
-};
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-server/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-server/x/main/main.html
deleted file mode 100644
index 75af4c20bb..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-server/x/main/main.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <template if:false={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p style="background-color: red; border-color: red;" lwc:spread={fake}>txt</p>
-    </template>
-    <template if:true={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p style="background-color: red; border-color: red; margin: 1px;" lwc:spread={fake}>txt</p>
-    </template>
-</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-server/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-server/x/main/main.js
deleted file mode 100644
index 03319d1333..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-extra-from-server/x/main/main.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { LightningElement, api } from 'lwc';
-
-export default class Main extends LightningElement {
-    @api ssr;
-
-    onClick() {}
-}
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-different-order/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-different-order/index.spec.js
deleted file mode 100644
index b6d762a4e2..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-different-order/index.spec.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export default {
-    props: {
-        ssr: true,
-    },
-    clientProps: {
-        ssr: false,
-    },
-    snapshot(target) {
-        const p = target.shadowRoot.querySelector('p');
-        return {
-            p,
-            style: p.getAttribute('style'),
-        };
-    },
-    test(target, snapshots, consoleCalls) {
-        const p = target.shadowRoot.querySelector('p');
-
-        expect(p).toBe(snapshots.p);
-        expect(p.getAttribute('style')).toBe(snapshots.style);
-
-        expect(consoleCalls.error).toHaveSize(0);
-    },
-};
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-different-order/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-different-order/x/main/main.html
deleted file mode 100644
index e49df57574..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-different-order/x/main/main.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <template if:true={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p style="background-color: red; border-color: red; margin: 1px;" lwc:spread={fake}>txt</p>
-    </template>
-    <template if:false={ssr}>
-        <!-- `lwc:spread` disables static content optimization -->
-        <p style="margin: 1px; border-color: red; background-color: red;" lwc:spread={fake}>txt</p>
-    </template>
-</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-different-order/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-different-order/x/main/main.js
deleted file mode 100644
index 8d248b4077..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-different-order/x/main/main.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { LightningElement, api } from 'lwc';
-
-export default class Main extends LightningElement {
-    @api ssr;
-}
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-priority/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-priority/index.spec.js
deleted file mode 100644
index 06a355fde7..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-priority/index.spec.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
-    snapshot(target) {
-        const p = target.shadowRoot.querySelector('p');
-        return {
-            p,
-            style: p.getAttribute('style'),
-        };
-    },
-    test(target, snapshots) {
-        const p = target.shadowRoot.querySelector('p');
-
-        expect(p).toBe(snapshots.p);
-        expect(p.getAttribute('style')).toBe(snapshots.style);
-    },
-};
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-priority/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-priority/x/main/main.html
deleted file mode 100644
index e99fb5612f..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-priority/x/main/main.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <!-- Note: extra spaces matters -->
-    <!-- `lwc:spread` disables static content optimization -->
-    <p style="background-color: red; border-color:     red !important   ;    " lwc:spread={fake}>txt</p>
-</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-priority/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-priority/x/main/main.js
deleted file mode 100644
index 80164ac007..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same-priority/x/main/main.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class Main extends LightningElement {}
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same/index.spec.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same/index.spec.js
deleted file mode 100644
index fd3dbd4c66..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same/index.spec.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default {
-    snapshot(target) {
-        const p = target.shadowRoot.querySelector('p');
-        return {
-            p,
-            style: p.getAttribute('style'),
-        };
-    },
-    test(target, snapshots, consoleCalls) {
-        const p = target.shadowRoot.querySelector('p');
-
-        expect(p).toBe(snapshots.p);
-        expect(p.getAttribute('style')).toBe(snapshots.style);
-
-        expect(consoleCalls.error).toHaveSize(0);
-    },
-};
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same/x/main/main.html b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same/x/main/main.html
deleted file mode 100644
index c55c5d3fbb..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same/x/main/main.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<template>
-    <!-- `lwc:spread` disables static content optimization -->
-    <p style="background-color: red; border-color: red; margin: 1px;" lwc:spread={fake}>txt</p>
-</template>
diff --git a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same/x/main/main.js b/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same/x/main/main.js
deleted file mode 100644
index 80164ac007..0000000000
--- a/packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/unoptimized-same/x/main/main.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class Main extends LightningElement {}