Skip to content

Commit 5989bf0

Browse files
divmainjhefferman-sfdcwjhsf
authored
feat: style deduplication (#5264)
* chore: reintroduce locker logic * Update packages/@lwc/integration-karma/test/component/LightningElement/index.spec.js Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com> * feat: added style dedup in ssr (not working yet) * fix: reference to runtime context on emit fn * chore: rename CompilationContext to RuntimeContext (it was wrong before) * chore: update SSR fixtures with dedupe keys * feat: accept prefix for style dedupe identifiers * feat: create @lwc/ssr-client-utils package with pre-hydration dedupe mechanism * chore: add big TODO comment * feat(lwc-style): add register util TODO: make it actually get bundled * feat(lwc-style): replace dummies with dumber dummies * test: the SSRv1 fixture tests against SSRv2 fixtures * chore: fix tests and test config * chore: get all SSRv1 tests to pass with new lwc-style stuff * chore: comments * chore: more comments * refactor: make it possible to disable style dedupe in SSRv2 * chore: provide `@lwc/ssr-client-utils/register` import * chore: add comment about bare import Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com> * chore: use FIXME instead of "Followup needed" Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com> * refactor: destructure for better readability * chore: add TODO * refactor: make createMistmatchError generic Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com> * chore: add comment explaining regexp Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com> * chore: fix imprecision in code comment Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com> * chore: add comment explaining why we need repeated exec on regexp * chore: indentation is 0 when falsey instead of null * chore: address nit Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com> * chore: remove console.log Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com> * chore: add comment * chore: bump CI * chore: add skip file for flakey test --------- Co-authored-by: John Hefferman <jhefferman@salesforce.com> Co-authored-by: jhefferman-sfdc <83669775+jhefferman-sfdc@users.noreply.github.com> Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com> Co-authored-by: Will Harney <wharney@salesforce.com>
1 parent 73066cc commit 5989bf0

File tree

59 files changed

+851
-266
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+851
-266
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
"*.{css,js,json,md,mjs,ts,yaml,yml}": "prettier --write",
8080
"{packages/**/package.json,scripts/tasks/check-and-rewrite-package-json.js}": "node ./scripts/tasks/check-and-rewrite-package-json.js",
8181
"{LICENSE-CORE.md,**/LICENSE.md,yarn.lock,scripts/tasks/generate-license-files.js,scripts/shared/bundled-dependencies.js}": "node ./scripts/tasks/generate-license-files.js",
82-
"*.{only,skip}": "eslint --cache --no-eslintrc --plugin '@lwc/eslint-plugin-lwc-internal' --rule '@lwc/lwc-internal/forbidden-filename: error'"
82+
"*.{only,skip}": "eslint --cache --plugin '@lwc/eslint-plugin-lwc-internal' --rule '@lwc/lwc-internal/forbidden-filename: error'"
8383
},
8484
"workspaces": [
8585
"packages/@lwc/*",

‎packages/@lwc/engine-core/src/framework/hydration.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,12 @@ function hydrateElement(elm: Node, vnode: VElement, renderer: RendererAPI): Node
368368

369369
patchElementPropsAndAttrsAndRefs(vnode, renderer);
370370

371-
if (!isDomManual) {
371+
// When <lwc-style> tags are initially encountered at the time of HTML parse, the <lwc-style> tag is
372+
// replaced with an empty <style> tag. Additionally, the styles are attached to the shadow root as a
373+
// constructed stylesheet at the same time. So, the shadow will be styled correctly and the only
374+
// difference between what's in the DOM and what's in the VDOM is the string content inside the
375+
// <style> tag. We can simply ignore that during hyration.
376+
if (!isDomManual && vnode.elm.tagName !== 'STYLE') {
372377
const { getFirstChild } = renderer;
373378
hydrateChildren(getFirstChild(elm), vnode.children, elm, owner, false);
374379
}

‎packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ function testFixtures(options?: RollupLwcOptions) {
102102
testFixtureDir<FixtureConfig>(
103103
{
104104
root: path.resolve(__dirname, 'fixtures'),
105+
ssrVersion: 1,
105106
pattern: '**/config.json',
106107
},
107108
async ({ dirname, config }) => {

‎packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/dynamic/expected.html

Lines changed: 37 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
<template shadowrootmode="open">
33
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
44
<template shadowrootmode="open">
5-
<style class="lwc-5h3d35cke7v" type="text/css">
5+
<style class="lwc-5h3d35cke7v" id="lwc-style--0" type="text/css">
66
:host {background: blue;}
77
</style>
8+
<lwc-style style-id="lwc-style--0">
9+
</lwc-style>
810
<div class="lwc-5h3d35cke7v">
911
</div>
1012
<x-grandchild class="lwc-5h3d35cke7v">
@@ -15,9 +17,8 @@
1517
</x-child>
1618
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
1719
<template shadowrootmode="open">
18-
<style class="lwc-5h3d35cke7v" type="text/css">
19-
:host {background: blue;}
20-
</style>
20+
<lwc-style style-id="lwc-style--0">
21+
</lwc-style>
2122
<div class="lwc-5h3d35cke7v">
2223
</div>
2324
<x-grandchild class="lwc-5h3d35cke7v">
@@ -28,9 +29,8 @@
2829
</x-child>
2930
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
3031
<template shadowrootmode="open">
31-
<style class="lwc-5h3d35cke7v" type="text/css">
32-
:host {background: blue;}
33-
</style>
32+
<lwc-style style-id="lwc-style--0">
33+
</lwc-style>
3434
<div class="lwc-5h3d35cke7v">
3535
</div>
3636
<x-grandchild class="lwc-5h3d35cke7v">
@@ -41,9 +41,8 @@
4141
</x-child>
4242
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
4343
<template shadowrootmode="open">
44-
<style class="lwc-5h3d35cke7v" type="text/css">
45-
:host {background: blue;}
46-
</style>
44+
<lwc-style style-id="lwc-style--0">
45+
</lwc-style>
4746
<div class="lwc-5h3d35cke7v">
4847
</div>
4948
<x-grandchild class="lwc-5h3d35cke7v">
@@ -54,9 +53,8 @@
5453
</x-child>
5554
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
5655
<template shadowrootmode="open">
57-
<style class="lwc-5h3d35cke7v" type="text/css">
58-
:host {background: blue;}
59-
</style>
56+
<lwc-style style-id="lwc-style--0">
57+
</lwc-style>
6058
<div class="lwc-5h3d35cke7v">
6159
</div>
6260
<x-grandchild class="lwc-5h3d35cke7v">
@@ -67,9 +65,8 @@
6765
</x-child>
6866
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
6967
<template shadowrootmode="open">
70-
<style class="lwc-5h3d35cke7v" type="text/css">
71-
:host {background: blue;}
72-
</style>
68+
<lwc-style style-id="lwc-style--0">
69+
</lwc-style>
7370
<div class="lwc-5h3d35cke7v">
7471
</div>
7572
<x-grandchild class="lwc-5h3d35cke7v">
@@ -80,9 +77,8 @@
8077
</x-child>
8178
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
8279
<template shadowrootmode="open">
83-
<style class="lwc-5h3d35cke7v" type="text/css">
84-
:host {background: blue;}
85-
</style>
80+
<lwc-style style-id="lwc-style--0">
81+
</lwc-style>
8682
<div class="lwc-5h3d35cke7v">
8783
</div>
8884
<x-grandchild class="lwc-5h3d35cke7v">
@@ -93,9 +89,8 @@
9389
</x-child>
9490
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
9591
<template shadowrootmode="open">
96-
<style class="lwc-5h3d35cke7v" type="text/css">
97-
:host {background: blue;}
98-
</style>
92+
<lwc-style style-id="lwc-style--0">
93+
</lwc-style>
9994
<div class="lwc-5h3d35cke7v">
10095
</div>
10196
<x-grandchild class="lwc-5h3d35cke7v">
@@ -106,9 +101,8 @@
106101
</x-child>
107102
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
108103
<template shadowrootmode="open">
109-
<style class="lwc-5h3d35cke7v" type="text/css">
110-
:host {background: blue;}
111-
</style>
104+
<lwc-style style-id="lwc-style--0">
105+
</lwc-style>
112106
<div class="lwc-5h3d35cke7v">
113107
</div>
114108
<x-grandchild class="lwc-5h3d35cke7v">
@@ -119,9 +113,8 @@
119113
</x-child>
120114
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
121115
<template shadowrootmode="open">
122-
<style class="lwc-5h3d35cke7v" type="text/css">
123-
:host {background: blue;}
124-
</style>
116+
<lwc-style style-id="lwc-style--0">
117+
</lwc-style>
125118
<div class="lwc-5h3d35cke7v">
126119
</div>
127120
<x-grandchild class="lwc-5h3d35cke7v">
@@ -132,9 +125,8 @@
132125
</x-child>
133126
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
134127
<template shadowrootmode="open">
135-
<style class="lwc-5h3d35cke7v" type="text/css">
136-
:host {background: blue;}
137-
</style>
128+
<lwc-style style-id="lwc-style--0">
129+
</lwc-style>
138130
<div class="bar foo lwc-5h3d35cke7v">
139131
</div>
140132
<x-grandchild class="bar foo lwc-5h3d35cke7v">
@@ -145,9 +137,8 @@
145137
</x-child>
146138
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
147139
<template shadowrootmode="open">
148-
<style class="lwc-5h3d35cke7v" type="text/css">
149-
:host {background: blue;}
150-
</style>
140+
<lwc-style style-id="lwc-style--0">
141+
</lwc-style>
151142
<div class="baz foo lwc-5h3d35cke7v">
152143
</div>
153144
<x-grandchild class="baz foo lwc-5h3d35cke7v">
@@ -158,9 +149,8 @@
158149
</x-child>
159150
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
160151
<template shadowrootmode="open">
161-
<style class="lwc-5h3d35cke7v" type="text/css">
162-
:host {background: blue;}
163-
</style>
152+
<lwc-style style-id="lwc-style--0">
153+
</lwc-style>
164154
<div class="bar foo lwc-5h3d35cke7v">
165155
</div>
166156
<x-grandchild class="bar foo lwc-5h3d35cke7v">
@@ -171,9 +161,8 @@
171161
</x-child>
172162
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
173163
<template shadowrootmode="open">
174-
<style class="lwc-5h3d35cke7v" type="text/css">
175-
:host {background: blue;}
176-
</style>
164+
<lwc-style style-id="lwc-style--0">
165+
</lwc-style>
177166
<div class="bar foo lwc-5h3d35cke7v">
178167
</div>
179168
<x-grandchild class="bar foo lwc-5h3d35cke7v">
@@ -184,9 +173,8 @@
184173
</x-child>
185174
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
186175
<template shadowrootmode="open">
187-
<style class="lwc-5h3d35cke7v" type="text/css">
188-
:host {background: blue;}
189-
</style>
176+
<lwc-style style-id="lwc-style--0">
177+
</lwc-style>
190178
<div class="BaR FOO lwc-5h3d35cke7v">
191179
</div>
192180
<x-grandchild class="BaR FOO lwc-5h3d35cke7v">
@@ -197,9 +185,8 @@
197185
</x-child>
198186
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
199187
<template shadowrootmode="open">
200-
<style class="lwc-5h3d35cke7v" type="text/css">
201-
:host {background: blue;}
202-
</style>
188+
<lwc-style style-id="lwc-style--0">
189+
</lwc-style>
203190
<div class="foo lwc-5h3d35cke7v">
204191
</div>
205192
<x-grandchild class="foo lwc-5h3d35cke7v">
@@ -210,9 +197,8 @@
210197
</x-child>
211198
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
212199
<template shadowrootmode="open">
213-
<style class="lwc-5h3d35cke7v" type="text/css">
214-
:host {background: blue;}
215-
</style>
200+
<lwc-style style-id="lwc-style--0">
201+
</lwc-style>
216202
<div class="foo lwc-5h3d35cke7v">
217203
</div>
218204
<x-grandchild class="foo lwc-5h3d35cke7v">
@@ -223,9 +209,8 @@
223209
</x-child>
224210
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
225211
<template shadowrootmode="open">
226-
<style class="lwc-5h3d35cke7v" type="text/css">
227-
:host {background: blue;}
228-
</style>
212+
<lwc-style style-id="lwc-style--0">
213+
</lwc-style>
229214
<div class="&quot;'<&amp; lwc-5h3d35cke7v">
230215
</div>
231216
<x-grandchild class="&quot;'<&amp; lwc-5h3d35cke7v">

‎packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-child/static/expected.html

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,90 +2,83 @@
22
<template shadowrootmode="open">
33
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
44
<template shadowrootmode="open">
5-
<style class="lwc-5h3d35cke7v" type="text/css">
5+
<style class="lwc-5h3d35cke7v" id="lwc-style--0" type="text/css">
66
:host {background: blue;}
77
</style>
8+
<lwc-style style-id="lwc-style--0">
9+
</lwc-style>
810
<div class="lwc-5h3d35cke7v">
911
</div>
1012
</template>
1113
</x-child>
1214
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
1315
<template shadowrootmode="open">
14-
<style class="lwc-5h3d35cke7v" type="text/css">
15-
:host {background: blue;}
16-
</style>
16+
<lwc-style style-id="lwc-style--0">
17+
</lwc-style>
1718
<div class="lwc-5h3d35cke7v">
1819
</div>
1920
</template>
2021
</x-child>
2122
<x-child class="lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
2223
<template shadowrootmode="open">
23-
<style class="lwc-5h3d35cke7v" type="text/css">
24-
:host {background: blue;}
25-
</style>
24+
<lwc-style style-id="lwc-style--0">
25+
</lwc-style>
2626
<div class="lwc-5h3d35cke7v">
2727
</div>
2828
</template>
2929
</x-child>
3030
<x-child class="foo lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
3131
<template shadowrootmode="open">
32-
<style class="lwc-5h3d35cke7v" type="text/css">
33-
:host {background: blue;}
34-
</style>
32+
<lwc-style style-id="lwc-style--0">
33+
</lwc-style>
3534
<div class="lwc-5h3d35cke7v">
3635
</div>
3736
</template>
3837
</x-child>
3938
<x-child class="foo lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
4039
<template shadowrootmode="open">
41-
<style class="lwc-5h3d35cke7v" type="text/css">
42-
:host {background: blue;}
43-
</style>
40+
<lwc-style style-id="lwc-style--0">
41+
</lwc-style>
4442
<div class="lwc-5h3d35cke7v">
4543
</div>
4644
</template>
4745
</x-child>
4846
<x-child class="bar foo lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
4947
<template shadowrootmode="open">
50-
<style class="lwc-5h3d35cke7v" type="text/css">
51-
:host {background: blue;}
52-
</style>
48+
<lwc-style style-id="lwc-style--0">
49+
</lwc-style>
5350
<div class="lwc-5h3d35cke7v">
5451
</div>
5552
</template>
5653
</x-child>
5754
<x-child class="bar foo lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
5855
<template shadowrootmode="open">
59-
<style class="lwc-5h3d35cke7v" type="text/css">
60-
:host {background: blue;}
61-
</style>
56+
<lwc-style style-id="lwc-style--0">
57+
</lwc-style>
6258
<div class="lwc-5h3d35cke7v">
6359
</div>
6460
</template>
6561
</x-child>
6662
<x-child class="BAR BaZ FoA lwc-5h3d35cke7v-host" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
6763
<template shadowrootmode="open">
68-
<style class="lwc-5h3d35cke7v" type="text/css">
69-
:host {background: blue;}
70-
</style>
64+
<lwc-style style-id="lwc-style--0">
65+
</lwc-style>
7166
<div class="lwc-5h3d35cke7v">
7267
</div>
7368
</template>
7469
</x-child>
7570
<x-child class="lwc-5h3d35cke7v-host tabs" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
7671
<template shadowrootmode="open">
77-
<style class="lwc-5h3d35cke7v" type="text/css">
78-
:host {background: blue;}
79-
</style>
72+
<lwc-style style-id="lwc-style--0">
73+
</lwc-style>
8074
<div class="lwc-5h3d35cke7v">
8175
</div>
8276
</template>
8377
</x-child>
8478
<x-child class="lwc-5h3d35cke7v-host newlines" data-lwc-host-scope-token="lwc-5h3d35cke7v-host">
8579
<template shadowrootmode="open">
86-
<style class="lwc-5h3d35cke7v" type="text/css">
87-
:host {background: blue;}
88-
</style>
80+
<lwc-style style-id="lwc-style--0">
81+
</lwc-style>
8982
<div class="lwc-5h3d35cke7v">
9083
</div>
9184
</template>

‎packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-parent/dynamic/expected.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<fixture-test class="lwc-ts1rr7v761-host" data-lwc-host-scope-token="lwc-ts1rr7v761-host">
22
<template shadowrootmode="open">
3-
<style class="lwc-ts1rr7v761" type="text/css">
3+
<style class="lwc-ts1rr7v761" id="lwc-style--0" type="text/css">
44
:host {background: green;}
55
</style>
6+
<lwc-style style-id="lwc-style--0">
7+
</lwc-style>
68
<x-child class="lwc-ts1rr7v761">
79
<template shadowrootmode="open">
810
<div>

‎packages/@lwc/engine-server/src/__tests__/fixtures/attribute-class/with-scoped-styles-only-in-parent/static/expected.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<fixture-test class="lwc-ts1rr7v761-host" data-lwc-host-scope-token="lwc-ts1rr7v761-host">
22
<template shadowrootmode="open">
3-
<style class="lwc-ts1rr7v761" type="text/css">
3+
<style class="lwc-ts1rr7v761" id="lwc-style--0" type="text/css">
44
:host {background: green;}
55
</style>
6+
<lwc-style style-id="lwc-style--0">
7+
</lwc-style>
68
<x-child class="lwc-ts1rr7v761">
79
<template shadowrootmode="open">
810
<div>

0 commit comments

Comments
 (0)