lynx-family · PupilTong · Apr 18, 2025 · Apr 18, 2025 · Apr 18, 2025 · Apr 18, 2025
diff --git a/.changeset/odd-mirrors-check.md b/.changeset/odd-mirrors-check.md
@@ -0,0 +1,26 @@
+---
+"@lynx-js/web-style-transformer": minor
+"@lynx-js/web-elements": minor
+"@lynx-js/web-core": minor
+---
+
+feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text
+
+**This is a breaking change**
+
+- Please upgrade your `@lynx-js/web-elements` to >=0.6.0
+- Please upgrade your `@lynx-js/web-core` to >=0.12.0
+- The compiled lynx template json won't be impacted.
+
+On chrome 108, the `-webkit-background-clip:text` cannot be computed by a `var(--css-var-value-text)`
+
+Therefore we move the logic into style transformation logic.
+
+Now the following status is supported
+
+```
+<text style="color:linear-gradient()">
+  <text>
+  <text>
+</text>
+```
@@ -35,6 +35,6 @@
   },
   "peerDependencies": {
     "@lynx-js/lynx-core": "0.1.2",
-    "@lynx-js/web-elements": ">=0.3.1"
+    "@lynx-js/web-elements": ">=0.6.0"
   }
 }
@@ -14,7 +14,7 @@ import {
 @Component<typeof XText>(
   'x-text',
   [CommonEventsAndMethods, CommonEventsAndMethods, XTextTruncation],
-  html`<div id="inner-box" part="inner-box"><slot></slot><slot name="inline-truncation"></slot></div>`,
+  html`<div id="inner-box" part="inner-box"><slot part="slot"></slot><slot name="inline-truncation"></slot></div>`,
 )
 export class XText extends HTMLElement {
   static readonly notToFilterFalseAttributes = new Set(['tail-color-convert']);

@@ -7,8 +7,13 @@
 x-text {
   display: flex;
   overflow-wrap: break-word;
-  --lynx-color: none;
   align-items: stretch;
+  color: var(--lynx-color);
+  background-image: var(--lynx-text-bg-color);
+}
+x-text:not(x-text > x-text):not(x-text > lynx-wrapper > x-text) {
+  --lynx-color: canvastext;
+  --lynx-text-bg-color: initial;
 }
 x-text:not(:defined) {
   display: none;
@@ -20,75 +25,38 @@ x-text > * {
 
 x-text::part(inner-box) {
   text-overflow: inherit;
-  --lynx-color: inherit;
-  --lynx-color-gradient: inherit;
+  --lynx-text-bg-color: inherit;
 }
 
 x-text > x-text::part(inner-box),
 x-text > lynx-wrapper > x-text::part(inner-box) {
-  display: inline !important;
-}
-x-text, inline-text {
-  --lynx-color-toggle: var(--lynx-color-normal);
-  --lynx-color-gradient: var(--lynx-color-toggle,);
-  --lynx-color-normal: var(--lynx-color-toggle,);
+  display: contents !important;
 }
-
-/** For: `-a:var(-b,) -b:var(-a,) -c:var(-a)` -a,-b,-c will can be incorrectly detected as invalid when chrome version lower than 99
-  so we not support gradient
-  detail: https://issues.chromium.org/issues/40172841
-  chrome 99, firefox 46, safari 7
-  https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis
-
-  References:
-  https://developer.chrome.com/blog/new-in-chrome-99
-  https://chromestatus.com/feature/5679635154075648
-  https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis
-  */
-/* autoprefixer: ignore next */
-@supports (text-emphasis: none) {
-  x-text::part(inner-box), inline-text {
-    background: var(--lynx-color-gradient, var(--lynx-color)) var(
-      --lynx-color-normal,
-      initial
-    );
-    -webkit-text-fill-color: var(--lynx-color-gradient, transparent) var(
-      --lynx-color-normal,
-      initial
-    );
-    background-clip: var(--lynx-color-gradient, text) var(
-      --lynx-color-normal,
-      initial
-    );
-    /* exist issue: https://github.com/facebook/react/issues/14200 */
-    /* import flag is essential on chromium */
-    -webkit-background-clip: var(--lynx-color-gradient, text) var(
-      --lynx-color-normal,
-      initial
-    );
-  }
+x-text::part(inner-box), inline-text, x-text::part(slot) {
+  background-clip: inherit;
+  -webkit-background-clip: inherit;
 }
 inline-text, inline-image, inline-truncation {
   display: none;
 }
 
 /* nested components */
 x-text > x-text:defined,
-x-text > x-text:defined::part(inner-box),
 x-text > inline-text:defined,
 x-text > x-text:defined,
 inline-text > inline-text:defined,
 inline-truncation > inline-text:defined,
 inline-truncation > x-text:defined,
 x-text > lynx-wrapper > x-text:defined,
-x-text > lynx-wrapper > x-text:defined::part(inner-box),
 x-text > lynx-wrapper > inline-text:defined,
 x-text > lynx-wrapper > x-text:defined,
 inline-text > lynx-wrapper > inline-text:defined,
 x-text > lynx-wrapper > x:defined,
 inline-truncation > lynx-wrapper > inline-text:defined,
 inline-truncation > lynx-wrapper > x-text:defined {
   display: inline;
+  background-clip: inherit;
+  -webkit-background-clip: inherit;
 }
 
 x-text > inline-image:defined,

@@ -242,16 +242,39 @@ const renameRules: {
     },
   ],
   'color': [
+    'color',
     {
-      name: '--lynx-color-toggle',
+      name: '--lynx-color',
       valueProcessor(value) {
         return value.includes('gradient')
-          ? 'var(--lynx-color-gradient)'
-          : 'var(--lynx-color-normal)';
+          ? 'transparent'
+          : value;
+      },
+    },
+    {
+      name: '--lynx-text-bg-color',
+      valueProcessor(value) {
+        return value.includes('gradient')
+          ? value
+          : 'initial';
+      },
+    },
+    {
+      name: 'background-clip',
+      valueProcessor(value) {
+        return value.includes('gradient')
+          ? 'text'
+          : 'initial';
+      },
+    },
+    {
+      name: '-webkit-background-clip',
+      valueProcessor(value) {
+        return value.includes('gradient')
+          ? 'text'
+          : 'initial';
       },
     },
-    'color',
-    '--lynx-color',
   ],
   'flex-direction': [
     '--flex-direction',

@@ -34,7 +34,7 @@

 const expectHasText = async (page: Page, text: string) => {
  const hasText = (await page.getByText(text).count()) === 1;
  await expect(hasText).toBe(true);
 };

 const expectNoText = async (page: Page, text: string) => {
@@ -340,6 +340,11 @@
       });
       expect(computedStyle.backgroundColor).toBe('rgb(255, 192, 203)');
     });
+    test('basic-color-not-inherit', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      await expect(page.locator('#target')).toHaveCSS('color', 'rgb(0, 0, 0)');
+    });
   });
   test.describe('apis', () => {
     test('api-animation-event', async ({ page }, { title }) => {
@@ -1365,7 +1370,7 @@
          await page.locator('#target').click();
          await wait(100);
          // nativeTextinitialtextinitial
          // -- -> nativeText
          count = await page.getByText('nativeText').count();
          expect(count).toBe(1);
          count = await page.getByText('initial').count();

@@ -14,14 +14,22 @@ export default function(props) {
         {props.result
           ? (
             <view class='succ' flatten='false'>
-              <text lynx-test-tag={'result' + props.idx} flatten='false'>
+              <text
+                style='color:#fff'
+                lynx-test-tag={'result' + props.idx}
+                flatten='false'
+              >
                 {props.text ? props.text : '通过'}
               </text>
             </view>
           )
           : (
             <view class='err' flatten='false'>
-              <text lynx-test-tag={'result' + props.idx} flatten='false'>
+              <text
+                style='color:#fff'
+                lynx-test-tag={'result' + props.idx}
+                flatten='false'
+              >
                 {props.text ? props.text : '失败'}
               </text>
             </view>

@@ -0,0 +1,14 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root } from '@lynx-js/react';
+
+function App() {
+  return (
+    <view style='color:red'>
+      <text id='target'>123456</text>
+    </view>
+  );
+}
+
+root.render(<App></App>);
@@ -3,7 +3,7 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-.blur-view {
+.text {
   color: red;
 }
 .outer-view {

@@ -15,9 +15,8 @@ function App() {
       <x-blur-view
         style='width: 100%; height: 100px; margin-top: 50px; border: 1px solid red; padding: 10px;'
         blur-radius='25px'
-        class='blur-view'
       >
-        <text>
+        <text class='text'>
           blur-radius 25
         </text>
       </x-blur-view>