Implement universal selector handling in getStyle

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