improve e2e tests

src/compiler/transformers/add-static-style.ts

@@ -138,7 +138,29 @@ export const createStyleIdentifier = (cmp: d.ComponentCompilerMeta, style: d.Sty
   /**
    * remove duplicates in `styleUrl`
    */
-  const externalStyles = Array.from(new Set(style.externalStyles.map((s) => s.absolutePath)));
+  const externalStyles = style.externalStyles.map((s) => s.absolutePath)
+    /**
+     * Reverse order and reduce to remove duplicates. This will make sure that duplicate
+     * styles applied to the same component will be applied in the order they are
+     * defined in the component, e.g.
+     * ```
+     * @Component({
+     *  styleUrls: ['cmp-a.css', 'cmp-b.css', 'cmp-a.css']
+     * })
+     * ```
+     * will be applied in the order `cmp-b.css`, `cmp-a.css`.
+     */
+    .reverse()
+    .reduce((extStyles, styleUrl) => {
+      if (!extStyles.includes(styleUrl)) {
+        extStyles.push(styleUrl);
+      }
+      return extStyles;
+    }, [])
+    /**
+     * Reverse back to the original order
+     */
+    .reverse();
   /**
    * Set a styleIdentifier which will be propagated to to the component and
    * later picked up by rollup when it injects the parsed CSS directly into
@@ -149,6 +171,7 @@ export const createStyleIdentifier = (cmp: d.ComponentCompilerMeta, style: d.Sty
   if (style.modeName !== DEFAULT_STYLE_MODE) {
     style.styleIdentifier += dashToPascalCase(style.modeName);
   }
+  style.styleIdentifier += 'Style';
   return createStyleIdentifierFromUrl(style.styleId, externalStyles);
 };
 

test/karma/test-app/style-plugin/bar.scss

@@ -1,3 +1,13 @@
-.bar {
-  display: none;
+:host {
+  display: block;
+  font-style: italic;
+}
+
+h1 {
+  color: blue;
+}
+
+p {
+  // change
+  color: blue;
 }

test/karma/test-app/style-plugin/foo.scss

@@ -1,3 +1,11 @@
-.foo {
-  display: none;
+:host {
+  display: block;
+}
+
+h1 {
+  color: red;
+}
+
+p {
+  color: red;
 }

test/karma/test-app/style-plugin/karma.spec.ts

@@ -40,8 +40,13 @@ describe('style-plugin', function () {
   });
 
   it('multiple-styles-cmp', async () => {
-    const multipleStylesHost = app.querySelector('multiple-styles-cmp');
-    const { width, height } = multipleStylesHost.getBoundingClientRect();
-    expect({ width, height }).toEqual({ width: 0, height: 0 });
+    const h1 = getComputedStyle(app.querySelector('multiple-styles-cmp').shadowRoot.querySelector('h1'));
+    const div = getComputedStyle(app.querySelector('multiple-styles-cmp').shadowRoot.querySelector('div'));
+    // color is red because foo.scss is mentioned last and overwrites bar.scss
+    expect(h1.color).toEqual('rgb(255, 0, 0)');
+    expect(div.color).toEqual('rgb(255, 0, 0)');
+    // ensure styles defined in bar.scss are applied too
+    expect(h1.fontStyle).toEqual('italic');
+    expect(div.fontStyle).toEqual('italic');
   });
 });

test/karma/test-app/style-plugin/multiple-styles.tsx

@@ -1,17 +1,21 @@
-import { Component, h, Host } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'multiple-styles-cmp',
-  styleUrls: ['foo.scss', 'bar.scss'],
+  /**
+   * styles are intentionally duplicated to ensure that `foo.scss` can overwrite
+   * `bar.scss` since it is set last in the `styleUrls` array.
+   */
+  styleUrls: ['foo.scss', 'bar.scss', 'foo.scss'],
   shadow: true,
 })
 export class SassCmp {
   render() {
     return (
-      <Host>
-        <div class="foo">Foo</div>
-        <div class="bar">bar</div>
-      </Host>
+      <main>
+        <h1>Hello World</h1>
+        <p>What's your name?</p>
+      </main>
     );
   }
 }