refactor: improve compatibility for text linear-gradient color on chrome 108 by PupilTong · Pull Request #590 · lynx-family/lynx-stack

PupilTong · 2025-04-18T06:17:50Z

Before this commit we use toggle pattern to generate background-clip, -webkit-background-clip and color. After this commit we genarete these styles directly.

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.

changeset-bot · 2025-04-18T06:17:54Z

🦋 Changeset detected

Latest commit: d608730

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages

Name	Type
@lynx-js/web-style-transformer	Minor
@lynx-js/web-elements	Minor
@lynx-js/web-core	Minor
@lynx-js/web-mainthread-apis	Minor
@lynx-js/web-webpack-plugin	Patch
@lynx-js/web-worker-runtime	Minor
@lynx-js/react-rsbuild-plugin	Patch
@lynx-js/web-constants	Minor
@lynx-js/web-worker-rpc	Minor
@lynx-js/react-alias-rsbuild-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copilot

Pull Request Overview

This PR refactors the style transformation logic to improve Chrome 108 compatibility by eliminating the toggle pattern for generating background clip styles and color. Key changes include:

Renaming "--lynx-color-toggle" to "--lynx-color" and updating the associated value processor.
Adding new style generation rules for "--lynx-text-bg-color", "background-clip", and "-webkit-background-clip" to handle linear-gradient scenarios.
Updating the changeset to document version bumps and migration notes.

Reviewed Changes

Copilot reviewed 2 out of 4 changed files in this pull request and generated no comments.

File	Description
packages/web-platform/web-style-transformer/src/transformLynxStyles.ts	Directly generates styles for gradients, ensuring proper behavior on Chrome 108
.changeset/odd-mirrors-check.md	Adds version bump instructions and migration information

Files not reviewed (2)

packages/web-platform/web-core/package.json: Language not supported
packages/web-platform/web-elements/src/XText/x-text.css: Language not supported

codecov · 2025-04-18T06:27:09Z

Bundle Report

Changes will increase total bundle size by 103 bytes (0.02%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
@lynx-js/web-explorer-web-array-push	316.06kB	103 bytes (0.03%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: @lynx-js/web-explorer-web-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`static/js/index.js`	12 bytes	148.85kB	0.01%
`static/js/async/151.js`	195 bytes	85.14kB	0.23%
`static/css/index.css`	-104 bytes	37.97kB	-0.27%

codspeed-hq · 2025-04-18T06:28:40Z

CodSpeed Performance Report

Merging #590 will not alter performance

_{Comparing PupilTong:p/hw/fix-chrome-108-gradient (d608730) with main (e8bdc46)}

Summary

✅ 1 untouched benchmarks

codecov · 2025-04-18T06:33:00Z

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
2448	1	2447	86

View the top 3 failed test(s) by shortest run time

react.spec.ts reactlynx3 tests › elements › x-blur-view › basic-element-x-blur-view-blur-radius

Stack Traces | 5.23s run time

react.spec.ts:1468:7 basic-element-x-blur-view-blur-radius

performance.test.ts performance › x-list-waterfall-1000

Stack Traces | 7.5s run time

performance.test.ts:169:3 x-list-waterfall-1000

react.spec.ts reactlynx3 tests › apis › api-SelectorQuery

Stack Traces | 10.9s run time

react.spec.ts:427:5 api-SelectorQuery

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

…ome 108 Before this commit we use toggle pattern to generate `background-clip`, `-webkit-background-clip` and `color`. After this commit we genarete these styles directly. 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.

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/web-core@0.12.0 ### Minor Changes - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([#590](#590)) **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> ### Patch Changes - feat: allow user to implement custom template load function ([#587](#587)) ```js lynxView.customTemplateLoader = (url) => { return (await (await fetch(url, { method: 'GET', })).json()); }; ``` - feat: support mts event with target methods ([#564](#564)) After this commit, developers are allowed to invoke `event.target.setStyleProperty` in mts handler - fix: crash on removing a id attribute ([#582](#582)) - Updated dependencies \[[`f1ca29b`](f1ca29b)]: - @lynx-js/web-worker-runtime@0.12.0 - @lynx-js/web-constants@0.12.0 - @lynx-js/web-worker-rpc@0.12.0 ## @lynx-js/web-elements@0.6.0 ### Minor Changes - fix: When list-type is not specified, it is treated as single formatting. ([#535](#535)) - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([#590](#590)) **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> ### Patch Changes - feat: fully support MTS ([#569](#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - feat: support `layoutchange` event for x-overlay-ng ([#519](#519)) - fix: position:fixed not work in scroll-view ([#580](#580)) - fix: x-list may cause error: 'Resizeobserver loop completed with undelivered notifications'. ([#541](#541)) - fix: refactor foldview slot offset logic ([#575](#575)) - fix: improve x-foldview-ng ([#513](#513)) - support fling for touch event driven scrolling - allow the height of `x-foldview-slot-ng` + `x-foldview-toolbar-ng` > `x-foldview-ng` - do not prevent horizontal gesture. After this commit we only allow one direction gesture for one touch (start -> end) - feat: add list with waterfall ([#331](#331)) ## @lynx-js/web-style-transformer@0.3.0 ### Minor Changes - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([#590](#590)) **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> ## @lynx-js/react@0.106.5 ### Patch Changes - Fix `lynx.loadLazyBundle` is not a function ([#568](#568)) - fix: flushDelayedLifecycleEvents stack overflow error ([#540](#540)) ## @lynx-js/rspeedy@0.9.2 ### Patch Changes - Support cli option `--no-env` to disable loading of .env files ([#483](#483)) - Bump Rsbuild v1.3.8 with Rspack v1.3.5. ([#579](#579)) ## @lynx-js/react-rsbuild-plugin@0.9.7 ### Patch Changes - Support overriding SWC configuration. ([#563](#563)) Now you can override configuration like `useDefineForClassFields` using `tools.swc`. ```js import { defineConfig } from "@lynx-js/rspeedy"; export default defineConfig({ tools: { swc: { jsc: { transform: { useDefineForClassFields: true, }, }, }, }, }); ``` - Updated dependencies \[[`f1ca29b`](f1ca29b)]: - @lynx-js/react-webpack-plugin@0.6.11 - @lynx-js/react-alias-rsbuild-plugin@0.9.7 - @lynx-js/react-refresh-webpack-plugin@0.3.2 - @lynx-js/web-webpack-plugin@0.6.5 ## @lynx-js/web-constants@0.12.0 ### Patch Changes - feat: fully support MTS ([#569](#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.12.0 ## @lynx-js/web-explorer@0.0.5 ### Patch Changes - fix: create a new lynx-view for lynxjs.org ([#566](#566)) - fix: blank screen issue for 0.0.4 ([#543](#543)) ## @lynx-js/web-mainthread-apis@0.12.0 ### Patch Changes - feat: fully support MTS ([#569](#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - feat: support mts event with target methods ([#564](#564)) After this commit, developers are allowed to invoke `event.target.setStyleProperty` in mts handler - fix: crash on removing a id attribute ([#582](#582)) - Updated dependencies \[[`f1ca29b`](f1ca29b), [`7edf478`](7edf478)]: - @lynx-js/web-constants@0.12.0 - @lynx-js/web-style-transformer@0.3.0 ## @lynx-js/web-worker-runtime@0.12.0 ### Patch Changes - feat: fully support MTS ([#569](#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - Updated dependencies \[[`f1ca29b`](f1ca29b), [`8ca9fcb`](8ca9fcb), [`efe6fd7`](efe6fd7)]: - @lynx-js/web-mainthread-apis@0.12.0 - @lynx-js/web-constants@0.12.0 - @lynx-js/web-worker-rpc@0.12.0 ## @lynx-js/react-webpack-plugin@0.6.11 ### Patch Changes - feat: fully support MTS ([#569](#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx ## @lynx-js/web-webpack-plugin@0.6.5 ### Patch Changes - Updated dependencies \[[`7edf478`](7edf478)]: - @lynx-js/web-style-transformer@0.3.0 ## create-rspeedy@0.9.2 ## @lynx-js/react-alias-rsbuild-plugin@0.9.7 ## upgrade-rspeedy@0.9.2 ## @lynx-js/web-worker-rpc@0.12.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/web-core@0.12.0 ### Minor Changes - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([lynx-family#590](lynx-family#590)) **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> ### Patch Changes - feat: allow user to implement custom template load function ([lynx-family#587](lynx-family#587)) ```js lynxView.customTemplateLoader = (url) => { return (await (await fetch(url, { method: 'GET', })).json()); }; ``` - feat: support mts event with target methods ([lynx-family#564](lynx-family#564)) After this commit, developers are allowed to invoke `event.target.setStyleProperty` in mts handler - fix: crash on removing a id attribute ([lynx-family#582](lynx-family#582)) - Updated dependencies \[[`f1ca29b`](lynx-family@f1ca29b)]: - @lynx-js/web-worker-runtime@0.12.0 - @lynx-js/web-constants@0.12.0 - @lynx-js/web-worker-rpc@0.12.0 ## @lynx-js/web-elements@0.6.0 ### Minor Changes - fix: When list-type is not specified, it is treated as single formatting. ([lynx-family#535](lynx-family#535)) - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([lynx-family#590](lynx-family#590)) **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> ### Patch Changes - feat: fully support MTS ([lynx-family#569](lynx-family#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - feat: support `layoutchange` event for x-overlay-ng ([lynx-family#519](lynx-family#519)) - fix: position:fixed not work in scroll-view ([lynx-family#580](lynx-family#580)) - fix: x-list may cause error: 'Resizeobserver loop completed with undelivered notifications'. ([lynx-family#541](lynx-family#541)) - fix: refactor foldview slot offset logic ([lynx-family#575](lynx-family#575)) - fix: improve x-foldview-ng ([lynx-family#513](lynx-family#513)) - support fling for touch event driven scrolling - allow the height of `x-foldview-slot-ng` + `x-foldview-toolbar-ng` > `x-foldview-ng` - do not prevent horizontal gesture. After this commit we only allow one direction gesture for one touch (start -> end) - feat: add list with waterfall ([lynx-family#331](lynx-family#331)) ## @lynx-js/web-style-transformer@0.3.0 ### Minor Changes - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([lynx-family#590](lynx-family#590)) **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> ## @lynx-js/react@0.106.5 ### Patch Changes - Fix `lynx.loadLazyBundle` is not a function ([lynx-family#568](lynx-family#568)) - fix: flushDelayedLifecycleEvents stack overflow error ([lynx-family#540](lynx-family#540)) ## @lynx-js/rspeedy@0.9.2 ### Patch Changes - Support cli option `--no-env` to disable loading of .env files ([lynx-family#483](lynx-family#483)) - Bump Rsbuild v1.3.8 with Rspack v1.3.5. ([lynx-family#579](lynx-family#579)) ## @lynx-js/react-rsbuild-plugin@0.9.7 ### Patch Changes - Support overriding SWC configuration. ([lynx-family#563](lynx-family#563)) Now you can override configuration like `useDefineForClassFields` using `tools.swc`. ```js import { defineConfig } from "@lynx-js/rspeedy"; export default defineConfig({ tools: { swc: { jsc: { transform: { useDefineForClassFields: true, }, }, }, }, }); ``` - Updated dependencies \[[`f1ca29b`](lynx-family@f1ca29b)]: - @lynx-js/react-webpack-plugin@0.6.11 - @lynx-js/react-alias-rsbuild-plugin@0.9.7 - @lynx-js/react-refresh-webpack-plugin@0.3.2 - @lynx-js/web-webpack-plugin@0.6.5 ## @lynx-js/web-constants@0.12.0 ### Patch Changes - feat: fully support MTS ([lynx-family#569](lynx-family#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.12.0 ## @lynx-js/web-explorer@0.0.5 ### Patch Changes - fix: create a new lynx-view for lynxjs.org ([lynx-family#566](lynx-family#566)) - fix: blank screen issue for 0.0.4 ([lynx-family#543](lynx-family#543)) ## @lynx-js/web-mainthread-apis@0.12.0 ### Patch Changes - feat: fully support MTS ([lynx-family#569](lynx-family#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - feat: support mts event with target methods ([lynx-family#564](lynx-family#564)) After this commit, developers are allowed to invoke `event.target.setStyleProperty` in mts handler - fix: crash on removing a id attribute ([lynx-family#582](lynx-family#582)) - Updated dependencies \[[`f1ca29b`](lynx-family@f1ca29b), [`7edf478`](lynx-family@7edf478)]: - @lynx-js/web-constants@0.12.0 - @lynx-js/web-style-transformer@0.3.0 ## @lynx-js/web-worker-runtime@0.12.0 ### Patch Changes - feat: fully support MTS ([lynx-family#569](lynx-family#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - Updated dependencies \[[`f1ca29b`](lynx-family@f1ca29b), [`8ca9fcb`](lynx-family@8ca9fcb), [`efe6fd7`](lynx-family@efe6fd7)]: - @lynx-js/web-mainthread-apis@0.12.0 - @lynx-js/web-constants@0.12.0 - @lynx-js/web-worker-rpc@0.12.0 ## @lynx-js/react-webpack-plugin@0.6.11 ### Patch Changes - feat: fully support MTS ([lynx-family#569](lynx-family#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx ## @lynx-js/web-webpack-plugin@0.6.5 ### Patch Changes - Updated dependencies \[[`7edf478`](lynx-family@7edf478)]: - @lynx-js/web-style-transformer@0.3.0 ## create-rspeedy@0.9.2 ## @lynx-js/react-alias-rsbuild-plugin@0.9.7 ## upgrade-rspeedy@0.9.2 ## @lynx-js/web-worker-rpc@0.12.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

…ome 108 (#590) Before this commit we use toggle pattern to generate `background-clip`, `-webkit-background-clip` and `color`. After this commit we genarete these styles directly. 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.

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/web-core@0.12.0 ### Minor Changes - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([#590](#590)) **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> ### Patch Changes - feat: allow user to implement custom template load function ([#587](#587)) ```js lynxView.customTemplateLoader = (url) => { return (await (await fetch(url, { method: 'GET', })).json()); }; ``` - feat: support mts event with target methods ([#564](#564)) After this commit, developers are allowed to invoke `event.target.setStyleProperty` in mts handler - fix: crash on removing a id attribute ([#582](#582)) - Updated dependencies \[[`f1ca29b`](f1ca29b)]: - @lynx-js/web-worker-runtime@0.12.0 - @lynx-js/web-constants@0.12.0 - @lynx-js/web-worker-rpc@0.12.0 ## @lynx-js/web-elements@0.6.0 ### Minor Changes - fix: When list-type is not specified, it is treated as single formatting. ([#535](#535)) - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([#590](#590)) **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> ### Patch Changes - feat: fully support MTS ([#569](#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - feat: support `layoutchange` event for x-overlay-ng ([#519](#519)) - fix: position:fixed not work in scroll-view ([#580](#580)) - fix: x-list may cause error: 'Resizeobserver loop completed with undelivered notifications'. ([#541](#541)) - fix: refactor foldview slot offset logic ([#575](#575)) - fix: improve x-foldview-ng ([#513](#513)) - support fling for touch event driven scrolling - allow the height of `x-foldview-slot-ng` + `x-foldview-toolbar-ng` > `x-foldview-ng` - do not prevent horizontal gesture. After this commit we only allow one direction gesture for one touch (start -> end) - feat: add list with waterfall ([#331](#331)) ## @lynx-js/web-style-transformer@0.3.0 ### Minor Changes - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([#590](#590)) **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> ## @lynx-js/react@0.106.5 ### Patch Changes - Fix `lynx.loadLazyBundle` is not a function ([#568](#568)) - fix: flushDelayedLifecycleEvents stack overflow error ([#540](#540)) ## @lynx-js/rspeedy@0.9.2 ### Patch Changes - Support cli option `--no-env` to disable loading of .env files ([#483](#483)) - Bump Rsbuild v1.3.8 with Rspack v1.3.5. ([#579](#579)) ## @lynx-js/react-rsbuild-plugin@0.9.7 ### Patch Changes - Support overriding SWC configuration. ([#563](#563)) Now you can override configuration like `useDefineForClassFields` using `tools.swc`. ```js import { defineConfig } from "@lynx-js/rspeedy"; export default defineConfig({ tools: { swc: { jsc: { transform: { useDefineForClassFields: true, }, }, }, }, }); ``` - Updated dependencies \[[`f1ca29b`](f1ca29b)]: - @lynx-js/react-webpack-plugin@0.6.11 - @lynx-js/react-alias-rsbuild-plugin@0.9.7 - @lynx-js/react-refresh-webpack-plugin@0.3.2 - @lynx-js/web-webpack-plugin@0.6.5 ## @lynx-js/web-constants@0.12.0 ### Patch Changes - feat: fully support MTS ([#569](#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.12.0 ## @lynx-js/web-explorer@0.0.5 ### Patch Changes - fix: create a new lynx-view for lynxjs.org ([#566](#566)) - fix: blank screen issue for 0.0.4 ([#543](#543)) ## @lynx-js/web-mainthread-apis@0.12.0 ### Patch Changes - feat: fully support MTS ([#569](#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - feat: support mts event with target methods ([#564](#564)) After this commit, developers are allowed to invoke `event.target.setStyleProperty` in mts handler - fix: crash on removing a id attribute ([#582](#582)) - Updated dependencies \[[`f1ca29b`](f1ca29b), [`7edf478`](7edf478)]: - @lynx-js/web-constants@0.12.0 - @lynx-js/web-style-transformer@0.3.0 ## @lynx-js/web-worker-runtime@0.12.0 ### Patch Changes - feat: fully support MTS ([#569](#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - Updated dependencies \[[`f1ca29b`](f1ca29b), [`8ca9fcb`](8ca9fcb), [`efe6fd7`](efe6fd7)]: - @lynx-js/web-mainthread-apis@0.12.0 - @lynx-js/web-constants@0.12.0 - @lynx-js/web-worker-rpc@0.12.0 ## @lynx-js/react-webpack-plugin@0.6.11 ### Patch Changes - feat: fully support MTS ([#569](#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx ## @lynx-js/web-webpack-plugin@0.6.5 ### Patch Changes - Updated dependencies \[[`7edf478`](7edf478)]: - @lynx-js/web-style-transformer@0.3.0 ## create-rspeedy@0.9.2 ## @lynx-js/react-alias-rsbuild-plugin@0.9.7 ## upgrade-rspeedy@0.9.2 ## @lynx-js/web-worker-rpc@0.12.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

…ome 108 (lynx-family#590) Before this commit we use toggle pattern to generate `background-clip`, `-webkit-background-clip` and `color`. After this commit we genarete these styles directly. 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.

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/web-core@0.12.0 ### Minor Changes - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([lynx-family#590](lynx-family#590)) **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> ### Patch Changes - feat: allow user to implement custom template load function ([lynx-family#587](lynx-family#587)) ```js lynxView.customTemplateLoader = (url) => { return (await (await fetch(url, { method: 'GET', })).json()); }; ``` - feat: support mts event with target methods ([#564](lynx-family#564)) After this commit, developers are allowed to invoke `event.target.setStyleProperty` in mts handler - fix: crash on removing a id attribute ([lynx-family#582](lynx-family#582)) - Updated dependencies \[[`f1ca29b`](lynx-family@f1ca29b)]: - @lynx-js/web-worker-runtime@0.12.0 - @lynx-js/web-constants@0.12.0 - @lynx-js/web-worker-rpc@0.12.0 ## @lynx-js/web-elements@0.6.0 ### Minor Changes - fix: When list-type is not specified, it is treated as single formatting. ([#535](lynx-family#535)) - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([lynx-family#590](lynx-family#590)) **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> ### Patch Changes - feat: fully support MTS ([#569](lynx-family#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - feat: support `layoutchange` event for x-overlay-ng ([#519](lynx-family#519)) - fix: position:fixed not work in scroll-view ([lynx-family#580](lynx-family#580)) - fix: x-list may cause error: 'Resizeobserver loop completed with undelivered notifications'. ([#541](lynx-family#541)) - fix: refactor foldview slot offset logic ([lynx-family#575](lynx-family#575)) - fix: improve x-foldview-ng ([#513](lynx-family#513)) - support fling for touch event driven scrolling - allow the height of `x-foldview-slot-ng` + `x-foldview-toolbar-ng` > `x-foldview-ng` - do not prevent horizontal gesture. After this commit we only allow one direction gesture for one touch (start -> end) - feat: add list with waterfall ([#331](lynx-family#331)) ## @lynx-js/web-style-transformer@0.3.0 ### Minor Changes - feat: improve compatibility for chrome 108 & support linear-gradient for nested x-text ([lynx-family#590](lynx-family#590)) **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> ## @lynx-js/react@0.106.5 ### Patch Changes - Fix `lynx.loadLazyBundle` is not a function ([#568](lynx-family#568)) - fix: flushDelayedLifecycleEvents stack overflow error ([#540](lynx-family#540)) ## @lynx-js/rspeedy@0.9.2 ### Patch Changes - Support cli option `--no-env` to disable loading of .env files ([#483](lynx-family#483)) - Bump Rsbuild v1.3.8 with Rspack v1.3.5. ([lynx-family#579](lynx-family#579)) ## @lynx-js/react-rsbuild-plugin@0.9.7 ### Patch Changes - Support overriding SWC configuration. ([#563](lynx-family#563)) Now you can override configuration like `useDefineForClassFields` using `tools.swc`. ```js import { defineConfig } from "@lynx-js/rspeedy"; export default defineConfig({ tools: { swc: { jsc: { transform: { useDefineForClassFields: true, }, }, }, }, }); ``` - Updated dependencies \[[`f1ca29b`](lynx-family@f1ca29b)]: - @lynx-js/react-webpack-plugin@0.6.11 - @lynx-js/react-alias-rsbuild-plugin@0.9.7 - @lynx-js/react-refresh-webpack-plugin@0.3.2 - @lynx-js/web-webpack-plugin@0.6.5 ## @lynx-js/web-constants@0.12.0 ### Patch Changes - feat: fully support MTS ([#569](lynx-family#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - Updated dependencies \[]: - @lynx-js/web-worker-rpc@0.12.0 ## @lynx-js/web-explorer@0.0.5 ### Patch Changes - fix: create a new lynx-view for lynxjs.org ([#566](lynx-family#566)) - fix: blank screen issue for 0.0.4 ([#543](lynx-family#543)) ## @lynx-js/web-mainthread-apis@0.12.0 ### Patch Changes - feat: fully support MTS ([#569](lynx-family#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - feat: support mts event with target methods ([#564](lynx-family#564)) After this commit, developers are allowed to invoke `event.target.setStyleProperty` in mts handler - fix: crash on removing a id attribute ([lynx-family#582](lynx-family#582)) - Updated dependencies \[[`f1ca29b`](lynx-family@f1ca29b), [`7edf478`](lynx-family@7edf478)]: - @lynx-js/web-constants@0.12.0 - @lynx-js/web-style-transformer@0.3.0 ## @lynx-js/web-worker-runtime@0.12.0 ### Patch Changes - feat: fully support MTS ([#569](lynx-family#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx - Updated dependencies \[[`f1ca29b`](lynx-family@f1ca29b), [`8ca9fcb`](lynx-family@8ca9fcb), [`efe6fd7`](lynx-family@efe6fd7)]: - @lynx-js/web-mainthread-apis@0.12.0 - @lynx-js/web-constants@0.12.0 - @lynx-js/web-worker-rpc@0.12.0 ## @lynx-js/react-webpack-plugin@0.6.11 ### Patch Changes - feat: fully support MTS ([#569](lynx-family#569)) Now use support the following usage - mainthread event - mainthread ref - runOnMainThread/runOnBackground - ref.current.xx ## @lynx-js/web-webpack-plugin@0.6.5 ### Patch Changes - Updated dependencies \[[`7edf478`](lynx-family@7edf478)]: - @lynx-js/web-style-transformer@0.3.0 ## create-rspeedy@0.9.2 ## @lynx-js/react-alias-rsbuild-plugin@0.9.7 ## upgrade-rspeedy@0.9.2 ## @lynx-js/web-worker-rpc@0.12.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

PupilTong added the platform:Web label Apr 18, 2025

PupilTong requested review from Sherry-hue and Copilot April 18, 2025 06:17

PupilTong self-assigned this Apr 18, 2025

PupilTong added this to Lynx for Web Apr 18, 2025

Copilot AI reviewed Apr 18, 2025

View reviewed changes

PupilTong added 2 commits April 18, 2025 15:27

support x-text > x-text

3029be6

PupilTong force-pushed the p/hw/fix-chrome-108-gradient branch from 67203c0 to a60a489 Compare April 18, 2025 07:27

fix

b9f45ef

PupilTong force-pushed the p/hw/fix-chrome-108-gradient branch from a60a489 to b9f45ef Compare April 18, 2025 07:29

PupilTong added 2 commits April 18, 2025 16:06

add tests

aec221e

fix tests

d608730

Sherry-hue approved these changes Apr 18, 2025

View reviewed changes

PupilTong added this pull request to the merge queue Apr 18, 2025

Merged via the queue into lynx-family:main with commit 7edf478 Apr 18, 2025
26 checks passed

PupilTong deleted the p/hw/fix-chrome-108-gradient branch April 18, 2025 09:01

github-project-automation bot moved this to Done in Lynx for Web Apr 18, 2025

github-actions bot mentioned this pull request Apr 18, 2025

chore: Release 2025-04-18 10:59:22 #536

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: improve compatibility for text linear-gradient color on chrome 108#590

refactor: improve compatibility for text linear-gradient color on chrome 108#590
PupilTong merged 5 commits intolynx-family:mainfrom
PupilTong:p/hw/fix-chrome-108-gradient

PupilTong commented Apr 18, 2025

Uh oh!

changeset-bot bot commented Apr 18, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

codecov bot commented Apr 18, 2025 •

edited

Loading

Assets Changed:

Uh oh!

codspeed-hq bot commented Apr 18, 2025 •

edited

Loading

Uh oh!

codecov bot commented Apr 18, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

PupilTong commented Apr 18, 2025

Uh oh!

changeset-bot bot commented Apr 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

codecov bot commented Apr 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

codspeed-hq bot commented Apr 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #590 will not alter performance

Summary

Uh oh!

codecov bot commented Apr 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 1 Tests Failed:

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Apr 18, 2025 •

edited

Loading

codecov bot commented Apr 18, 2025 •

edited

Loading

codspeed-hq bot commented Apr 18, 2025 •

edited

Loading

codecov bot commented Apr 18, 2025 •

edited

Loading