@akinon/pz-theme 2.0.84-rc.0 → 2.0.84

package/src/utils/index.ts

@@ -6,6 +6,7 @@ import {
   escapeCssAttributeValue
 } from './css-safety';
 import {
+  buildInnerRootSelectors,
   buildPartSelectors,
   buildRootStateSelectors,
   splitPartStyles
@@ -1400,7 +1401,7 @@ const generateElementCSS = (
  * override is emitted `!important`. Without it the override would be written,
  * saved, shown in the panel, and then quietly do nothing.
  */
-const generatePartCSS = (
+export const generatePartCSS = (
   blockSelector: string,
   styles: Record<string, unknown>,
   targetBreakpoint?: string
@@ -1449,7 +1450,15 @@ const generatePartCSS = (
 const generateRootStateCSS = (
   elementSelector: string,
   styles: Record<string, unknown>,
-  targetBreakpoint?: string
+  targetBreakpoint?: string,
+  /**
+   * The rule is routed to the element the renderer draws rather than onto the
+   * wrapper `elementSelector` names. That makes it a descendant selector, so
+   * its state variants need the ownership guard for the same reason the
+   * stateless rule does — and the guard has to be placed per state expression,
+   * which is why the flag travels here instead of a finished selector.
+   */
+  targetsInnerRoot = false
 ): string => {
   const { rootStates } = splitPartStyles(styles);
   if (rootStates.length === 0) return '';
@@ -1457,7 +1466,9 @@ const generateRootStateCSS = (
   let css = '';
 
   rootStates.forEach((bucket) => {
-    const selectors = buildRootStateSelectors(elementSelector, bucket.state);
+    const selectors = targetsInnerRoot
+      ? buildInnerRootSelectors(elementSelector, bucket.state)
+      : buildRootStateSelectors(elementSelector, bucket.state);
     if (selectors.length === 0) return;
 
     css += generateElementCSS(
@@ -1508,17 +1519,29 @@ const collectBlockCSS = (
       // which is what keeps published compositions rendering as before.
       const targetsInnerRoot =
         block.stylesTargetRoot ?? INNER_ROOT_BLOCK_TYPES.has(block.type ?? '');
-      const rootSelector = targetsInnerRoot
-        ? `${selector} [data-part="root"]`
-        : selector;
+      // Guarded: `[block] [data-part="root"]` is a descendant selector, and
+      // every text, link or button nested inside this one marks a root of its
+      // own — see `buildInnerRootSelectors`.
+      const rootSelectors = targetsInnerRoot
+        ? buildInnerRootSelectors(selector)
+        : [selector];
 
       if (Object.keys(root).length > 0) {
-        css += generateElementCSS(rootSelector, root, targetBreakpoint);
+        css += generateElementCSS(
+          rootSelectors.join(',\n'),
+          root,
+          targetBreakpoint
+        );
       }
 
       // After the plain root rule, and against the same element: a state has to
       // be able to override what the stateless value painted.
-      css += generateRootStateCSS(rootSelector, blockStyles, targetBreakpoint);
+      css += generateRootStateCSS(
+        selector,
+        blockStyles,
+        targetBreakpoint,
+        targetsInnerRoot
+      );
 
       css += generatePartCSS(selector, blockStyles, targetBreakpoint);
     }

package/src/utils/part-styles.ts

@@ -371,6 +371,28 @@ export const buildPartSelectors = (
   );
 };
 
+/**
+ * Selectors for a block whose renderer draws its OWN root and marks it
+ * `data-part="root"` (see `INNER_ROOT_BLOCK_TYPES`).
+ *
+ * That routed rule is a descendant selector exactly like a part rule, and
+ * `root` is the most-shared part name in the system — every text, link and
+ * button marks one. So it leaked in precisely the way the guard above exists to
+ * prevent, and did more damage than any other part name could: a link block
+ * carrying an aspect-ratio also squared the text block sitting inside it, that
+ * square then claimed the card's whole height, and the image next to it was
+ * squeezed to a 4px sliver of itself.
+ *
+ * `root` is a part name like any other, so it goes through the same builder
+ * rather than a second, quietly different copy of the rule — including for
+ * states, where the guard has to be placed per expression.
+ */
+export const buildInnerRootSelectors = (
+  blockSelector: string,
+  state: string | null = null
+): string[] =>
+  buildPartSelectors(blockSelector, { part: 'root', state, styles: {} });
+
 /**
  * Selectors for a block or section's OWN root in a state.
  *