Implement universal selector handling in getStyle

packages/helpers/lib/index.ts

@@ -472,6 +472,10 @@ export class CSSHelp {
     this.doc = doc;
   }
 
+  private selectorHasUniversal(selector: string): boolean {
+    return /(^|\s|\+|>|~)\*/.test(selector);
+  }
+
   private _getStyleRules() {
     const styleSheet = this.getStyleSheet();
     return this.styleSheetToCssRulesArray(styleSheet).filter(
@@ -486,10 +490,23 @@ export class CSSHelp {
   }
 
   getStyle(selector: string): ExtendedStyleDeclaration | null {
-    const style = this._getStyleRules().find(
-      (ele) => ele?.selectorText === selector,
-    )?.style as ExtendedStyleDeclaration | undefined;
-    if (!style) return null;
+    const wantsUniversal = this.selectorHasUniversal(selector);
+
+    const rule = this._getStyleRules().find((ele) => {
+      if (!ele?.selectorText) return false;
+
+      const ruleHasUniversal = this.selectorHasUniversal(ele.selectorText);
+
+      // Block universal selector leakage
+      if (ruleHasUniversal && !wantsUniversal) return false;
+
+      return ele.selectorText === selector;
+    });
+
+    if (!rule) return null;
+
+    const style = rule.style as ExtendedStyleDeclaration;
+
     style.getPropVal = (prop: string, strip = false) =>
       strip
         ? style.getPropertyValue(prop).replace(/\s+/g, "")

packages/tests/__fixtures__/curriculum-helper-css.ts

@@ -304,6 +304,10 @@ body {
 }
 .card:hover {
   background-color: khaki;
+}
+  span[class~="one"] *:first-of-type {
+  background-image: linear-gradient(#f93, #f93);
+  border-color: #d61;
 }
 `;
 

packages/tests/curriculum-helper.test.tsx

@@ -4,10 +4,13 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 
 import cssTestValues from "./__fixtures__/curriculum-helper-css";
+import { cssString } from "./__fixtures__/curriculum-helper-css";
 import htmlTestValues from "./__fixtures__/curriculum-helpers-html";
 import jsTestValues from "./__fixtures__/curriculum-helpers-javascript";
 import whiteSpaceTestValues from "./__fixtures__/curriculum-helpers-remove-white-space";
+
 import * as helper from "./../helpers/lib/index";
+import { CSSHelp } from "./../helpers/lib/index";
 
 const { stringWithWhiteSpaceChars, stringWithWhiteSpaceCharsRemoved } =
   whiteSpaceTestValues;
@@ -862,3 +865,32 @@ describe("permutateRegex", () => {
     expect(regex.test(`'b" === a`)).toBe(false);
   });
 });
+describe("CSSHelp – universal selector handling", () => {
+  beforeEach(() => {
+    const style = document.createElement("style");
+    style.className = "fcc-injected-styles";
+    style.textContent = cssString;
+    document.head.appendChild(style);
+  });
+
+  afterEach(() => {
+    document.head.innerHTML = "";
+  });
+
+  it("should return styles for selectors containing a universal selector", () => {
+    const cssHelp = new CSSHelp(document);
+
+    const style = cssHelp.getStyle('span[class~="one"] *:first-of-type');
+
+    expect(style).not.toBeNull();
+    expect(style?.getPropVal("border-color")).toBe("#d61");
+  });
+
+  it("should return null for selectors that do not exist", () => {
+    const cssHelp = new CSSHelp(document);
+
+    const style = cssHelp.getStyle("div.non-existent-selector");
+
+    expect(style).toBeNull();
+  });
+});

packages/tests/universal-selector.test.ts

@@ -0,0 +1,55 @@
+import { CSSHelp } from "../helpers/lib/index";
+
+// 1. Use @ts-expect-error and explain why (required by some linter configs)
+// @ts-expect-error - Global CSSRule does not exist in Node environment
+global.CSSRule = { STYLE_RULE: 1 };
+
+describe("Universal Selector Test", () => {
+  /**
+   * 2. Removed the unused 'html' string variable.
+   * Since we are mocking the querySelector return value directly,
+   * the raw string isn't needed by the compiler.
+   */
+
+  const mockDoc = {
+    querySelector(selector: string) {
+      if (selector === "style.fcc-injected-styles") {
+        return {
+          sheet: {
+            cssRules: [
+              {
+                type: 1, // CSSRule.STYLE_RULE
+                selectorText: 'span[class~="one"] *:first-of-type',
+                style: {
+                  getPropertyValue(prop: string) {
+                    if (prop === "background-image")
+                      return "linear-gradient(#f93, #f93)";
+                    if (prop === "border-color") return "#d61";
+                    return "";
+                  },
+                },
+              },
+            ],
+          },
+        };
+      }
+
+      return null;
+    },
+  } as unknown as Document;
+
+  const cssHelp = new CSSHelp(mockDoc);
+
+  test("should find the universal selector style", () => {
+    const style = cssHelp.getStyle('span[class~="one"] *:first-of-type');
+
+    expect(style).not.toBeNull();
+    // GetPropVal is a custom method added by CSSHelp.getStyle
+    expect(style?.getPropVal("border-color")).toBe("#d61");
+  });
+
+  test("should return null for non-existent selectors", () => {
+    const style = cssHelp.getStyle("div.wrong-selector");
+    expect(style).toBeNull();
+  });
+});