@gears-frontx/react 0.2.0-alpha.2 → 0.2.0-alpha.3

package/dist/index.cjs

@@ -1282,6 +1282,9 @@ function useRegisteredPackages() {
 // src/mfe/ThemeAwareReactLifecycle.tsx
 var import_client = require("react-dom/client");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var ADOPTED_HOST_STYLE_ATTR = "data-frontx-adopted-host-style";
+var BASE_RESETS_STYLE_ID = "__frontx-base-resets__";
+var SHELL_OWNED_SHADOW_STYLE_IDS = ["__frontx-shadow-isolation__", "__frontx-css-variables__"];
 function resolveProviderMountOptions(app, bridge, mountContext) {
   const extensionId = mountContext?.extensionId;
   const domainId = mountContext?.domainId;
@@ -1336,27 +1339,108 @@ var ThemeAwareReactLifecycle = class {
   /**
    * Copy all inline <style> and <link rel="stylesheet"> from the host document
    * into the shadow root so that Tailwind and component styles apply inside the MFE.
+   *
+   * The clones are inserted ahead of everything already in the shadow root, never
+   * appended, because adopted host styles are context rather than authority: where
+   * they and the MFE's own CSS declare the same property at equal specificity, the
+   * MFE has to win. Appending inverted that. `MfeHandlerMF` injects the MFE's
+   * compiled stylesheet into the shadow root before it calls mount, so an appended
+   * clone of the shell's Tailwind preflight - whose
+   * `button, [type='button'], [type='reset'], [type='submit']` rule sets
+   * `background-color: transparent` at specificity (0,1,0) - tied with
+   * `@gears-frontx/ui-kit`'s single-class button rule and won on document order,
+   * leaving every kit Button transparent until it was hovered.
+   *
+   * Inserting at the front rather than pushing MFE styles to the back is what makes
+   * the invariant hold for stylesheets that appear after mount too - a lazily
+   * imported component's CSS module, or whatever initializeStyles() adds - since
+   * those land behind the adopted block by construction.
+   *
+   * A cascade layer around the adopted CSS was the alternative and is rejected:
+   * layered rules lose to unlayered ones at *any* specificity, so a host utility
+   * class would stop overriding an MFE element selector. Document order keeps
+   * specificity in charge and only settles the ties.
+   *
+   * The block replaces its predecessor instead of stacking on it, the same
+   * upsert shape `injectStylesheet` and `injectCssVariables` use in
+   * `@gears-frontx/mfes`' shadow utilities, widened from one id-keyed node to a
+   * marked block. Replacement is required rather than tidy: `createShadowRoot`
+   * hands back an existing `element.shadowRoot` instead of attaching a new one,
+   * so remounting the same container runs this method again on a shadow root
+   * that already holds a full adopted block, and appending would grow it once
+   * per mount with no bound. It does not save re-resolving the cloned `<link>`s -
+   * every mount clones them afresh and the browser resolves each clone; what
+   * replacement buys is that the count stays at one block instead of one per
+   * mount.
+   *
+   * The block is rebuilt from the host head rather than left in place, because
+   * the head is not fixed: a lazily imported chunk adds stylesheets to it after
+   * the first mount, and the second mount has to pick those up.
+   *
+   * The fresh block goes in before the previous one comes out. Removing first
+   * leaves the shadow root with no host CSS at all, and everything between that
+   * removal and the insertion is synchronous work in this same task - so the gap
+   * never reaches a paint, but any code that reads computed styles from the tree
+   * in between sees an unstyled one. Inserting first costs one moment with two
+   * blocks present, which changes nothing: the old block is a clone of the same
+   * host head and loses every tie to the new one on document order anyway.
    */
   adoptHostStylesIntoShadowRoot(shadowRoot) {
-    const styleElements = document.head.querySelectorAll("style");
-    styleElements.forEach((el) => {
-      const clone = document.createElement("style");
-      clone.textContent = el.textContent ?? "";
-      shadowRoot.appendChild(clone);
-    });
-    const linkElements = document.head.querySelectorAll('link[rel="stylesheet"]');
-    linkElements.forEach((el) => {
-      const clone = el.cloneNode(true);
-      shadowRoot.appendChild(clone);
+    const supersededStyles = Array.from(shadowRoot.querySelectorAll(`[${ADOPTED_HOST_STYLE_ATTR}]`));
+    const adoptedStyles = document.createDocumentFragment();
+    const hostStyleNodes = document.head.querySelectorAll('style, link[rel="stylesheet"]');
+    hostStyleNodes.forEach((el) => {
+      if (el instanceof HTMLStyleElement) {
+        const clone = document.createElement("style");
+        clone.textContent = el.textContent ?? "";
+        clone.setAttribute(ADOPTED_HOST_STYLE_ATTR, "");
+        adoptedStyles.appendChild(clone);
+        return;
+      }
+      const linkClone = el.cloneNode(true);
+      linkClone.setAttribute(ADOPTED_HOST_STYLE_ATTR, "");
+      adoptedStyles.appendChild(linkClone);
     });
+    shadowRoot.insertBefore(adoptedStyles, shadowRoot.firstChild);
+    supersededStyles.forEach((el) => el.remove());
   }
   /**
    * Box-model resets and :host defaults needed inside every shadow root.
    * These aren't part of Tailwind's compiled output but are required for
    * consistent rendering across browsers.
+   *
+   * Reuses the node a previous mount left behind, exactly as `injectStylesheet`
+   * does in `@gears-frontx/mfes`' shadow utilities: a remount runs against a
+   * shadow root that `createShadowRoot` handed back intact, and appending a
+   * second copy would add one node per mount forever.
+   *
+   * Reuse alone is not enough, which is why the node is also positioned on every
+   * mount rather than left where the previous one sat. These resets are context
+   * like the adopted block is - `border-color: currentColor` on `*` is a 0-0-0
+   * declaration that beats an MFE preflight's own 0-0-0 reset purely on document
+   * order - so they have to stay ahead of the MFE's CSS, and where they land is
+   * not stable on its own. `MfeHandlerMF.wrapLifecycleWithStylesheets` removes the
+   * MFE's stylesheet on unmount and appends a fresh one before the next mount, so
+   * a node merely left in place ends up ahead of that stylesheet on a remount and
+   * behind it on the first mount: two different cascades for one component.
+   * Anchoring it to the end of the shell-owned head gives every mount the same
+   * order - adopted block, isolation, resets, MFE - which is also the order the
+   * adoption method's invariant is written against.
+   *
+   * With no shell-owned node to anchor to, the resets go to the front. That is the
+   * plain-`Element` container: no adopted block, no isolation style, and the MFE
+   * stylesheet already appended by the handler, so the front is again the only
+   * position that leaves the MFE winning ties.
+   *
+   * Looked up by attribute-selector form rather than `getElementById`, which
+   * `ShadowRoot` has but `Element` does not, and this hook takes either.
    */
   injectBaseResets(container) {
-    const style = document.createElement("style");
+    const existing = container.querySelector(
+      `style[id="${BASE_RESETS_STYLE_ID}"]`
+    );
+    const style = existing ?? document.createElement("style");
+    style.id = BASE_RESETS_STYLE_ID;
     style.textContent = `
       *, *::before, *::after {
         box-sizing: border-box;
@@ -1374,7 +1458,17 @@ var ThemeAwareReactLifecycle = class {
         background-color: hsl(var(--background));
       }
     `;
-    container.appendChild(style);
+    const shellOwnedHead = container.querySelectorAll(
+      [
+        `[${ADOPTED_HOST_STYLE_ATTR}]`,
+        ...SHELL_OWNED_SHADOW_STYLE_IDS.map((id) => `[id="${id}"]`)
+      ].join(", ")
+    );
+    const lastShellOwnedNode = shellOwnedHead[shellOwnedHead.length - 1];
+    container.insertBefore(
+      style,
+      lastShellOwnedNode ? lastShellOwnedNode.nextSibling : container.firstChild
+    );
   }
   /**
    * Hook for subclasses to inject additional CSS not covered by the adopted host