npm - @mohamedatia/fly-design-system - Versions diffs - 2.7.2 → 2.7.3 - Mend

@mohamedatia/fly-design-system 2.7.2 → 2.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/fesm2022/mohamedatia-fly-design-system.mjs +91 -19
package/fesm2022/mohamedatia-fly-design-system.mjs.map +1 -1
package/package.json +1 -1
package/scss/_business-app-buttons.scss +4 -0
package/scss/_theme-auto.scss +2 -0
package/scss/_theme-dark.scss +2 -0
package/scss/_theme-light.scss +2 -0
package/scss/_theme-spatial.scss +2 -0
package/scss/_tokens.scss +2 -0
package/types/mohamedatia-fly-design-system.d.ts +45 -6
package/types/mohamedatia-fly-design-system.d.ts.map +1 -1
package/scss/apps.scss +0 -886

package/fesm2022/mohamedatia-fly-design-system.mjs CHANGED Viewed

@@ -749,9 +749,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *   3. Parses the HTML with DOMParser to extract the first
  *      `<link rel="stylesheet">` — the hashed production stylesheet
  *      (e.g. `styles-ABC123.css`). This is Strategy (b): index.html discovery.
- *   4. Injects `<link rel="stylesheet" data-fly-app="<appId>">` into
- *      `document.head`. Idempotent: if an identical href is already present,
- *      the call is a no-op. If the href differs (hot upgrade), it is replaced.
+ *   4. Injects an inline `<style data-fly-app="<appId>">` block containing
+ *      `@layer remote { @import url("..."); }` into `document.head`.
+ *      Idempotent: if a `<style data-fly-app="appId">` with the same href
+ *      is already present, the call is a no-op. If the href differs (hot
+ *      upgrade), the existing element is replaced.
  *
  * Why strategy (b)?
  * -----------------
@@ -761,6 +763,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * (c) `stylesUrl` in manifest/remoteEntry.json — cleanest long-term; requires
  *     protocol change to every remote's CI pipeline (out of scope for Wave A1).
  *
+ * CSS Cascade Layer — Option A (`@import` inside inline `<style>`)
+ * ----------------------------------------------------------------
+ * Remote stylesheets are injected inside `@layer remote { @import url("..."); }`
+ * rather than as bare `<link rel="stylesheet">`. This keeps remote styles in a
+ * named cascade layer so the shell can reliably override them via `@layer overrides`.
+ *
+ * Option A was chosen over:
+ *   - Option B (fetch+inline): relative `url(...)` paths inside the remote CSS
+ *     would resolve against the shell origin instead of the remote origin,
+ *     breaking fonts and images. Dealbreaker without a full URL-rewrite pass.
+ *   - Option C (`<link layer="remote">`): the `layer` attribute on `<link>` is
+ *     not yet shipped in Firefox (as of 2025-05). Chromium 99+ and Safari 16.4+
+ *     support it, but Firefox is still behind, making it non-portable today.
+ *
+ * Trade-off of Option A: `@import` inside `@layer` delays style application until
+ * the remote stylesheet is fetched (same as a plain `<link>`, effectively). Modern
+ * engines schedule it as a discoverable resource from the inline `<style>` element.
+ * The performance characteristic is equivalent to the old `<link>` approach.
+ *
+ * Layer order declaration
+ * -----------------------
+ * A one-time `<style data-fly-layers>` element is prepended to `<head>` the first
+ * time any remote style is loaded. It establishes the canonical layer order:
+ *   reset → designsystem → shell → remote → overrides
+ * This guarantees that even if individual `@layer` blocks are injected in any
+ * order at runtime, the cascade priority is always deterministic.
+ *
  * Unload decision
  * ---------------
  * `unloadRemoteStyles` is exported for symmetry but should NOT be called on
@@ -774,7 +803,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * - CORS: the remote's dev/prod server must serve `index.html` with a
  *   permissive `Access-Control-Allow-Origin` header (or be same-origin via
  *   the YARP gateway). The fetch uses `credentials: 'omit'` to avoid
- *   credential-carrying preflights.
+ *   credential-carrying preflights. The CSS file itself must also be CORS-
+ *   accessible since `@import` inside a `<style>` is subject to CORS checks.
  * - Race on rapid mount/unmount: if `loadRemoteStyles` is called a second time
  *   for the same appId while the first fetch is still in-flight, the second
  *   call joins the same in-flight Promise (idempotency guard at fetch level).
@@ -787,6 +817,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 const _resolvedHref = new Map();
 /** In-flight fetch promises keyed by appId — prevents duplicate fetches. */
 const _inFlight = new Map();
+/**
+ * Whether the canonical layer-order declaration has already been injected.
+ * Module-level so it survives across multiple `loadRemoteStyles` calls within
+ * the same shell session but is reset on a full page reload.
+ */
+let _layersDeclared = false;
+/**
+ * Injects a single `<style data-fly-layers>` element at the top of `<head>`
+ * that establishes the canonical cascade-layer priority order for the shell:
+ *
+ *   reset → designsystem → shell → remote → overrides
+ *
+ * Any subsequent `@layer X { … }` block lands in the already-established slot
+ * regardless of injection order, so late-arriving remote stylesheets never
+ * "win" over shell or override rules. Idempotent — runs at most once per page.
+ */
+function _ensureLayerOrder() {
+    if (_layersDeclared)
+        return;
+    _layersDeclared = true;
+    // Guard against duplicate elements in the DOM (e.g. hot-module-reload edge cases).
+    if (document.head.querySelector('style[data-fly-layers]'))
+        return;
+    const style = document.createElement('style');
+    style.setAttribute('data-fly-layers', '');
+    style.textContent = '@layer reset, designsystem, shell, remote, overrides;';
+    // Prepend so this always precedes any other layer-bearing <style> blocks.
+    document.head.insertBefore(style, document.head.firstChild);
+}
 /**
  * Discovers the hashed stylesheet href from the remote's `index.html`.
  * Returns `null` if no stylesheet `<link>` is found or the fetch fails.
@@ -830,13 +889,24 @@ async function _discoverStylesheetHref(remoteBaseUrl) {
  *                        or `http://localhost:7202`. Must NOT include `/remoteEntry.json`.
  *
  * The call is idempotent:
- *  - If a `<link data-fly-app="appId">` with the same href already exists → no-op.
- *  - If the href differs (hot upgrade) → existing link is replaced.
+ *  - If a `<style data-fly-app="appId">` whose content references the same href
+ *    already exists → no-op.
+ *  - If the href differs (hot upgrade) → existing element is replaced.
  *  - If no stylesheet is found in `index.html` → no-op (logged as a warning).
+ *
+ * Injection shape:
+ *   <style data-fly-app="<appId>" data-fly-href="<href>">
+ *     @layer remote { @import url("<href>"); }
+ *   </style>
+ *
+ * The `data-fly-href` attribute stores the discovered href separately from the
+ * style content so idempotency checks can compare the URL without parsing CSS.
  */
 async function loadRemoteStyles(appId, remoteBaseUrl) {
     if (typeof document === 'undefined')
         return; // SSR guard
+    // Ensure the canonical layer order is declared before any remote layer is injected.
+    _ensureLayerOrder();
     // Kick off or join an in-flight fetch for this appId.
     let fetchPromise = _inFlight.get(appId);
     if (!fetchPromise) {
@@ -856,19 +926,21 @@ async function loadRemoteStyles(appId, remoteBaseUrl) {
         console.warn(`[FlyOS] loadRemoteStyles: no stylesheet found in ${remoteBaseUrl}/index.html for appId="${appId}"`);
         return;
     }
-    const existing = document.head.querySelector(`link[data-fly-app="${CSS.escape(appId)}"]`);
+    const selector = `style[data-fly-app="${CSS.escape(appId)}"]`;
+    const existing = document.head.querySelector(selector);
     if (existing) {
-        if (existing.getAttribute('href') === href)
+        if (existing.getAttribute('data-fly-href') === href)
             return; // identical — no-op
-        // Hot upgrade: replace href.
-        existing.setAttribute('href', href);
-        return;
-    }
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.setAttribute('data-fly-app', appId);
-    link.href = href;
-    document.head.appendChild(link);
+        // Hot upgrade: replace the entire element so the @import URL updates atomically.
+        existing.remove();
+    }
+    // Option A: inline <style> with @layer remote { @import url("..."); }.
+    // See module JSDoc for the rationale over Options B and C.
+    const style = document.createElement('style');
+    style.setAttribute('data-fly-app', appId);
+    style.setAttribute('data-fly-href', href);
+    style.textContent = `@layer remote { @import url("${href}"); }`;
+    document.head.appendChild(style);
 }
 /**
  * Removes the injected stylesheet for `appId` from `document.head`.
@@ -880,8 +952,8 @@ async function loadRemoteStyles(appId, remoteBaseUrl) {
 function unloadRemoteStyles(appId) {
     if (typeof document === 'undefined')
         return; // SSR guard
-    const link = document.head.querySelector(`link[data-fly-app="${CSS.escape(appId)}"]`);
-    link?.parentNode?.removeChild(link);
+    const style = document.head.querySelector(`style[data-fly-app="${CSS.escape(appId)}"]`);
+    style?.parentNode?.removeChild(style);
     _resolvedHref.delete(appId);
 }