fix: firefox @supports(width:1rex)

.changeset/crazy-views-sit.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+fix: firefox `@supports(width:1rex)`

packages/web-platform/web-core-wasm/ts/client/mainthread/LynxViewInstance.ts

@@ -24,11 +24,22 @@ import { createElementAPI } from './elementAPIs/createElementAPI.js';
 import { createMainThreadGlobalAPIs } from './createMainThreadGlobalAPIs.js';
 import { templateManager } from './TemplateManager.js';
 import { loadAllWebElements } from '../webElementsDynamicLoader.js';
+// @ts-expect-error
+import IN_SHADOW_CSS_MODERN from '../../../css/in_shadow.css?inline';
 import type { LynxViewElement } from './LynxView.js';
 loadAllWebElements().catch((e) => {
   console.error('[lynx-web] Failed to load web elements', e);
 });
 
+const IN_SHADOW_CSS = URL.createObjectURL(
+  new Blob([IN_SHADOW_CSS_MODERN], { type: 'text/css' }),
+);
+const linkElement = document.createElement('link');
+linkElement.rel = 'stylesheet';
+linkElement.href = IN_SHADOW_CSS;
+linkElement.type = 'text/css';
+linkElement.fetchPriority = 'high';
+linkElement.blocking = 'render';
 const pixelRatio = window.devicePixelRatio;
 const screenWidth = window.screen.availWidth * pixelRatio;
 const screenHeight = window.screen.availHeight * pixelRatio;
@@ -79,6 +90,7 @@ export class LynxViewInstance implements AsyncDisposable {
     napiModulesMap: NapiModulesMap = {},
     initI18nResources?: InitI18nResources,
   ) {
+    this.rootDom.append(linkElement.cloneNode(false));
     this.#nativeModulesMap = nativeModulesMap;
     this.#napiModulesMap = napiModulesMap;
     this.mainThreadGlobalThis = mtsRealm.globalWindow as

packages/web-platform/web-core-wasm/ts/client/mainthread/elementAPIs/createElementAPI.ts

@@ -44,18 +44,8 @@ import type {
   UpdateListInfoAttributeValue,
 } from '../../../types/index.js';
 import type { WASMJSBinding } from './WASMJSBinding.js';
-// @ts-expect-error
-import IN_SHADOW_CSS_MODERN from '../../../../css/in_shadow.css?inline';
 import { requestIdleCallbackImpl } from '../utils/requestIdleCallback.js';
 
-const IN_SHADOW_CSS = URL.createObjectURL(
-  new Blob([IN_SHADOW_CSS_MODERN], { type: 'text/css' }),
-);
-const linkElement = document.createElement('link');
-linkElement.rel = 'stylesheet';
-linkElement.href = IN_SHADOW_CSS;
-linkElement.type = 'text/css';
-
 const {
   MainThreadWasmContext,
   add_inline_style_raw_string_key,
@@ -71,7 +61,6 @@ export function createElementAPI(
   config_default_display_linear: boolean,
   config_default_overflow_visible: boolean,
 ): ElementPAPIs {
-  rootDom.append(linkElement.cloneNode(false));
   const wasmContext = new MainThreadWasmContext(
     rootDom,
     mtsBinding,

packages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css

@@ -26,7 +26,7 @@
   */
 @supports not
   ((content-visibility: auto) and (transition-behavior: allow-discrete) and
-    (width: 1rex)) {
+    (-webkit-box-reflect: above)) {
   * {
     --lynx-display: linear;
     --lynx-linear-weight-sum: 1;
@@ -47,6 +47,7 @@
     --flex-wrap: nowrap;
     --align-self: auto;
   }
+
   [lynx-computed-display="linear"] {
     flex-wrap: nowrap !important;
     flex-direction: column;
@@ -61,11 +62,9 @@
 
   [lynx-computed-display="flex"] > *,
   [lynx-computed-display="flex"] > lynx-wrapper > * {
-    flex: var(
-      --flex,
-      var(--flex-grow) var(--flex-shrink) var(--flex-basis)
-    );
+    flex: var(--flex, var(--flex-grow) var(--flex-shrink) var(--flex-basis));
   }
+
   [lynx-computed-display="linear"] > *,
   [lynx-computed-display="linear"] > lynx-wrapper > * {
     flex-shrink: 0 !important;
@@ -111,6 +110,7 @@
     > * {
     align-self: var(--align-self-column);
   }
+
   [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > *,
   [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"],
   [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"]

packages/web-platform/web-elements/src/elements/common-css/linear.css

@@ -7,51 +7,61 @@
   inherits: false;
   initial-value: linear;
 }
+
 @property --lynx-linear-weight-sum {
   syntax: "<number>";
   inherits: false;
   initial-value: 1;
 }
+
 @property --lynx-linear-weight {
   syntax: "<number>";
   inherits: false;
   initial-value: 0;
 }
+
 @property --justify-content-column {
   syntax: "flex-start|flex-end|center|space-between|space-around";
   inherits: false;
   initial-value: flex-start;
 }
+
 @property --justify-content-column-reverse {
   syntax: "flex-start|flex-end|center|space-between|space-around";
   inherits: false;
   initial-value: flex-start;
 }
+
 @property --justify-content-row {
   syntax: "flex-start|flex-end|center|space-between|space-around";
   inherits: false;
   initial-value: flex-start;
 }
+
 @property --justify-content-row-reverse {
   syntax: "flex-start|flex-end|center|space-between|space-around";
   inherits: false;
   initial-value: flex-start;
 }
+
 @property --align-self-row {
   syntax: "start|end|center|stretch|auto";
   inherits: false;
   initial-value: auto;
 }
+
 @property --align-self-column {
   syntax: "start|end|center|stretch|auto";
   inherits: false;
   initial-value: auto;
 }
+
 @property --lynx-linear-weight-basis {
   syntax: "auto|<number>|<length>";
   inherits: false;
   initial-value: auto;
 }
+
 @property --lynx-linear-orientation {
   syntax: "<custom-ident>";
   inherits: false;
@@ -62,29 +72,35 @@
   syntax: "*";
   inherits: false;
 }
+
 @property --flex-wrap {
   syntax: "*";
   inherits: false;
 }
+
 @property --flex-grow {
   syntax: "<number>";
   inherits: false;
   initial-value: 0;
 }
+
 @property --flex-shrink {
   syntax: "<number>";
   inherits: false;
   initial-value: 1;
 }
+
 @property --flex-basis {
   syntax: "*";
   inherits: false;
   initial-value: auto;
 }
+
 @property --flex-value {
   syntax: "*";
   inherits: false;
 }
+
 @property --flex {
   syntax: "*";
   inherits: false;
@@ -189,6 +205,7 @@ list-item {
     var(--justify-content-column-reverse)
   );
 }
+
 x-view,
 x-foldview-header-ng,
 x-foldview-ng,
@@ -203,15 +220,9 @@ x-viewpager-item-ng,
 x-viewpager-ng,
 list-item {
   flex-wrap: var(--lynx-display-linear, nowrap)
-    var(
-      --lynx-display-flex,
-      var(--flex-wrap)
-    );
+    var(--lynx-display-flex, var(--flex-wrap));
   flex-direction: var(--lynx-display-linear, var(--linear-flex-direction))
-    var(
-      --lynx-display-flex,
-      var(--flex-direction)
-    );
+    var(--lynx-display-flex, var(--flex-direction));
   justify-content: var(--lynx-display-linear, var(--linear-justify-content));
 }
 
@@ -250,8 +261,8 @@ list-item {
  * it fixed in 116.0.5806.0, detail: https://issues.chromium.org/issues/40270007
  *
  * so we limit this feature to chrome 117, safari 18, firefox no:
- * rex unit: chrome 111, safari 17.2, firefox no
- *  https://developer.mozilla.org/en-US/docs/Web/CSS/length
+ * -webkit-box-reflect: chrome 4, safari 4, firefox no
+ *  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-box-reflect
  * transition-behavior:allow-discrete: chrome 117, safari 18, firefox 125
  *  https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior
  *  https://caniuse.com/mdn-css_properties_display_is_transitionable
@@ -260,7 +271,7 @@ list-item {
  * 
  */
 @supports (content-visibility: auto) and
-  (transition-behavior: allow-discrete) and (width: 1rex) {
+  (transition-behavior: allow-discrete) and (-webkit-box-reflect: above) {
   @container style(--lynx-display: linear) {
     x-view,
     x-blur-view,
@@ -333,10 +344,7 @@ list-item {
     x-textarea,
     x-list,
     list-item {
-      flex: var(
-        --flex,
-        var(--flex-grow) var(--flex-shrink) var(--flex-basis)
-      );
+      flex: var(--flex, var(--flex-grow) var(--flex-shrink) var(--flex-basis));
     }
   }