From 43e3d9b39d6cfa68929b8036a45d54b0fd337b6c Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 16 Apr 2024 14:52:13 -0700 Subject: [PATCH] test: minimal repro for #4155 --- .../test/swapping/styles/index.spec.js | 38 ++++++++++++++++++- .../light-global/tweedledee/tweedledee.css | 3 ++ .../light-global/tweedledee/tweedledee.html | 3 ++ .../light-global/tweedledee/tweedledee.js | 5 +++ .../light-global/tweedledum/tweedledum.css | 3 ++ .../light-global/tweedledum/tweedledum.html | 3 ++ .../light-global/tweedledum/tweedledum.js | 9 +++++ .../light-global/tweedledum/tweedledum2.css | 3 ++ .../styles/light/tweedledee/tweedledee.html | 3 ++ .../styles/light/tweedledee/tweedledee.js | 5 +++ .../light/tweedledee/tweedledee.scoped.css | 3 ++ .../styles/light/tweedledum/tweedledum.html | 3 ++ .../styles/light/tweedledum/tweedledum.js | 9 +++++ .../light/tweedledum/tweedledum.scoped.css | 3 ++ .../light/tweedledum/tweedledum2.scoped.css | 3 ++ .../styles/shadow/tweedledee/tweedledee.css | 3 ++ .../styles/shadow/tweedledee/tweedledee.html | 3 ++ .../styles/shadow/tweedledee/tweedledee.js | 3 ++ .../styles/shadow/tweedledum/tweedledum.css | 3 ++ .../styles/shadow/tweedledum/tweedledum.html | 3 ++ .../styles/shadow/tweedledum/tweedledum.js | 8 ++++ .../styles/shadow/tweedledum/tweedledum2.css | 3 ++ 22 files changed, 121 insertions(+), 1 deletion(-) create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.css create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.html create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.js create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.css create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.html create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.js create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum2.css create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.html create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.js create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.scoped.css create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.html create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.js create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.scoped.css create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum2.scoped.css create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.css create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.html create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.js create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.css create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.html create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.js create mode 100644 packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum2.css diff --git a/packages/@lwc/integration-karma/test/swapping/styles/index.spec.js b/packages/@lwc/integration-karma/test/swapping/styles/index.spec.js index d24916a3c4..86fd914792 100644 --- a/packages/@lwc/integration-karma/test/swapping/styles/index.spec.js +++ b/packages/@lwc/integration-karma/test/swapping/styles/index.spec.js @@ -2,10 +2,16 @@ import { createElement, swapStyle } from 'lwc'; import { extractDataIds } from 'test-utils'; import ShadowSimple from 'shadow/simple'; import ShadowStaleProp from 'shadow/staleProp'; +import ShadowTweedledum from 'shadow/tweedledum'; +import ShadowTweedledee from 'shadow/tweedledee'; import LightSimple from 'light/simple'; import LightStaleProp from 'light/staleProp'; +import LightTweedledum from 'light/tweedledum'; +import LightTweedledee from 'light/tweedledee'; import LightGlobalSimple from 'light-global/simple'; import LightGlobalStaleProp from 'light-global/staleProp'; +import LightGlobalTweedledum from 'light-global/tweedledum'; +import LightGlobalTweedledee from 'light-global/tweedledee'; function expectStyles(elm, styles) { const computed = getComputedStyle(elm); @@ -29,6 +35,8 @@ if (process.env.NODE_ENV !== 'production') { components: { Simple: ShadowSimple, StaleProp: ShadowStaleProp, + Tweedledee: ShadowTweedledee, + Tweedledum: ShadowTweedledum, }, }, { @@ -36,6 +44,8 @@ if (process.env.NODE_ENV !== 'production') { components: { Simple: LightSimple, StaleProp: LightStaleProp, + Tweedledee: LightTweedledee, + Tweedledum: LightTweedledum, }, }, { @@ -43,12 +53,14 @@ if (process.env.NODE_ENV !== 'production') { components: { Simple: LightGlobalSimple, StaleProp: LightGlobalStaleProp, + Tweedledee: LightGlobalTweedledee, + Tweedledum: LightGlobalTweedledum, }, }, ]; scenarios.forEach(({ testName, components }) => { describe(testName, () => { - const { Simple, StaleProp } = components; + const { Simple, StaleProp, Tweedledum, Tweedledee } = components; it('should work with components with implicit style definition', async () => { const { blockStyle, inlineStyle, noneStyle } = Simple; const elm = createElement(`${testName}-simple`, { is: Simple }); @@ -151,6 +163,30 @@ if (process.env.NODE_ENV !== 'production') { }); } }); + + it('should handle stylesheet collisions correctly', async () => { + const { stylesV1, stylesV2 } = Tweedledum; + const elm1 = createElement(`${testName}-tweedledum`, { is: Tweedledum }); + const elm2 = createElement(`${testName}-tweedledee`, { is: Tweedledee }); + document.body.appendChild(elm1); + document.body.appendChild(elm2); + + await Promise.resolve(); + for (const elm of [elm1, elm2]) { + expectStyles(extractDataIds(elm).paragraph, { + marginTop: '19px', + }); + } + swapStyle(stylesV1[0], stylesV2[0]); + + await Promise.resolve(); + expectStyles(extractDataIds(elm1).paragraph, { + marginTop: '37px', + }); + expectStyles(extractDataIds(elm2).paragraph, { + marginTop: '19px', + }); + }); }); }); }); diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.css b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.css new file mode 100644 index 0000000000..2bfa937404 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.css @@ -0,0 +1,3 @@ +p { + margin-top: 19px; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.html b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.html new file mode 100644 index 0000000000..e22c5a9163 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.html @@ -0,0 +1,3 @@ + diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.js b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.js new file mode 100644 index 0000000000..0679d2bc10 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.js @@ -0,0 +1,5 @@ +import { LightningElement } from 'lwc'; + +export default class extends LightningElement { + static renderMode = 'light'; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.css b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.css new file mode 100644 index 0000000000..2bfa937404 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.css @@ -0,0 +1,3 @@ +p { + margin-top: 19px; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.html b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.html new file mode 100644 index 0000000000..e36e2d5642 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.html @@ -0,0 +1,3 @@ + diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.js b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.js new file mode 100644 index 0000000000..de3dfc9017 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.js @@ -0,0 +1,9 @@ +import { LightningElement } from 'lwc'; +import stylesV1 from './tweedledum.css'; +import stylesV2 from './tweedledum2.css'; + +export default class extends LightningElement { + static renderMode = 'light'; + static stylesV1 = stylesV1; + static stylesV2 = stylesV2; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum2.css b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum2.css new file mode 100644 index 0000000000..daa7ce913c --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum2.css @@ -0,0 +1,3 @@ +p { + margin-top: 37px; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.html b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.html new file mode 100644 index 0000000000..e22c5a9163 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.html @@ -0,0 +1,3 @@ + diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.js b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.js new file mode 100644 index 0000000000..0679d2bc10 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.js @@ -0,0 +1,5 @@ +import { LightningElement } from 'lwc'; + +export default class extends LightningElement { + static renderMode = 'light'; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.scoped.css b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.scoped.css new file mode 100644 index 0000000000..2bfa937404 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.scoped.css @@ -0,0 +1,3 @@ +p { + margin-top: 19px; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.html b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.html new file mode 100644 index 0000000000..e36e2d5642 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.html @@ -0,0 +1,3 @@ + diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.js b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.js new file mode 100644 index 0000000000..9c59fdce14 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.js @@ -0,0 +1,9 @@ +import { LightningElement } from 'lwc'; +import stylesV1 from './tweedledum.scoped.css'; +import stylesV2 from './tweedledum2.scoped.css'; + +export default class extends LightningElement { + static renderMode = 'light'; + static stylesV1 = stylesV1; + static stylesV2 = stylesV2; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.scoped.css b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.scoped.css new file mode 100644 index 0000000000..2bfa937404 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.scoped.css @@ -0,0 +1,3 @@ +p { + margin-top: 19px; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum2.scoped.css b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum2.scoped.css new file mode 100644 index 0000000000..daa7ce913c --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum2.scoped.css @@ -0,0 +1,3 @@ +p { + margin-top: 37px; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.css b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.css new file mode 100644 index 0000000000..2bfa937404 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.css @@ -0,0 +1,3 @@ +p { + margin-top: 19px; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.html b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.html new file mode 100644 index 0000000000..8411a46590 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.html @@ -0,0 +1,3 @@ + diff --git a/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.js b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.js new file mode 100644 index 0000000000..ca8dce94e0 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.js @@ -0,0 +1,3 @@ +import { LightningElement } from 'lwc'; + +export default class extends LightningElement {} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.css b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.css new file mode 100644 index 0000000000..2bfa937404 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.css @@ -0,0 +1,3 @@ +p { + margin-top: 19px; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.html b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.html new file mode 100644 index 0000000000..44b44d6623 --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.html @@ -0,0 +1,3 @@ + diff --git a/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.js b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.js new file mode 100644 index 0000000000..d0c057c2ea --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.js @@ -0,0 +1,8 @@ +import { LightningElement } from 'lwc'; +import stylesV1 from './tweedledum.css'; +import stylesV2 from './tweedledum2.css'; + +export default class extends LightningElement { + static stylesV1 = stylesV1; + static stylesV2 = stylesV2; +} diff --git a/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum2.css b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum2.css new file mode 100644 index 0000000000..daa7ce913c --- /dev/null +++ b/packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum2.css @@ -0,0 +1,3 @@ +p { + margin-top: 37px; +}