fix: deduplicate tag-scoped media rules (#9301)

Author: vursen

packages/vaadin-themable-mixin/src/css-rules.js

@@ -5,6 +5,7 @@
  */
 
 // Based on https://github.com/jouni/j-elements/blob/main/test/old-components/Stylable.js
+const mediaRulesCache = new WeakMap();
 
 /**
  * Check if the media query is a non-standard "tag scoped selector".
@@ -21,47 +22,85 @@ function isTagScopedMedia(media) {
 }
 
 /**
- * Check if the media query string matches the given tag name.
- *
- * @param {string} media
- * @param {string} tagName
- * @return {boolean}
- */
-function matchesTagScopedMedia(media, tagName) {
-  return media === tagName;
-}
-
-/**
- * Recursively processes a style sheet for matching "tag scoped" rules.
+ * Recursively processes a style sheet for media rules that match
+ * the specified predicate.
  *
  * @param {CSSStyleSheet} styleSheet
- * @param {string} tagName
+ * @param {(rule: CSSRule) => boolean} predicate
+ * @return {Array<CSSMediaRule | CSSImportRule>}
  */
-function extractStyleSheetTagScopedCSSRules(styleSheet, tagName) {
-  const matchingRules = [];
+function extractMediaRulesFromStyleSheet(styleSheet, predicate) {
+  const result = [];
 
   for (const rule of styleSheet.cssRules) {
     const ruleType = rule.constructor.name;
 
     if (ruleType === 'CSSImportRule') {
-      if (!isTagScopedMedia(rule.media.mediaText)) {
-        matchingRules.push(...extractStyleSheetTagScopedCSSRules(rule.styleSheet, tagName));
-        continue;
-      }
-
-      if (matchesTagScopedMedia(rule.media.mediaText, tagName)) {
-        matchingRules.push(...rule.styleSheet.cssRules);
+      if (predicate(rule)) {
+        result.push(rule);
+      } else {
+        result.push(...extractMediaRulesFromStyleSheet(rule.styleSheet, predicate));
       }
     }
 
     if (ruleType === 'CSSMediaRule') {
-      if (matchesTagScopedMedia(rule.media.mediaText, tagName)) {
-        matchingRules.push(...rule.cssRules);
+      if (predicate(rule)) {
+        result.push(rule);
       }
     }
   }
 
-  return matchingRules;
+  return result;
+}
+
+/**
+ * Deduplicates media rules by their CSS text, keeping the last occurrence.
+ *
+ * @param {Array<CSSMediaRule | CSSImportRule>} rules
+ * @return {Array<CSSMediaRule | CSSImportRule>}
+ */
+function deduplicateMediaRules(rules) {
+  const seen = new Set();
+  return rules.reduceRight((deduped, rule) => {
+    const key = rule.styleSheet?.cssText ?? rule.cssText;
+    if (!seen.has(key)) {
+      seen.add(key);
+      deduped.unshift(rule);
+    }
+    return deduped;
+  }, []);
+}
+
+/**
+ * Extracts all CSS rules from a style sheet that are contained in media queries
+ * with a "tag scoped selector" matching the specified tag name.
+ *
+ * This function caches the results for each style sheet to avoid
+ * reprocessing the same style sheet multiple times.
+ *
+ * @param {CSSStyleSheet} styleSheet
+ * @param {string} tagName
+ * @return {CSSRule[]}
+ */
+function extractTagScopedCSSRulesFromStyleSheet(styleSheet, tagName) {
+  let mediaRules = mediaRulesCache.get(styleSheet);
+  if (!mediaRules) {
+    // Collect all media rules that look like "tag scoped selectors", e.g. "@media vaadin-text-field { ... }"
+    mediaRules = extractMediaRulesFromStyleSheet(styleSheet, (rule) => isTagScopedMedia(rule.media.mediaText));
+
+    // Remove duplicate media rules which may result from multiple imports of the same stylesheet
+    mediaRules = deduplicateMediaRules(mediaRules);
+
+    // Group rules by tag name specified in the media query
+    mediaRules = Map.groupBy(mediaRules, (rule) => rule.media.mediaText);
+
+    // Save the processed media rules in the cache
+    mediaRulesCache.set(styleSheet, mediaRules);
+  }
+
+  return (mediaRules.get(tagName) ?? []).flatMap((mediaRule) =>
+    Array.from(mediaRule.styleSheet?.cssRules ?? mediaRule.cssRules),
+  );
 }
 
 /**
@@ -81,10 +120,10 @@ function extractStyleSheetTagScopedCSSRules(styleSheet, tagName) {
  * @return {CSSRule[]}
  */
 export function extractTagScopedCSSRules(root, tagName) {
-  const styleSheets = new Set([...root.styleSheets]);
-  const adoptedStyleSheets = new Set([...root.adoptedStyleSheets]);
+  const styleSheets = new Set(root.styleSheets);
+  const adoptedStyleSheets = new Set(root.adoptedStyleSheets);
 
   return [...styleSheets.union(adoptedStyleSheets)].flatMap((styleSheet) => {
-    return extractStyleSheetTagScopedCSSRules(styleSheet, tagName);
+    return extractTagScopedCSSRulesFromStyleSheet(styleSheet, tagName);
   });
 }

packages/vaadin-themable-mixin/test/css-rules-extraction-test-button.css renamed to packages/vaadin-themable-mixin/test/css-rules-extraction-test-button-black.css

@@ -0,0 +1,3 @@
+:host {
+  color: red;
+}

packages/vaadin-themable-mixin/test/css-rules-extraction-test-button-red.css

@@ -1,4 +1,6 @@
-@import './css-rules-extraction-test-button.css' test-button;
+@import './css-rules-extraction-test-button-black.css' test-button;
+@import './css-rules-extraction-test-button-red.css' test-button;
+@import './css-rules-extraction-test-button-black.css' test-button;
 @import './css-rules-extraction-test-text-field.css' test-text-field;
 
 @media test-text-field {

packages/vaadin-themable-mixin/test/css-rules-extraction-test-shared.css

@@ -5,7 +5,7 @@ import { extractTagScopedCSSRules } from '../src/css-rules.js';
 const BASE_PATH = import.meta.url.split('/').slice(0, -1).join('/');
 
 describe('CSS rules extraction', () => {
-  it('should extract rules from tag-scoped @media', () => {
+  it('should extract and deduplicate rules from tag-scoped @media', () => {
     fixtureSync(`
       <style>
         @media test-button {
@@ -14,6 +14,18 @@ describe('CSS rules extraction', () => {
           }
         }
 
+        @media test-button {
+          :host {
+            color: red;
+          }
+        }
+
+        @media test-button {
+          :host {
+            color: black;
+          }
+        }
+
         @media test-text-field {
           #label {
             color: black;
@@ -35,8 +47,9 @@ describe('CSS rules extraction', () => {
 
     {
       const rules = extractTagScopedCSSRules(document, 'test-button');
-      expect(rules).to.have.lengthOf(1);
-      expect(rules[0].cssText).to.equal(':host { color: black; }');
+      expect(rules).to.have.lengthOf(2);
+      expect(rules[0].cssText).to.equal(':host { color: red; }');
+      expect(rules[1].cssText).to.equal(':host { color: black; }');
     }
     {
       const rules = extractTagScopedCSSRules(document, 'test-text-field');
@@ -47,19 +60,22 @@ describe('CSS rules extraction', () => {
     }
   });
 
-  it('should extract rules from tag-scoped @import', async () => {
+  it('should extract and deduplicate rules from tag-scoped @import', async () => {
     const style = fixtureSync(`
       <style>
-        @import '${BASE_PATH}/css-rules-extraction-test-button.css' test-button;
+        @import '${BASE_PATH}/css-rules-extraction-test-button-black.css' test-button;
+        @import '${BASE_PATH}/css-rules-extraction-test-button-red.css' test-button;
+        @import '${BASE_PATH}/css-rules-extraction-test-button-black.css' test-button;
         @import '${BASE_PATH}/css-rules-extraction-test-text-field.css' test-text-field;
       </style>
     `);
     await oneEvent(style, 'load');
 
     {
       const rules = extractTagScopedCSSRules(document, 'test-button');
-      expect(rules).to.have.lengthOf(1);
-      expect(rules[0].cssText).to.equal(':host { color: black; }');
+      expect(rules).to.have.lengthOf(2);
+      expect(rules[0].cssText).to.equal(':host { color: red; }');
+      expect(rules[1].cssText).to.equal(':host { color: black; }');
     }
     {
       const rules = extractTagScopedCSSRules(document, 'test-text-field');
@@ -69,7 +85,7 @@ describe('CSS rules extraction', () => {
     }
   });
 
-  it('should extract rules from tag-scoped @media and @import inside an imported stylesheet', async () => {
+  it('should extract and deduplicate rules from tag-scoped @media and @import inside an imported stylesheet', async () => {
     const style = fixtureSync(`
       <style>
         @import '${BASE_PATH}/css-rules-extraction-test-shared.css';
@@ -79,8 +95,9 @@ describe('CSS rules extraction', () => {
 
     {
       const rules = extractTagScopedCSSRules(document, 'test-button');
-      expect(rules).to.have.lengthOf(1);
-      expect(rules[0].cssText).to.equal(':host { color: black; }');
+      expect(rules).to.have.lengthOf(2);
+      expect(rules[0].cssText).to.equal(':host { color: red; }');
+      expect(rules[1].cssText).to.equal(':host { color: black; }');
     }
     {
       const rules = extractTagScopedCSSRules(document, 'test-text-field');