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

@mohamedatia/fly-design-system 2.7.2 → 2.7.4

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 +94 -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 +46 -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,34 @@ 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 — `@import url("...") layer(remote)`
+ * --------------------------------------------------------
+ * Remote stylesheets are injected via `@import url("…") layer(remote)` (CSS
+ * Cascade Level 5). This keeps remote styles in a named cascade layer so the
+ * shell can reliably override them via `@layer overrides`.
+ *
+ * The block-form `@layer remote { @import url("…"); }` is INVALID CSS — the
+ * spec forbids `@import` inside any block at-rule. Browsers silently drop such
+ * rules, causing remote stylesheets to never load. The correct syntax is the
+ * `layer()` modifier on a top-level `@import`.
+ *
+ * Browser support: Chrome 99+, Firefox 97+, Safari 15.4+ — all current engines.
+ *
+ * Alternative approaches rejected:
+ *   - 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.
+ *   - `<link layer="remote">`: the `layer` attribute on `<link>` is not yet
+ *     shipped in Firefox (as of 2025-05). Non-portable.
+ *
+ * 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 +804,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 +818,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 +890,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>">
+ *     @import url("<href>") layer(remote);
+ *   </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 +927,23 @@ 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();
+    }
+    // CSS Cascade Level 5: `@import url("…") layer(remote)` is the only valid
+    // way to place an @import inside a named cascade layer. Block-form
+    // `@layer remote { @import … }` is invalid and silently dropped by browsers.
+    // See module JSDoc for full rationale.
+    const style = document.createElement('style');
+    style.setAttribute('data-fly-app', appId);
+    style.setAttribute('data-fly-href', href);
+    style.textContent = `@import url("${href}") layer(remote);`;
+    document.head.appendChild(style);
 }
 /**
  * Removes the injected stylesheet for `appId` from `document.head`.
@@ -880,8 +955,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);
 }