@ultimat3/render 20.1.2 → 20.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultimat3/render",
-  "version": "20.1.2",
+  "version": "20.1.3",
   "description": "The route primitive and the five render modes: static, isr, ssr, stream, spa.",
   "license": "MIT",
   "type": "module",
@@ -36,10 +36,10 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@ultimat3/cache": "20.1.2",
-    "@ultimat3/core": "20.1.2",
-    "@ultimat3/i18n": "20.1.2",
-    "@ultimat3/seo": "20.1.2",
+    "@ultimat3/cache": "20.1.3",
+    "@ultimat3/core": "20.1.3",
+    "@ultimat3/i18n": "20.1.3",
+    "@ultimat3/seo": "20.1.3",
     "sass": "1.102.0"
   }
 }

package/src/css-modules.ts

@@ -81,6 +81,47 @@ const CLASS_SELECTOR = /\.(-?[A-Za-z_][\w-]*)/g;
 const NUL = '\u0000';
 const MASKED = new RegExp(`${NUL}(\\d+)${NUL}`, 'g');
 
+const GLOBAL_OPEN = ':global(';
+
+/**
+ * Unwrap every `:global(<selector>)` to `<selector>`, handing each payload to `keep` so the class
+ * rewrite that follows cannot touch it. `:global()` is CSS-MODULES syntax, not CSS: emitted as
+ * written it is an unknown pseudo-class, and a browser drops the whole rule. `Table.module.scss`
+ * shipped twelve such rules, so the catalog table reached every app with no cell padding, no row
+ * borders and no header ground — invisible to every test, because the CSS was never parsed by
+ * anything but a browser.
+ *
+ * A scanner rather than a regex: the payload is a selector and may hold its own parentheses
+ * (`tr:nth-child(even)`), so the wrapper closes on ITS parenthesis, found by depth. An unclosed
+ * wrapper is left exactly as written — swallowing the rest of the sheet to "repair" a typo would
+ * turn one broken rule into every rule after it.
+ */
+function unwrapGlobal(css: string, keep: (selector: string) => string): string {
+  let out = '';
+  let cursor = 0;
+  for (;;) {
+    const open = css.indexOf(GLOBAL_OPEN, cursor);
+    if (open === -1) return out + css.slice(cursor);
+    const start = open + GLOBAL_OPEN.length;
+    let depth = 1;
+    let end = start;
+    while (end < css.length && depth > 0) {
+      const char = css[end];
+      // A `{` means the selector list ended with the wrapper still open: not ours to repair.
+      if (char === '{') break;
+      if (char === '(') depth += 1;
+      else if (char === ')') depth -= 1;
+      end += 1;
+    }
+    if (depth !== 0) return out + css.slice(cursor);
+    // The payload is unwrapped FIRST, so `:global(:global(.x))` yields `.x` — a wrapper left inside
+    // the mask would be restored verbatim, and the browser would drop the rule after all.
+    out +=
+      css.slice(cursor, open) + keep(unwrapGlobal(css.slice(start, end - 1), (inner) => inner));
+    cursor = end;
+  }
+}
+
 /**
  * Rewrite every class selector to its scoped name and report the map. Done on the compiled CSS
  * rather than the SCSS source so mixins, `@extend` and interpolation have already produced their
@@ -92,10 +133,13 @@ export function scopeClasses(
 ): { readonly css: string; readonly classes: Record<string, string> } {
   const classes: Record<string, string> = {};
   const literals: string[] = [];
-  const masked = css.replace(PROTECTED, (match) => {
+  const mask = (match: string): string => {
     literals.push(match);
     return `${NUL}${literals.length - 1}${NUL}`;
-  });
+  };
+  // Strings and `url()` first, so a `:global(` inside a `content:` string is never unwrapped;
+  // then each `:global()` payload joins the same mask and comes back unscoped.
+  const masked = unwrapGlobal(css.replace(PROTECTED, mask), mask);
   const scoped = masked.replace(CLASS_SELECTOR, (_match, name: string) => {
     const local = `${name}_${suffix}`;
     classes[name] = local;