Skip to content

Commit

Permalink
fix(ssr): fix rendering of class attribute (#4805)
Browse files Browse the repository at this point in the history 
Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>
  • Loading branch information
@nolanlawson @wjhsf
nolanlawson and wjhsf authored Nov 12, 2024
1 parent 5bf5d91 commit bf231db
Show file tree
Hide file tree
Showing 44 changed files with 981 additions and 80 deletions.
Empty file added ...src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/error.txt
View file
Empty file.
225 changes: 225 additions & 0 deletions ...__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/expected.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<x-parent>
<template shadowrootmode="open">
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="lwc-5h3d35cke7v">
</div>
<x-grandchild class="lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="lwc-5h3d35cke7v">
</div>
<x-grandchild class="lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="lwc-5h3d35cke7v">
</div>
<x-grandchild class="lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="lwc-5h3d35cke7v">
</div>
<x-grandchild class="lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="lwc-5h3d35cke7v">
</div>
<x-grandchild class="lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="lwc-5h3d35cke7v">
</div>
<x-grandchild class="lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="lwc-5h3d35cke7v">
</div>
<x-grandchild class="lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="lwc-5h3d35cke7v">
</div>
<x-grandchild class="lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="lwc-5h3d35cke7v">
</div>
<x-grandchild class="lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="lwc-5h3d35cke7v">
</div>
<x-grandchild class="lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="bar foo lwc-5h3d35cke7v">
</div>
<x-grandchild class="bar foo lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="baz foo lwc-5h3d35cke7v">
</div>
<x-grandchild class="baz foo lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="bar foo lwc-5h3d35cke7v">
</div>
<x-grandchild class="bar foo lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="bar foo lwc-5h3d35cke7v">
</div>
<x-grandchild class="bar foo lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="BaR FOO lwc-5h3d35cke7v">
</div>
<x-grandchild class="BaR FOO lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="foo lwc-5h3d35cke7v">
</div>
<x-grandchild class="foo lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
<x-child class="lwc-5h3d35cke7v-host">
<template shadowrootmode="open">
<style class="lwc-5h3d35cke7v" type="text/css">
:host {background: blue;}
</style>
<div class="foo lwc-5h3d35cke7v">
</div>
<x-grandchild class="foo lwc-5h3d35cke7v">
<template shadowrootmode="open">
</template>
</x-grandchild>
</template>
</x-child>
</template>
</x-parent>
3 changes: 3 additions & 0 deletions .../src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const tagName = 'x-parent';
export { default } from 'x/parent';
export * from 'x/parent';
8 changes: 8 additions & 0 deletions ...tures/attribute-class/with-scoped-styles-only-in-child/dynamic/modules/x/child/child.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<template>
<div
class={dynamic}
></div>
<x-grandchild
class={dynamic}
></x-grandchild>
</template>
5 changes: 5 additions & 0 deletions ...ixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/modules/x/child/child.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { LightningElement, api } from 'lwc';

export default class extends LightningElement {
@api dynamic
}
3 changes: 3 additions & 0 deletions ...attribute-class/with-scoped-styles-only-in-child/dynamic/modules/x/child/child.scoped.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
:host {
background: blue;
}
1 change: 1 addition & 0 deletions ...ibute-class/with-scoped-styles-only-in-child/dynamic/modules/x/grandchild/grandchild.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<template></template>
4 changes: 4 additions & 0 deletions ...tribute-class/with-scoped-styles-only-in-child/dynamic/modules/x/grandchild/grandchild.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { LightningElement } from 'lwc';

export default class extends LightningElement {
}
19 changes: 19 additions & 0 deletions ...res/attribute-class/with-scoped-styles-only-in-child/dynamic/modules/x/parent/parent.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template>
<x-child dynamic={isUndefined}></x-child>
<x-child dynamic={isNull}></x-child>
<x-child dynamic={isFalse}></x-child>
<x-child dynamic={isTrue}></x-child>
<x-child dynamic={isZero}></x-child>
<x-child dynamic={isNegZero}></x-child>
<x-child dynamic={isNaN}></x-child>
<x-child dynamic={isInfinity}></x-child>
<x-child dynamic={isNegInfinity}></x-child>
<x-child dynamic={isEmptyString}></x-child>
<x-child dynamic={isArray}></x-child>
<x-child dynamic={isObject}></x-child>
<x-child dynamic={isTwoClasses}></x-child>
<x-child dynamic={isTwoClassesWithSpaces}></x-child>
<x-child dynamic={isUppercase}></x-child>
<x-child dynamic={isTabs}></x-child>
<x-child dynamic={isNewlines}></x-child>
</template>
24 changes: 24 additions & 0 deletions ...tures/attribute-class/with-scoped-styles-only-in-child/dynamic/modules/x/parent/parent.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { LightningElement } from 'lwc';

export default class extends LightningElement {
isUndefined = undefined;
isNull = null;
isFalse = false;
isTrue = true;
isZero = 0;
isNegZero = -0;
isNaN = NaN;
isInfinity = Infinity;
isNegInfinity = -Infinity;
isEmptyString = "";
isArray = ["foo", "bar"];
isObject = {
foo: "bar",
baz: "quux"
};
isTwoClasses = 'foo bar'
isTwoClassesWithSpaces = ' foo bar '
isUppercase = 'FOO BaR'
isTabs = '\tfoo\t'
isNewlines = '\nfoo\n'
}
Empty file added .../src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/static/error.txt
View file
Empty file.
Loading

0 comments on commit bf231db

Please sign in to comment.