fix(ssr): fix rendering of class with scope token (#5072)

salesforce · Jan 8, 2025 · fb5ef00 · fb5ef00
1 parent f29ff6e
commit fb5ef00
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/...__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/expected.html b/...__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/expected.html
@@ -221,5 +221,18 @@
         </x-grandchild>
       </template>
     </x-child>
+    <x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
+      <template shadowrootmode="open">
+        <style class="lwc-5h3d35cke7v" type="text/css">
+          :host {background: blue;}
+        </style>
+        <div class="&quot;'<&amp; lwc-5h3d35cke7v">
+        </div>
+        <x-grandchild class="&quot;'<&amp; lwc-5h3d35cke7v">
+          <template shadowrootmode="open">
+          </template>
+        </x-grandchild>
+      </template>
+    </x-child>
   </template>
 </x-parent>
diff --git a/...res/attribute-class/with-scoped-styles-only-in-child/dynamic/modules/x/parent/parent.html b/...res/attribute-class/with-scoped-styles-only-in-child/dynamic/modules/x/parent/parent.html
@@ -16,4 +16,5 @@
     <x-child dynamic={isUppercase}></x-child>
     <x-child dynamic={isTabs}></x-child>
     <x-child dynamic={isNewlines}></x-child>
+    <x-child dynamic={hasEscapableCharacters}></x-child>
 </template>
diff --git a/...tures/attribute-class/with-scoped-styles-only-in-child/dynamic/modules/x/parent/parent.js b/...tures/attribute-class/with-scoped-styles-only-in-child/dynamic/modules/x/parent/parent.js
@@ -21,4 +21,7 @@ export default class extends LightningElement {
     isUppercase = 'FOO BaR';
     isTabs = '\tfoo\t';
     isNewlines = '\nfoo\n';
+    // Skipping `>` because it messes up `formatHTML()`, and the important thing is checking
+    // that we are calling `htmlEscape()` in attribute mode, so checking `<` is sufficient.
+    hasEscapableCharacters = `"'<&`;
 }
diff --git a/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts b/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts
@@ -8,8 +8,6 @@
 // We should slowly drive down these test failures or at least document where we expect the failures
 // TODO [#4815]: enable all SSR v2 tests
 export const expectedFailures = new Set([
-    'attribute-class/with-scoped-styles-only-in-child/dynamic/index.js',
-    'attribute-class/with-scoped-styles/dynamic/index.js',
     'attribute-global-html/as-component-prop/undeclared/index.js',
     'attribute-global-html/as-component-prop/without-@api/index.js',
     'exports/component-as-default/index.js',

diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/element.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/element.ts
@@ -81,9 +81,17 @@ const bYieldClassDynamicValue = esTemplateWithYield`
         const attrValue = normalizeClass(${/* attribute value expression */ is.expression});
         const shouldRenderScopeToken = hasScopedStylesheets || hasScopedStaticStylesheets(Cmp);
 
+        // Concatenate the scope token with the class attribute value as necessary.
+        // If either is missing, render the other alone.
+        let combinedValue = shouldRenderScopeToken ? stylesheetScopeToken : '';
         if (attrValue) {
-            const prefix = shouldRenderScopeToken ? stylesheetScopeToken + ' ' : '';
-            yield \` class="\${prefix}\${htmlEscape(String(attrValue), true)}"\`;
+            if (combinedValue) {
+                combinedValue += ' ';
+            }
+            combinedValue += htmlEscape(String(attrValue), true);
+        }
+        if (combinedValue) {
+            yield \` class="\${combinedValue}"\`;
         }
     }
 `<EsBlockStatement>;