fix(ssr): do not render empty class (#4960)

salesforce · Nov 26, 2024 · 348130f · 348130f
1 parent b04442f
commit 348130f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/packages/@lwc/ssr-compiler/src/__tests__/fixtures.spec.ts b/packages/@lwc/ssr-compiler/src/__tests__/fixtures.spec.ts
@@ -11,10 +11,9 @@ import { rollup } from 'rollup';
 import lwcRollupPlugin from '@lwc/rollup-plugin';
 import { testFixtureDir, formatHTML } from '@lwc/test-utils-lwc-internals';
 import { serverSideRenderComponent } from '@lwc/ssr-runtime';
-import { DEFAULT_SSR_MODE } from '@lwc/shared';
+import { DEFAULT_SSR_MODE, type CompilationMode } from '@lwc/shared';
 import { expectedFailures } from './utils/expected-failures';
 import type { FeatureFlagName } from '@lwc/features/dist/types';
-import type { CompilationMode } from '../index';
 
 interface FixtureModule {
     tagName: string;

diff --git a/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts b/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts
@@ -17,9 +17,7 @@ export const expectedFailures = new Set([
     'adjacent-text-nodes/with-comments/nonempty3/index.js',
     'adjacent-text-nodes/with-comments/preserve-comments2/index.js',
     'attribute-aria/dynamic/index.js',
-    'attribute-class/unstyled/dynamic/index.js',
     'attribute-class/with-scoped-styles-only-in-child/dynamic/index.js',
-    'attribute-class/with-scoped-styles-only-in-parent/dynamic/index.js',
     'attribute-class/with-scoped-styles/dynamic/index.js',
     'attribute-component-global-html/index.js',
     'attribute-global-html/as-component-prop/undeclared/index.js',

diff --git a/packages/@lwc/ssr-runtime/src/render.ts b/packages/@lwc/ssr-runtime/src/render.ts
@@ -37,9 +37,17 @@ function renderAttrsPrivate(
         } else if (!isString(attrValue)) {
             attrValue = String(attrValue);
         }
-        if (combinedScopeToken && attrName === 'class') {
-            attrValue += ' ' + combinedScopeToken;
-            hasClassAttribute = true;
+
+        if (attrName === 'class') {
+            if (attrValue === '') {
+                // If the class attribute is empty, we don't render it.
+                continue;
+            }
+
+            if (combinedScopeToken) {
+                attrValue += ' ' + combinedScopeToken;
+                hasClassAttribute = true;
+            }
         }
 
         result += attrValue === '' ? ` ${attrName}` : ` ${attrName}="${escapeAttrVal(attrValue)}"`;