From 8ec888d96a2ae7bd7274786ee01ebc6f8c8e76b8 Mon Sep 17 00:00:00 2001
From: John Thomson <john_thomson@sil.org>
Date: Tue, 7 Jul 2026 12:55:18 -0500
Subject: [PATCH 1/4] chore: add unmodified scoped styles polyfill from
 style-scoped package

Copied from node_modules/style-scoped/scoped.js as a baseline.
This is the original Google polyfill with no modifications.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/scoped-styles-polyfill.js | 558 ++++++++++++++++++++++++++++++++++
 1 file changed, 558 insertions(+)
 create mode 100644 src/scoped-styles-polyfill.js

diff --git a/src/scoped-styles-polyfill.js b/src/scoped-styles-polyfill.js
new file mode 100644
index 00000000..d01ad68b
--- /dev/null
+++ b/src/scoped-styles-polyfill.js
@@ -0,0 +1,558 @@
+/*
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+/**
+ * @fileoverview Polyfill for `<style scoped>`.
+ */
+
+
+(function() {
+  const s = document.createElement('style');
+  if ('scoped' in s) {
+    return;  // do nothing
+  }
+
+  const scopedCSSOptions = {
+    'applyToClass': false,
+    'prefix': '__scoped_',
+  };
+
+  // are we in old IE/Firefox mode, where .selectorText can't be changed inline?
+  s.textContent = '.x{color:red;}';
+  document.head.appendChild(s);
+  s.sheet.cssRules[0].selectorText = '.change';
+  const writeMode = s.sheet.cssRules[0].selectorText === '.change';
+  document.head.removeChild(s);
+
+
+  Object.defineProperty(HTMLStyleElement.prototype, 'scoped', {
+    enumerable: true,
+    get() {
+      return this.hasAttribute('scoped');
+    },
+    set(v) {
+      if (v) {
+        this.setAttribute('scoped', this.getAttribute('scoped') || '');
+      } else {
+        this.removeAttribute('scoped');
+      }
+    },
+  });
+
+  /**
+   * @type {!Map<!HTMLStyleElement, {attrName: string, prefix: string, parent: !HTMLElement}>}
+   */
+  const styleNodes = new Map();
+
+
+  function hashCode(s) {
+    let hash = 5381;
+    let j = s.length;
+    while (j) {
+      hash = (hash * 33) ^ s.charCodeAt(--j);
+    }
+    return hash;
+  }
+
+
+  // This monstrosity matches any valid `[foo="bar"]` block, with either quote style. Parenthesis
+  // have no special meaning within an attribute selector, and the complex regexp below mostly
+  // exists to allow \" or \' in string parts (e.g. `[foo="b\"ar"]`).
+  const attrRe = /^\[.*?(?:(["'])(?:.|\\\1)*\1.*)*\]/;
+  const walkSelectorRe = /([([,]|:scope\b)/;  // "interesting" setups
+  const scopeRe = /^:scope\b/;
+
+  /**
+   * Consumes a single selector from candidate selector text, which may contain many.
+   *
+   * @param {string} raw selector text
+   * @return {?{selector: string, rest: string}}
+   */
+  function consumeSelector(raw, prefix) {
+    let i = raw.search(walkSelectorRe);
+    if (i === -1) {
+      // found literally nothing interesting, success
+      return {
+        selector: `${prefix} ${raw}`,
+        rest: '',
+      };
+    } else if (raw[i] === ',') {
+      // found comma without anything interesting, yield rest
+      return {
+        selector: `${prefix} ${raw.substr(0, i)}`,
+        rest: raw.substr(i + 1),
+      }
+    }
+
+    let leftmost = true;   // whether we're past a descendant or similar selector
+    let scope = false;     // whether :scope has been found + replaced
+    i = raw.search(/\S/);  // place i after initial whitespace only
+
+    let depth = 0;
+  outer:
+    for (; i < raw.length; ++i) {
+      const char = raw[i];
+      switch (char) {
+        case '[':
+          const match = attrRe.exec(raw.substr(i));
+          i += (match ? match[0].length : 1) - 1;  // we add 1 every loop
+          continue;
+
+        case '(':
+          ++depth;
+          continue;
+
+        case ':':
+          if (!leftmost) {
+            continue;  // doesn't matter if :scope is here, it'll always be ignored
+          } else if (!scopeRe.test(raw.substr(i))) {
+            continue;  // not ':scope', ignore
+          } else if (depth) {
+            return null;
+          }
+
+          // Replace ':scope' with our prefix. This can happen many times; ':scope:scope' is valid.
+          // It will never apply to a descendant selector (e.g., ".foo :scope") as this is ignored
+          // by browsers anyway (invalid).
+          raw = raw.substring(0, i) + prefix + raw.substr(i + 6);
+          i += prefix.length;
+          scope = true;
+          --i;  // we'd skip over next character otherwise
+          continue;  // run loop again
+
+        case ')':
+          if (depth) {
+            --depth;
+          }
+          continue;
+      }
+      if (depth) {
+        continue;
+      }
+
+      switch (char) {
+        case ',':
+          break outer;
+
+        case ' ':
+        case '>':
+        case '~':
+        case '+':
+          if (!leftmost) {
+            continue;
+          }
+          leftmost = false;
+      }
+    }
+
+    const selector = (scope ? '' : `${prefix} `) + raw.substr(0, i);
+    return {selector, rest: raw.substr(i + 1)};
+  }
+
+  function updateSelectorText(selectorText, prefix) {
+    const found = [];
+
+    while (selectorText) {
+      const consumed = consumeSelector(selectorText, prefix);
+      if (consumed === null) {
+        return ':not(*)';
+      }
+      found.push(consumed.selector);
+      selectorText = consumed.rest;
+    }
+
+    return found.join(', ');
+  }
+
+
+  /**
+   * Upgrades a specific CSSRule.
+   *
+   * @param {!CSSRule} rule
+   * @param {string} prefix to apply
+   * @param {!CSSMediaRule|!CSSStyleSheet} group
+   * @param {number} index in group
+   */
+  function upgradeRule(rule, prefix, group, index) {
+    if (rule instanceof CSSMediaRule) {
+      // upgrade children
+      const l = rule.cssRules.length;
+      for (let j = 0; j < l; ++j) {
+        upgradeRule(rule.cssRules[j], prefix, rule, j);
+      }
+      return;
+    }
+
+    if (!(rule instanceof CSSStyleRule)) {
+      return;  // unknown rule type, ignore
+    }
+
+    const update = updateSelectorText(rule.selectorText, prefix);
+
+    if (writeMode) {
+      // anything but old IE/Firefox
+      rule.selectorText = update;
+    } else {
+      // old browsers which don't allow modification of selectorText
+      const cssText = rule.style.cssText;  // save before we delete
+      group.deleteRule(index);
+      group.insertRule(`${update} {${cssText}}`, index);
+    }
+  }
+
+
+  /**
+   * @param {!CSSRule} rule
+   * @return {Node} owner of rule
+   */
+  function ownerNode(rule) {
+    let sheet = rule.parentStyleSheet;
+    while (sheet) {
+      if (sheet.ownerNode) {
+        return sheet.ownerNode;
+      }
+      sheet = sheet.parentStyleSheet;
+    }
+    return null;
+  }
+
+
+  /**
+   * Replaces a live rule, returning the new `CSSRule` that it was replaced with.
+   *
+   * @param {!CSSRule} rule
+   * @param {string} update to replace with
+   * @return {!CSSRule}
+   */
+  function replaceRule(rule, update) {
+    const parent = rule.parentStyleSheet;
+    let i;
+    for (i = 0; i < parent.rules.length; ++i) {
+      if (parent.rules[i] === rule) {
+        break;
+      }
+    }
+    parent.removeRule(i);
+    parent.insertRule(update, i);
+
+    return parent.rules[i];
+  }
+
+
+  /**
+   * @param {!CSSStyleSheet} sheet
+   * @return {?{code: number}} the DOMException found while accessing this CSS
+   */
+  function sheetRulesError(sheet) {
+    // FIXME: This monstrosity just convinces Closure that `sheet.cssRules` has side-effects.
+    let rules = null;
+    try {
+      rules = sheet.cssRules;
+    } catch (e) {
+      if (e instanceof DOMException) {
+        return e;
+      }
+      throw e;
+    }
+    if (rules) {
+      return null;
+    }
+
+    // Safari no longer throws an error here, just pretend we can't read the data.
+    return {code: DOMException.SECURITY_ERR};
+  }
+
+  // TODO: upgradeSheet could return a Promise or then-like
+
+  /**
+   * @param {!CSSStyleSheet} sheet already loaded CSSStyleSheet
+   * @param {string} prefix to apply
+   * @return {boolean} if applied immediately
+   */
+  const upgradeSheet = (function() {
+
+    /** @type {!WeakMap<!StyleSheet, string>} */
+    const upgradedSheets = new WeakMap();
+
+    /** @type {!Map<!CSSImportRule, string>} */
+    const pendingImportRule = new Map();
+
+    /** @type {!Map<!CSSStyleSheet, string>} */
+    const pendingInvalidSheet = new Map();
+
+    /**
+     * Callback inside rAF to monitor for @import-style loading or for parsing CSS script tags.
+     * This is ugly, but only happens on styles that are moved or inserted dynamically (static
+     * styles all fire at once).
+     */
+    const requestCheck = (function() {
+      let rAF = 0;
+
+      function check() {
+        let again = false;
+        rAF = 0;
+
+        pendingImportRule.forEach((prefix, importRule) => {
+          if (importRule.styleSheet) {
+            internalUpgrade(importRule.styleSheet, prefix);
+          } else if (ownerNode(importRule)) {
+            again = true;
+            return;  // still valid, do nothing
+          }
+          pendingImportRule.delete(importRule);
+        });
+
+        pendingInvalidSheet.forEach((prefix, sheet) => {
+          if (sheetRulesError(sheet)) {
+            again = true;
+            return;
+          }
+          internalUpgrade(sheet, prefix);
+          pendingInvalidSheet.delete(sheet);
+        });
+
+        // check again next frame
+        if (again) {
+          rAF = window.requestAnimationFrame(check);
+        }
+      }
+
+      return function() {
+        rAF = rAF || window.requestAnimationFrame(check);
+      };
+    }());
+
+    /**
+     * @param {!CSSStyleSheet} sheet
+     * @param {string} prefix
+     */
+    function internalUpgrade(sheet, prefix) {
+      if (upgradedSheets.get(sheet) === prefix) {
+        return;  // already done
+      }
+
+      const e = sheetRulesError(sheet);
+      if (e) {
+        switch (e.code) {
+          case DOMException.SECURITY_ERR:
+            // Occurs if we try to examine a cross-domain CSS file. Fetch it ourselves and update
+            // the CSS once it is available on a 'local' URL.
+            const x = new XMLHttpRequest();
+            x.responseType = 'blob';
+            x.open('GET', sheet.href);
+
+            // This must also be replaced with a temporary @import, as @import must all appear
+            // first. Use a base64 URL that doesn't actually contain anything.
+            const rule = replaceRule(
+                /** @type {!CSSRule} */ (sheet.ownerRule),
+                `@import url('data:text/css;base64,')`
+            );
+
+            x.onload = () => {
+              const url = URL.createObjectURL(/** @type {!Blob} */ (x.response));
+              const update = /** @type {!CSSImportRule} */ (replaceRule(rule, `@import '${url}'`));
+              pendingImportRule.set(update, prefix);
+              requestCheck();
+
+              // We can revoke this URL immediately as it's seemingly read synchronously.
+              URL.revokeObjectURL(url);
+            };
+            // nb. no onerror handling
+
+            x.send();
+            return;
+
+          case DOMException.INVALID_ACCESS_ERR:
+            // This occurs in Firefox if the CSS is yet to be parsed (for dynamic cases), see:
+            //   https://bugzilla.mozilla.org/show_bug.cgi?id=761236
+            pendingInvalidSheet.set(sheet, prefix);
+            requestCheck();
+            return;
+
+          default:
+            throw e;
+        }
+      }
+
+      // Hooray, the sheet is ready to go!
+      upgradedSheets.set(sheet, prefix);
+
+      const l = sheet.cssRules.length;
+      for (let i = 0; i < l; ++i) {
+        const rule = sheet.cssRules[i];
+
+        if (!(rule instanceof CSSImportRule)) {
+          upgradeRule(rule, prefix, sheet, i);
+          continue;
+        }
+
+        if (rule.styleSheet) {
+          // TODO: recursion is bad
+          internalUpgrade(rule.styleSheet, prefix);
+          continue;
+        }
+
+        // otherwise, add to pending queue
+        pendingImportRule.set(rule, prefix);
+        requestCheck();
+      }
+
+      return true;
+    }
+
+    return internalUpgrade;
+  }());
+
+
+  /**
+   * @param {!HTMLStyleElement} node to reset
+   */
+  function resetCSS(node) {
+    const css = node.textContent;
+    node.textContent = '';
+    node.textContent = css;
+  }
+
+
+  function applyToAttr(node, attrName, apply) {
+    // default version is to apply to attributes
+    if (apply) {
+      node.setAttribute(attrName, '');
+    } else {
+      node.removeAttribute(attrName);
+    }
+  }
+
+  function applyToClass(node, attrName, apply) {
+    if (apply) {
+      node.classList.add(attrName);
+    } else {
+      node.classList.remove(attrName);
+    }
+  }
+
+
+  let applyMode = applyToAttr;
+  let uniqueId = 0;
+
+
+  function upgrade(node) {
+    const effectiveParent = node['scoped'] && document.body.contains(node) ? node.parentNode : null;
+
+    const state = styleNodes.get(node);
+    if (state) {
+      if (!effectiveParent) {
+        // disappearing, clear state and ask browser to reset CSS
+        styleNodes.delete(node);
+        resetCSS(node);
+      } else if (node.sheet) {
+        // otherwise, upgrade the sheet (succeeds if already done)
+        // nb. node.sheet is null if being removed
+        upgradeSheet(node.sheet, state.prefix);
+      }
+
+      if (state.parent !== effectiveParent) {
+        state.parent && applyMode(state.parent, state.attrName, false);
+        effectiveParent && applyMode(effectiveParent, state.attrName, true);
+        state.parent = effectiveParent;
+      }
+
+      return false;  // already upgraded
+    }
+
+    if (!effectiveParent) {
+      return;  // not scoped CSS, never seen before, ignore
+    }
+
+    // TODO: use hash for deduping
+    // const hash = hashCode(node.textContent);
+
+    // newly found style node, setup attr
+    const attrName = `${scopedCSSOptions['prefix']}${++uniqueId}`
+    const prefix = applyMode === applyToAttr ? `[${attrName}]` : `.${attrName}`;
+    styleNodes.set(node, {attrName, prefix, parent: node.parentNode});
+
+    upgradeSheet(node.sheet, prefix);
+    applyMode(effectiveParent, attrName, true);
+  }
+
+  // this mess basically calls resolve() with any <style> nodes that changed/removed/added
+  // TODO: is it faster to just call getElementsByTagName('style') and compare to previous
+  const mo = new MutationObserver((records) => {
+    const changes = new Set();
+    const iterate = (nodes) => {
+      let i = nodes ? nodes.length : 0;
+      while (i) {
+        const node = nodes[--i];
+        if (!(node instanceof HTMLElement)) {
+          continue;  // text node
+        }
+        if (node instanceof HTMLStyleElement) {
+          changes.add(node);  // directly a <style>
+          continue;
+        }
+        // look for changed children
+        const cand = node.getElementsByTagName('style');
+        let j = cand.length;
+        while (j) {
+          changes.add(cand[--j]);
+        }
+      }
+    };
+
+    records.forEach((record) => {
+      if (record.target instanceof HTMLStyleElement) {
+        changes.add(record.target);
+      } else {
+        iterate(record.addedNodes);
+        iterate(record.removedNodes);
+      }
+    });
+
+    changes.forEach(upgrade);
+  });
+
+  function setup() {
+    // clone any options from global
+    const cand = window['scopedCSS'];
+    if (typeof cand === 'object') {
+      for (let k in scopedCSSOptions) {
+        if (k in cand) {
+          scopedCSSOptions[k] = cand[k];
+        }
+      }
+
+      if (scopedCSSOptions['applyToClass']) {
+        applyMode = applyToClass;
+      }
+    }
+
+    // nb. watch for attributeFilter: ['scoped'] to detect a CSS rule changing at runtime
+    const options = {childList: true, subtree: true, attributes: true, attributeFilter: ['scoped']};
+    mo.observe(document, options);
+    const collection = document.body.getElementsByTagName('style');
+    for (let i = 0; i < collection.length; ++i) {
+      upgrade(collection[i]);
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    window.addEventListener('DOMContentLoaded', setup);
+  } else {
+    setup();
+  }
+
+}());
\ No newline at end of file

From 7fd10cb792dd6de6348a36a7a67e377836f12b82 Mon Sep 17 00:00:00 2001
From: John Thomson <john_thomson@sil.org>
Date: Tue, 7 Jul 2026 12:55:48 -0500
Subject: [PATCH 2/4] fix: correct attribute selector regex in CSS scoped
 styles polyfill

The original regex had a greedy `.*` after quoted values that could match
across multiple attribute selectors, causing commas in comma-separated
selector lists to be consumed incorrectly.

Example of the bug:
  [class*="Ebook"].numberedPage:not(...), [class*="Device"]...
The regex would match through both attributes, breaking selector separation.

Changes:
- Fixed attrRe to use lookahead assertion to stop at the closing bracket
  of the current attribute only
- Enhanced consumeSelector to calculate startPos early and use it in all
  paths to skip leading whitespace properly
- Changed .substr() to .substring() where appropriate to avoid deprecated API
- Added .trimStart() to rest calculations to handle leading spaces after commas

Includes comprehensive test cases for comma-separated selectors with
attribute selectors and pseudo-elements.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/bloom-player-core.tsx          |   5 +-
 src/scoped-styles-polyfill.js      |  29 ++--
 src/scoped-styles-polyfill.test.ts | 225 +++++++++++++++++++++++++++++
 3 files changed, 248 insertions(+), 11 deletions(-)
 create mode 100644 src/scoped-styles-polyfill.test.ts

diff --git a/src/bloom-player-core.tsx b/src/bloom-player-core.tsx
index adca28ee..69a555a2 100644
--- a/src/bloom-player-core.tsx
+++ b/src/bloom-player-core.tsx
@@ -5,8 +5,9 @@ bloom-player-core is responsible for all the behavior of working through a book,
 import * as React from "react";
 import axios from "axios";
 import Swiper, { SwiperInstance } from "react-id-swiper";
-// This loads some JS right here that is a polyfill for the (otherwise discontinued) scoped-styles html feature
-import "style-scoped/scoped.min.js";
+// This loads some JS right here that is a polyfill for the (otherwise discontinued) scoped-styles html feature.
+// We use a patched version that fixes a bug with comma-separated selectors containing attribute selectors.
+import "./scoped-styles-polyfill.js";
 import "swiper/dist/css/swiper.min.css";
 import "./bloom-player-ui.less";
 import "./bloom-player-content.less";
diff --git a/src/scoped-styles-polyfill.js b/src/scoped-styles-polyfill.js
index d01ad68b..e8039d56 100644
--- a/src/scoped-styles-polyfill.js
+++ b/src/scoped-styles-polyfill.js
@@ -68,10 +68,18 @@
   }
 
 
-  // This monstrosity matches any valid `[foo="bar"]` block, with either quote style. Parenthesis
-  // have no special meaning within an attribute selector, and the complex regexp below mostly
-  // exists to allow \" or \' in string parts (e.g. `[foo="b\"ar"]`).
-  const attrRe = /^\[.*?(?:(["'])(?:.|\\\1)*\1.*)*\]/;
+  // This matches any valid `[foo="bar"]` block, with either quote style. The regex explicitly
+  // handles quoted content to allow \" or \' in string parts (e.g. `[foo="b\"ar"]`) and
+  // allows ] inside quoted values (e.g. `[attr="a]b"]`).
+  //
+  // FIX: The original regex had a greedy `.*` after quoted values that could match across
+  // multiple attribute selectors, breaking comma-separated lists. Now we explicitly match:
+  // 1. Unquoted content (no brackets or quotes)
+  // 2. Quoted strings (allowing ] and escaped quotes inside)
+  // 3. Repeat as needed
+  // 4. Final unquoted content (no brackets)
+  // This ensures we stop at the ] of THIS attribute only, not consume across commas.
+  const attrRe = /^\[(?:[^"'\[\]]*(?:"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'))*[^"'\[\]]*\]/;
   const walkSelectorRe = /([([,]|:scope\b)/;  // "interesting" setups
   const scopeRe = /^:scope\b/;
 
@@ -82,6 +90,7 @@
    * @return {?{selector: string, rest: string}}
    */
   function consumeSelector(raw, prefix) {
+    const startPos = raw.search(/\S/);  // find where actual selector starts (skip leading whitespace)
     let i = raw.search(walkSelectorRe);
     if (i === -1) {
       // found literally nothing interesting, success
@@ -91,15 +100,17 @@
       };
     } else if (raw[i] === ',') {
       // found comma without anything interesting, yield rest
+      // Extract from startPos to exclude leading whitespace
+      const selectorPart = startPos >= 0 && startPos < i ? raw.substring(startPos, i) : raw.substr(0, i);
       return {
-        selector: `${prefix} ${raw.substr(0, i)}`,
-        rest: raw.substr(i + 1),
+        selector: `${prefix} ${selectorPart}`,
+        rest: raw.substr(i + 1).trimStart(),
       }
     }
 
     let leftmost = true;   // whether we're past a descendant or similar selector
     let scope = false;     // whether :scope has been found + replaced
-    i = raw.search(/\S/);  // place i after initial whitespace only
+    i = startPos;
 
     let depth = 0;
   outer:
@@ -158,8 +169,8 @@
       }
     }
 
-    const selector = (scope ? '' : `${prefix} `) + raw.substr(0, i);
-    return {selector, rest: raw.substr(i + 1)};
+    const selector = (scope ? '' : `${prefix} `) + raw.substring(startPos, i);
+    return {selector, rest: raw.substr(i + 1).trimStart()};
   }
 
   function updateSelectorText(selectorText, prefix) {
diff --git a/src/scoped-styles-polyfill.test.ts b/src/scoped-styles-polyfill.test.ts
new file mode 100644
index 00000000..7f2ee6d5
--- /dev/null
+++ b/src/scoped-styles-polyfill.test.ts
@@ -0,0 +1,225 @@
+import { describe, it, expect } from "vitest";
+
+// Mock the selector processing logic for testing
+function mockConsumeSelector(raw: string, prefix: string): { selector: string; rest: string } | null {
+  // This is a simplified version of the actual consumeSelector for testing
+  // Match attribute selectors including ] inside quoted values: [attr="a]b"]
+  const attrRe = /^\[(?:[^"'\[\]]*(?:"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'))*[^"'\[\]]*\]/;
+  const walkSelectorRe = /([([,]|:scope\b)/;
+  const scopeRe = /^:scope\b/;
+
+  const startPos = raw.search(/\S/);  // find where actual selector starts
+  let i = raw.search(walkSelectorRe);
+  if (i === -1) {
+    return {
+      selector: `${prefix} ${raw}`,
+      rest: '',
+    };
+  } else if (raw[i] === ',') {
+    // Extract from startPos to exclude leading whitespace
+    const selectorPart = startPos >= 0 && startPos < i ? raw.substring(startPos, i) : raw.substr(0, i);
+    return {
+      selector: `${prefix} ${selectorPart}`,
+      rest: raw.substr(i + 1).trimStart(), // FIX: trim leading whitespace
+    };
+  }
+
+  let leftmost = true;
+  let scope = false;
+  i = startPos;
+
+  let depth = 0;
+  outer: for (; i < raw.length; ++i) {
+    const char = raw[i];
+    switch (char) {
+      case '[':
+        const match = attrRe.exec(raw.substr(i));
+        i += (match ? match[0].length : 1) - 1;
+        continue;
+
+      case '(':
+        ++depth;
+        continue;
+
+      case ':':
+        if (!leftmost) {
+          continue;
+        } else if (!scopeRe.test(raw.substr(i))) {
+          continue;
+        } else if (depth) {
+          return null;
+        }
+        raw = raw.substring(0, i) + prefix + raw.substr(i + 6);
+        i += prefix.length;
+        scope = true;
+        --i;
+        continue;
+
+      case ')':
+        if (depth) {
+          --depth;
+        }
+        continue;
+    }
+    if (depth) {
+      continue;
+    }
+
+    switch (char) {
+      case ',':
+        break outer;
+
+      case ' ':
+      case '>':
+      case '~':
+      case '+':
+        if (!leftmost) {
+          continue;
+        }
+        leftmost = false;
+    }
+  }
+
+  const selector = (scope ? '' : `${prefix} `) + raw.substring(startPos, i); // FIX: use startPos
+  return { selector, rest: raw.substr(i + 1).trimStart() }; // FIX: trim leading whitespace
+}
+
+function mockUpdateSelectorText(selectorText: string, prefix: string): string {
+  const found = [];
+  while (selectorText) {
+    const consumed = mockConsumeSelector(selectorText, prefix);
+    if (consumed === null) {
+      return ':not(*)';
+    }
+    found.push(consumed.selector);
+    selectorText = consumed.rest;
+  }
+  return found.join(', ');
+}
+
+describe('Scoped styles polyfill fixes', () => {
+  const prefix = '[__scoped_1]';
+
+  it('should handle simple comma-separated selectors', () => {
+    const input = '.foo, .bar';
+    const result = mockUpdateSelectorText(input, prefix);
+    expect(result).toBe(`${prefix} .foo, ${prefix} .bar`);
+    expect(result).not.toContain('  '); // No double spaces
+  });
+
+  it('should handle comma-separated selectors with attribute selectors', () => {
+    const input = '.foo[attr], .bar[attr]';
+    const result = mockUpdateSelectorText(input, prefix);
+    expect(result).toBe(`${prefix} .foo[attr], ${prefix} .bar[attr]`);
+    expect(result).not.toContain('  '); // No double spaces
+  });
+
+  it('should handle multiple attribute selectors in comma-separated list', () => {
+    const input = '[attr1], [attr2], [attr3]';
+    const result = mockUpdateSelectorText(input, prefix);
+    expect(result).toBe(`${prefix} [attr1], ${prefix} [attr2], ${prefix} [attr3]`);
+    expect(result).not.toContain('  '); // No double spaces
+  });
+
+  it('should handle complex selectors from SimpleCheckboxQuiz.css', () => {
+    const input = `.bloom-editable.QuizHeader-style[contentEditable="true"][data-languageTipContent]:not([data-languageTipContent=""]):after, .bloom-editable.QuizAnswer-style[contentEditable="true"][data-languageTipContent]:not([data-languageTipContent=""]):after`;
+    const result = mockUpdateSelectorText(input, prefix);
+
+    // Should contain both selectors
+    expect(result).toContain('.bloom-editable.QuizHeader-style');
+    expect(result).toContain('.bloom-editable.QuizAnswer-style');
+
+    // Should have the prefix in the result
+    expect(result).toContain('[__scoped_1]');
+
+    // Most importantly: should not have double spaces (the main bug fix)
+    expect(result).not.toContain('  ');
+  });
+
+  it('should handle mixed selectors with and without attribute selectors', () => {
+    const input = '.foo, [attr], .bar[data-test]';
+    const result = mockUpdateSelectorText(input, prefix);
+    expect(result).toBe(`${prefix} .foo, ${prefix} [attr], ${prefix} .bar[data-test]`);
+    expect(result).not.toContain('  '); // No double spaces
+  });
+
+  it('should handle selectors with spaces after commas', () => {
+    const input = '.foo , .bar , .baz';
+    const result = mockUpdateSelectorText(input, prefix);
+    // The trimStart removes leading spaces, but spaces around the comma in the original
+    // will be preserved as part of the selector text
+    const parts = result.split(', ');
+    expect(parts.length).toBe(3);
+
+    // Most importantly: should not have double spaces
+    expect(result).not.toContain('  ');
+  });
+
+  it('should handle :where() pseudo-selector with attribute selectors (BL issue)', () => {
+    // This is the exact problematic selector from the user
+    const input = `.numberedPage:where([class*="Ebook"]:not(.bloom-interactive-page)),
+.numberedPage:where([class*="Device"]:not(.bloom-interactive-page))`;
+    const result = mockUpdateSelectorText(input, prefix);
+
+    // Both selectors should be present
+    expect(result).toContain('.numberedPage:where([class*="Ebook"]');
+    expect(result).toContain('.numberedPage:where([class*="Device"]');
+
+    // Both should get the prefix
+    const prefixCount = (result.match(/\[__scoped_1\]/g) || []).length;
+    expect(prefixCount).toBe(2);
+
+    // Should not have double spaces
+    expect(result).not.toContain('  ');
+
+    // Should not be invalid
+    expect(result).not.toBe(':not(*)');
+  });
+
+  it('should handle selectors starting with attribute selectors (critical bug)', () => {
+    // This matches the exact real-world problem from the user's book
+    const input = `[class*="Ebook"].numberedPage:not(.bloom-interactive-page), [class*="Device"].numberedPage:not(.bloom-interactive-page)`;
+    const result = mockUpdateSelectorText(input, prefix);
+
+    // Both should be present
+    expect(result).toContain('Ebook');
+    expect(result).toContain('Device');
+
+    // CRITICAL: Both must have the prefix
+    const parts = result.split(', ');
+    expect(parts.length).toBe(2);
+    parts.forEach((part) => {
+      const prefixPresent = part.includes('[__scoped_1]');
+      expect(prefixPresent).toBe(true);
+    });
+
+    // No double spaces
+    expect(result).not.toContain('  ');
+  });
+
+  it('should handle user-reported case with ::after pseudo-element', () => {
+    // This is the exact case the user found where commas were not being detected
+    const input = `.numberedPage[class*="Ebook"]::after, .numberedPage[class*="Device"]::after, .bloomPlayer-page .numberedPage::after`;
+    const result = mockUpdateSelectorText(input, prefix);
+
+    // Should have THREE selectors separated by commas, each with the prefix
+    const parts = result.split(', ');
+    expect(parts.length).toBe(3);
+    parts.forEach((part) => {
+      const prefixPresent = part.includes('[__scoped_1]');
+      expect(prefixPresent).toBe(true);
+    });
+  });
+
+  it('should handle ] character inside quoted attribute values', () => {
+    // Ensure ] inside quotes doesn't break attribute matching
+    const input = `[data-content="some]value"], [data-other="test"]`;
+    const result = mockUpdateSelectorText(input, prefix);
+
+    // Should have TWO selectors, both with prefix
+    const parts = result.split(', ');
+    expect(parts.length).toBe(2);
+    expect(parts[0]).toBe(`${prefix} [data-content="some]value"]`);
+    expect(parts[1]).toBe(`${prefix} [data-other="test"]`);
+  });
+});

From daeea2220ee05f57fda6134b502a3c0a3c45be37 Mon Sep 17 00:00:00 2001
From: John Thomson <john_thomson@sil.org>
Date: Tue, 7 Jul 2026 17:06:33 -0500
Subject: [PATCH 3/4] chore: remove style-scoped dependency

The style-scoped npm package is no longer imported anywhere; we now use
our own patched copy at src/scoped-styles-polyfill.js (which fixes the
attribute-selector bug and is unlikely to receive upstream fixes since
the package has been unmaintained since 2021).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 package.json   | 1 -
 pnpm-lock.yaml | 8 --------
 2 files changed, 9 deletions(-)

diff --git a/package.json b/package.json
index a3752633..34a4da0d 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-id-swiper": "2.3.2",
-        "style-scoped": "0.2.2",
         "swiper": "4.5.1"
     },
     "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b2a88bd5..97afbc69 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,9 +41,6 @@ importers:
       react-id-swiper:
         specifier: 2.3.2
         version: 2.3.2(react-dom@17.0.2(react@17.0.2))(react@17.0.2)(swiper@4.5.1)
-      style-scoped:
-        specifier: 0.2.2
-        version: 0.2.2
       swiper:
         specifier: 4.5.1
         version: 4.5.1
@@ -2320,9 +2317,6 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
-  style-scoped@0.2.2:
-    resolution: {integrity: sha512-KOVGTDx6XhrHncmgBQrZBICZVNEfCH+pCO2z1pH9602Vd0zUJ+qONuX0qBba4jS//H1H8lKCc/lxfGG31wlTuQ==}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -4902,8 +4896,6 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
-  style-scoped@0.2.2: {}
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0

From 37a604546fa856d71395b4a9d0a960effc7e4f80 Mon Sep 17 00:00:00 2001
From: John Thomson <john_thomson@sil.org>
Date: Wed, 8 Jul 2026 11:01:54 -0500
Subject: [PATCH 4/4] chore: extract selector logic so tests exercise
 production code

The tests previously duplicated consumeSelector/updateSelectorText as
mocks, which could silently drift from the shipping polyfill. Extract the
pure, DOM-free selector-rewriting logic into scoped-styles-selectors.js,
imported by both the polyfill and the test. The tests now exercise the
exact code that ships.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/scoped-styles-polyfill.js      | 124 +----------------------
 src/scoped-styles-polyfill.test.ts | 124 +++--------------------
 src/scoped-styles-selectors.js     | 152 +++++++++++++++++++++++++++++
 3 files changed, 170 insertions(+), 230 deletions(-)
 create mode 100644 src/scoped-styles-selectors.js

diff --git a/src/scoped-styles-polyfill.js b/src/scoped-styles-polyfill.js
index e8039d56..c8ae7874 100644
--- a/src/scoped-styles-polyfill.js
+++ b/src/scoped-styles-polyfill.js
@@ -18,6 +18,9 @@
  * @fileoverview Polyfill for `<style scoped>`.
  */
 
+// The pure selector-rewriting logic lives in a separate module so it can be unit-tested
+// directly (scoped-styles-polyfill.test.ts) rather than against a duplicated copy.
+import {updateSelectorText} from './scoped-styles-selectors.js';
 
 (function() {
   const s = document.createElement('style');
@@ -68,127 +71,6 @@
   }
 
 
-  // This matches any valid `[foo="bar"]` block, with either quote style. The regex explicitly
-  // handles quoted content to allow \" or \' in string parts (e.g. `[foo="b\"ar"]`) and
-  // allows ] inside quoted values (e.g. `[attr="a]b"]`).
-  //
-  // FIX: The original regex had a greedy `.*` after quoted values that could match across
-  // multiple attribute selectors, breaking comma-separated lists. Now we explicitly match:
-  // 1. Unquoted content (no brackets or quotes)
-  // 2. Quoted strings (allowing ] and escaped quotes inside)
-  // 3. Repeat as needed
-  // 4. Final unquoted content (no brackets)
-  // This ensures we stop at the ] of THIS attribute only, not consume across commas.
-  const attrRe = /^\[(?:[^"'\[\]]*(?:"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'))*[^"'\[\]]*\]/;
-  const walkSelectorRe = /([([,]|:scope\b)/;  // "interesting" setups
-  const scopeRe = /^:scope\b/;
-
-  /**
-   * Consumes a single selector from candidate selector text, which may contain many.
-   *
-   * @param {string} raw selector text
-   * @return {?{selector: string, rest: string}}
-   */
-  function consumeSelector(raw, prefix) {
-    const startPos = raw.search(/\S/);  // find where actual selector starts (skip leading whitespace)
-    let i = raw.search(walkSelectorRe);
-    if (i === -1) {
-      // found literally nothing interesting, success
-      return {
-        selector: `${prefix} ${raw}`,
-        rest: '',
-      };
-    } else if (raw[i] === ',') {
-      // found comma without anything interesting, yield rest
-      // Extract from startPos to exclude leading whitespace
-      const selectorPart = startPos >= 0 && startPos < i ? raw.substring(startPos, i) : raw.substr(0, i);
-      return {
-        selector: `${prefix} ${selectorPart}`,
-        rest: raw.substr(i + 1).trimStart(),
-      }
-    }
-
-    let leftmost = true;   // whether we're past a descendant or similar selector
-    let scope = false;     // whether :scope has been found + replaced
-    i = startPos;
-
-    let depth = 0;
-  outer:
-    for (; i < raw.length; ++i) {
-      const char = raw[i];
-      switch (char) {
-        case '[':
-          const match = attrRe.exec(raw.substr(i));
-          i += (match ? match[0].length : 1) - 1;  // we add 1 every loop
-          continue;
-
-        case '(':
-          ++depth;
-          continue;
-
-        case ':':
-          if (!leftmost) {
-            continue;  // doesn't matter if :scope is here, it'll always be ignored
-          } else if (!scopeRe.test(raw.substr(i))) {
-            continue;  // not ':scope', ignore
-          } else if (depth) {
-            return null;
-          }
-
-          // Replace ':scope' with our prefix. This can happen many times; ':scope:scope' is valid.
-          // It will never apply to a descendant selector (e.g., ".foo :scope") as this is ignored
-          // by browsers anyway (invalid).
-          raw = raw.substring(0, i) + prefix + raw.substr(i + 6);
-          i += prefix.length;
-          scope = true;
-          --i;  // we'd skip over next character otherwise
-          continue;  // run loop again
-
-        case ')':
-          if (depth) {
-            --depth;
-          }
-          continue;
-      }
-      if (depth) {
-        continue;
-      }
-
-      switch (char) {
-        case ',':
-          break outer;
-
-        case ' ':
-        case '>':
-        case '~':
-        case '+':
-          if (!leftmost) {
-            continue;
-          }
-          leftmost = false;
-      }
-    }
-
-    const selector = (scope ? '' : `${prefix} `) + raw.substring(startPos, i);
-    return {selector, rest: raw.substr(i + 1).trimStart()};
-  }
-
-  function updateSelectorText(selectorText, prefix) {
-    const found = [];
-
-    while (selectorText) {
-      const consumed = consumeSelector(selectorText, prefix);
-      if (consumed === null) {
-        return ':not(*)';
-      }
-      found.push(consumed.selector);
-      selectorText = consumed.rest;
-    }
-
-    return found.join(', ');
-  }
-
-
   /**
    * Upgrades a specific CSSRule.
    *
diff --git a/src/scoped-styles-polyfill.test.ts b/src/scoped-styles-polyfill.test.ts
index 7f2ee6d5..fe003529 100644
--- a/src/scoped-styles-polyfill.test.ts
+++ b/src/scoped-styles-polyfill.test.ts
@@ -1,129 +1,35 @@
 import { describe, it, expect } from "vitest";
-
-// Mock the selector processing logic for testing
-function mockConsumeSelector(raw: string, prefix: string): { selector: string; rest: string } | null {
-  // This is a simplified version of the actual consumeSelector for testing
-  // Match attribute selectors including ] inside quoted values: [attr="a]b"]
-  const attrRe = /^\[(?:[^"'\[\]]*(?:"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'))*[^"'\[\]]*\]/;
-  const walkSelectorRe = /([([,]|:scope\b)/;
-  const scopeRe = /^:scope\b/;
-
-  const startPos = raw.search(/\S/);  // find where actual selector starts
-  let i = raw.search(walkSelectorRe);
-  if (i === -1) {
-    return {
-      selector: `${prefix} ${raw}`,
-      rest: '',
-    };
-  } else if (raw[i] === ',') {
-    // Extract from startPos to exclude leading whitespace
-    const selectorPart = startPos >= 0 && startPos < i ? raw.substring(startPos, i) : raw.substr(0, i);
-    return {
-      selector: `${prefix} ${selectorPart}`,
-      rest: raw.substr(i + 1).trimStart(), // FIX: trim leading whitespace
-    };
-  }
-
-  let leftmost = true;
-  let scope = false;
-  i = startPos;
-
-  let depth = 0;
-  outer: for (; i < raw.length; ++i) {
-    const char = raw[i];
-    switch (char) {
-      case '[':
-        const match = attrRe.exec(raw.substr(i));
-        i += (match ? match[0].length : 1) - 1;
-        continue;
-
-      case '(':
-        ++depth;
-        continue;
-
-      case ':':
-        if (!leftmost) {
-          continue;
-        } else if (!scopeRe.test(raw.substr(i))) {
-          continue;
-        } else if (depth) {
-          return null;
-        }
-        raw = raw.substring(0, i) + prefix + raw.substr(i + 6);
-        i += prefix.length;
-        scope = true;
-        --i;
-        continue;
-
-      case ')':
-        if (depth) {
-          --depth;
-        }
-        continue;
-    }
-    if (depth) {
-      continue;
-    }
-
-    switch (char) {
-      case ',':
-        break outer;
-
-      case ' ':
-      case '>':
-      case '~':
-      case '+':
-        if (!leftmost) {
-          continue;
-        }
-        leftmost = false;
-    }
-  }
-
-  const selector = (scope ? '' : `${prefix} `) + raw.substring(startPos, i); // FIX: use startPos
-  return { selector, rest: raw.substr(i + 1).trimStart() }; // FIX: trim leading whitespace
-}
-
-function mockUpdateSelectorText(selectorText: string, prefix: string): string {
-  const found = [];
-  while (selectorText) {
-    const consumed = mockConsumeSelector(selectorText, prefix);
-    if (consumed === null) {
-      return ':not(*)';
-    }
-    found.push(consumed.selector);
-    selectorText = consumed.rest;
-  }
-  return found.join(', ');
-}
+// Import the ACTUAL production logic, so these tests exercise the code that ships
+// (rather than a duplicated copy that could silently drift out of sync).
+import { updateSelectorText } from "./scoped-styles-selectors.js";
 
 describe('Scoped styles polyfill fixes', () => {
   const prefix = '[__scoped_1]';
 
   it('should handle simple comma-separated selectors', () => {
     const input = '.foo, .bar';
-    const result = mockUpdateSelectorText(input, prefix);
+    const result = updateSelectorText(input, prefix);
     expect(result).toBe(`${prefix} .foo, ${prefix} .bar`);
     expect(result).not.toContain('  '); // No double spaces
   });
 
   it('should handle comma-separated selectors with attribute selectors', () => {
     const input = '.foo[attr], .bar[attr]';
-    const result = mockUpdateSelectorText(input, prefix);
+    const result = updateSelectorText(input, prefix);
     expect(result).toBe(`${prefix} .foo[attr], ${prefix} .bar[attr]`);
     expect(result).not.toContain('  '); // No double spaces
   });
 
   it('should handle multiple attribute selectors in comma-separated list', () => {
     const input = '[attr1], [attr2], [attr3]';
-    const result = mockUpdateSelectorText(input, prefix);
+    const result = updateSelectorText(input, prefix);
     expect(result).toBe(`${prefix} [attr1], ${prefix} [attr2], ${prefix} [attr3]`);
     expect(result).not.toContain('  '); // No double spaces
   });
 
   it('should handle complex selectors from SimpleCheckboxQuiz.css', () => {
     const input = `.bloom-editable.QuizHeader-style[contentEditable="true"][data-languageTipContent]:not([data-languageTipContent=""]):after, .bloom-editable.QuizAnswer-style[contentEditable="true"][data-languageTipContent]:not([data-languageTipContent=""]):after`;
-    const result = mockUpdateSelectorText(input, prefix);
+    const result = updateSelectorText(input, prefix);
 
     // Should contain both selectors
     expect(result).toContain('.bloom-editable.QuizHeader-style');
@@ -138,14 +44,14 @@ describe('Scoped styles polyfill fixes', () => {
 
   it('should handle mixed selectors with and without attribute selectors', () => {
     const input = '.foo, [attr], .bar[data-test]';
-    const result = mockUpdateSelectorText(input, prefix);
+    const result = updateSelectorText(input, prefix);
     expect(result).toBe(`${prefix} .foo, ${prefix} [attr], ${prefix} .bar[data-test]`);
     expect(result).not.toContain('  '); // No double spaces
   });
 
   it('should handle selectors with spaces after commas', () => {
     const input = '.foo , .bar , .baz';
-    const result = mockUpdateSelectorText(input, prefix);
+    const result = updateSelectorText(input, prefix);
     // The trimStart removes leading spaces, but spaces around the comma in the original
     // will be preserved as part of the selector text
     const parts = result.split(', ');
@@ -159,7 +65,7 @@ describe('Scoped styles polyfill fixes', () => {
     // This is the exact problematic selector from the user
     const input = `.numberedPage:where([class*="Ebook"]:not(.bloom-interactive-page)),
 .numberedPage:where([class*="Device"]:not(.bloom-interactive-page))`;
-    const result = mockUpdateSelectorText(input, prefix);
+    const result = updateSelectorText(input, prefix);
 
     // Both selectors should be present
     expect(result).toContain('.numberedPage:where([class*="Ebook"]');
@@ -179,7 +85,7 @@ describe('Scoped styles polyfill fixes', () => {
   it('should handle selectors starting with attribute selectors (critical bug)', () => {
     // This matches the exact real-world problem from the user's book
     const input = `[class*="Ebook"].numberedPage:not(.bloom-interactive-page), [class*="Device"].numberedPage:not(.bloom-interactive-page)`;
-    const result = mockUpdateSelectorText(input, prefix);
+    const result = updateSelectorText(input, prefix);
 
     // Both should be present
     expect(result).toContain('Ebook');
@@ -188,7 +94,7 @@ describe('Scoped styles polyfill fixes', () => {
     // CRITICAL: Both must have the prefix
     const parts = result.split(', ');
     expect(parts.length).toBe(2);
-    parts.forEach((part) => {
+    parts.forEach((part: string) => {
       const prefixPresent = part.includes('[__scoped_1]');
       expect(prefixPresent).toBe(true);
     });
@@ -200,12 +106,12 @@ describe('Scoped styles polyfill fixes', () => {
   it('should handle user-reported case with ::after pseudo-element', () => {
     // This is the exact case the user found where commas were not being detected
     const input = `.numberedPage[class*="Ebook"]::after, .numberedPage[class*="Device"]::after, .bloomPlayer-page .numberedPage::after`;
-    const result = mockUpdateSelectorText(input, prefix);
+    const result = updateSelectorText(input, prefix);
 
     // Should have THREE selectors separated by commas, each with the prefix
     const parts = result.split(', ');
     expect(parts.length).toBe(3);
-    parts.forEach((part) => {
+    parts.forEach((part: string) => {
       const prefixPresent = part.includes('[__scoped_1]');
       expect(prefixPresent).toBe(true);
     });
@@ -214,7 +120,7 @@ describe('Scoped styles polyfill fixes', () => {
   it('should handle ] character inside quoted attribute values', () => {
     // Ensure ] inside quotes doesn't break attribute matching
     const input = `[data-content="some]value"], [data-other="test"]`;
-    const result = mockUpdateSelectorText(input, prefix);
+    const result = updateSelectorText(input, prefix);
 
     // Should have TWO selectors, both with prefix
     const parts = result.split(', ');
diff --git a/src/scoped-styles-selectors.js b/src/scoped-styles-selectors.js
new file mode 100644
index 00000000..dd8772d3
--- /dev/null
+++ b/src/scoped-styles-selectors.js
@@ -0,0 +1,152 @@
+/*
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+/**
+ * @fileoverview Pure selector-rewriting logic for the `<style scoped>` polyfill.
+ *
+ * This was extracted from scoped-styles-polyfill.js so it can be unit-tested
+ * directly (see scoped-styles-polyfill.test.ts) rather than against a duplicated
+ * copy that could silently drift from what actually ships. These functions are
+ * pure string transforms and touch no DOM, so they import cleanly into tests.
+ */
+
+// This matches any valid `[foo="bar"]` block, with either quote style. The regex explicitly
+// handles quoted content to allow \" or \' in string parts (e.g. `[foo="b\"ar"]`) and
+// allows ] inside quoted values (e.g. `[attr="a]b"]`).
+//
+// FIX: The original regex had a greedy `.*` after quoted values that could match across
+// multiple attribute selectors, breaking comma-separated lists. Now we explicitly match:
+// 1. Unquoted content (no brackets or quotes)
+// 2. Quoted strings (allowing ] and escaped quotes inside)
+// 3. Repeat as needed
+// 4. Final unquoted content (no brackets)
+// This ensures we stop at the ] of THIS attribute only, not consume across commas.
+const attrRe = /^\[(?:[^"'\[\]]*(?:"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'))*[^"'\[\]]*\]/;
+const walkSelectorRe = /([([,]|:scope\b)/;  // "interesting" setups
+const scopeRe = /^:scope\b/;
+
+/**
+ * Consumes a single selector from candidate selector text, which may contain many.
+ *
+ * @param {string} raw selector text
+ * @param {string} prefix to apply
+ * @return {?{selector: string, rest: string}}
+ */
+export function consumeSelector(raw, prefix) {
+  const startPos = raw.search(/\S/);  // find where actual selector starts (skip leading whitespace)
+  let i = raw.search(walkSelectorRe);
+  if (i === -1) {
+    // found literally nothing interesting, success
+    return {
+      selector: `${prefix} ${raw}`,
+      rest: '',
+    };
+  } else if (raw[i] === ',') {
+    // found comma without anything interesting, yield rest
+    // Extract from startPos to exclude leading whitespace
+    const selectorPart = startPos >= 0 && startPos < i ? raw.substring(startPos, i) : raw.substr(0, i);
+    return {
+      selector: `${prefix} ${selectorPart}`,
+      rest: raw.substr(i + 1).trimStart(),
+    }
+  }
+
+  let leftmost = true;   // whether we're past a descendant or similar selector
+  let scope = false;     // whether :scope has been found + replaced
+  i = startPos;
+
+  let depth = 0;
+outer:
+  for (; i < raw.length; ++i) {
+    const char = raw[i];
+    switch (char) {
+      case '[':
+        const match = attrRe.exec(raw.substr(i));
+        i += (match ? match[0].length : 1) - 1;  // we add 1 every loop
+        continue;
+
+      case '(':
+        ++depth;
+        continue;
+
+      case ':':
+        if (!leftmost) {
+          continue;  // doesn't matter if :scope is here, it'll always be ignored
+        } else if (!scopeRe.test(raw.substr(i))) {
+          continue;  // not ':scope', ignore
+        } else if (depth) {
+          return null;
+        }
+
+        // Replace ':scope' with our prefix. This can happen many times; ':scope:scope' is valid.
+        // It will never apply to a descendant selector (e.g., ".foo :scope") as this is ignored
+        // by browsers anyway (invalid).
+        raw = raw.substring(0, i) + prefix + raw.substr(i + 6);
+        i += prefix.length;
+        scope = true;
+        --i;  // we'd skip over next character otherwise
+        continue;  // run loop again
+
+      case ')':
+        if (depth) {
+          --depth;
+        }
+        continue;
+    }
+    if (depth) {
+      continue;
+    }
+
+    switch (char) {
+      case ',':
+        break outer;
+
+      case ' ':
+      case '>':
+      case '~':
+      case '+':
+        if (!leftmost) {
+          continue;
+        }
+        leftmost = false;
+    }
+  }
+
+  const selector = (scope ? '' : `${prefix} `) + raw.substring(startPos, i);
+  return {selector, rest: raw.substr(i + 1).trimStart()};
+}
+
+/**
+ * Rewrites a full (possibly comma-separated) selector list to be scoped under prefix.
+ *
+ * @param {string} selectorText the full selector text of a CSS rule
+ * @param {string} prefix to apply
+ * @return {string}
+ */
+export function updateSelectorText(selectorText, prefix) {
+  const found = [];
+
+  while (selectorText) {
+    const consumed = consumeSelector(selectorText, prefix);
+    if (consumed === null) {
+      return ':not(*)';
+    }
+    found.push(consumed.selector);
+    selectorText = consumed.rest;
+  }
+
+  return found.join(', ');
+}