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-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));
     }
   }