test: minimal repro for salesforce#4155

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,26 +35,32 @@ if (process.env.NODE_ENV !== 'production') {
                 components: {
                     Simple: ShadowSimple,
                     StaleProp: ShadowStaleProp,
+                    Tweedledee: ShadowTweedledee,
+                    Tweedledum: ShadowTweedledum,
                 },
             },
             {
                 testName: 'light',
                 components: {
                     Simple: LightSimple,
                     StaleProp: LightStaleProp,
+                    Tweedledee: LightTweedledee,
+                    Tweedledum: LightTweedledum,
                 },
             },
             {
                 testName: 'light-global',
                 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',
+                    });
+                });
             });
         });
     });

packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.css

@@ -0,0 +1,3 @@
+p {
+    margin-top: 19px;
+}

packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledee/tweedledee.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    <p data-id="paragraph">tweedledee</p>
+</template>

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';
+}

packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.css

@@ -0,0 +1,3 @@
+p {
+    margin-top: 19px;
+}

packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    <p data-id="paragraph">tweedledum</p>
+</template>

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;
+}

packages/@lwc/integration-karma/test/swapping/styles/light-global/tweedledum/tweedledum2.css

@@ -0,0 +1,3 @@
+p {
+    margin-top: 37px;
+}

packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    <p data-id="paragraph">tweedledee</p>
+</template>

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';
+}

packages/@lwc/integration-karma/test/swapping/styles/light/tweedledee/tweedledee.scoped.css

@@ -0,0 +1,3 @@
+p {
+    margin-top: 19px;
+}

packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    <p data-id="paragraph">tweedledum</p>
+</template>

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;
+}

packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum.scoped.css

@@ -0,0 +1,3 @@
+p {
+    margin-top: 19px;
+}

packages/@lwc/integration-karma/test/swapping/styles/light/tweedledum/tweedledum2.scoped.css

@@ -0,0 +1,3 @@
+p {
+    margin-top: 37px;
+}

packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.css

@@ -0,0 +1,3 @@
+p {
+    margin-top: 19px;
+}

packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.html

@@ -0,0 +1,3 @@
+<template>
+    <p data-id="paragraph">tweedledee</p>
+</template>

packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledee/tweedledee.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}

packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.css

@@ -0,0 +1,3 @@
+p {
+    margin-top: 19px;
+}

packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum.html

@@ -0,0 +1,3 @@
+<template>
+    <p data-id="paragraph">tweedledum</p>
+</template>

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;
+}

packages/@lwc/integration-karma/test/swapping/styles/shadow/tweedledum/tweedledum2.css

@@ -0,0 +1,3 @@
+p {
+    margin-top: 37px;
+}