Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nolanlawson merged 5 commits into from
Jan 8, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0df8a2e
fix(ssr): fix rendering of `class` with scope token
nolanlawson Dec 20, 2024
14823c8
fix: whoops forgot param
nolanlawson Dec 20, 2024
79343a0
test: add a test for html escaping
nolanlawson Dec 20, 2024
9dd3ef2
Merge remote-tracking branch 'origin/master' into nolan/class-fix
nolanlawson Dec 20, 2024
9309209
Merge remote-tracking branch 'origin/master' into nolan/class-fix
nolanlawson Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions ...__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/expected.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
1 change: 1 addition & 0 deletions ...res/attribute-class/with-scoped-styles-only-in-child/dynamic/modules/x/parent/parent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
3 changes: 3 additions & 0 deletions ...tures/attribute-class/with-scoped-styles-only-in-child/dynamic/modules/x/parent/parent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `"'<&`;
}
2 changes: 0 additions & 2 deletions packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
12 changes: 10 additions & 2 deletions packages/@lwc/ssr-compiler/src/compile-template/transformers/element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down