Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(useCssVars): fix the loss of CSS variables during updates #9824

Merged
merged 5 commits into from
Dec 15, 2023

Conversation

Alfred-Skyblue
Copy link
Member

fixed #9821

During the patchStyle process, if a string type is passed, it will overwrite the entire cssText, leading to the loss of the useCssVars variable. In useCssVars, I store CSS variables in a private property of the style, which is then collectively set to cssText during the patchStyle process.

I attempted to use a MutationObserver to monitor style changes in all child elements. However, in the scenario where we also need to listen to the childList of the parentNode, I had to add another MutationObserver within the parentNode's observer to simultaneously monitor newly added child elements. This approach introduces complexity to the logic, so I opted for the current solution.

Copy link

github-actions bot commented Dec 13, 2023

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 87 kB (+98 B) 33.1 kB (+34 B) 29.9 kB (+48 B)
vue.global.prod.js 133 kB (+98 B) 50 kB (+58 B) 44.8 kB (+55 B)

Usages

Name Size Gzip Brotli
createApp 48.4 kB (+53 B) 19 kB (+19 B) 17.4 kB (+71 B)
createSSRApp 51.6 kB (+53 B) 20.3 kB (+22 B) 18.5 kB (+25 B)
defineCustomElement 50.7 kB (+53 B) 19.8 kB (+24 B) 18.1 kB (-6 B)
overall 61.7 kB (+53 B) 23.9 kB (+22 B) 21.8 kB (+20 B)

Copy link

codspeed-hq bot commented Dec 13, 2023

CodSpeed Performance Report

Merging #9824 will not alter performance

Comparing Alfred-Skyblue:fix/useCssVars (6f9d871) with main (a6503e3)

Summary

✅ 53 untouched benchmarks

@edison1105 edison1105 added the ready for review This PR requires more reviews label Dec 14, 2023
// #9821
let cssVarText = (style as any)[CSS_VAR_TEXT]
if (cssVarText) {
cssVarText = (next.endsWith(';') ? '' : '; ') + cssVarText
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All mainstream browsers are able to handle extra ; between properties in inline style, so we can just do ;(next as string) += ';' + cssVarText and make cssVarText a const.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have already made the modifications, thank you for your guidance.

@yyx990803 yyx990803 merged commit 0a387df into vuejs:main Dec 15, 2023
13 checks passed
@Alfred-Skyblue Alfred-Skyblue deleted the fix/useCssVars branch December 15, 2023 01:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready for review This PR requires more reviews
Projects
None yet
Development

Successfully merging this pull request may close these issues.

custom properties from CSS v-bind are not re-added when inline style is patched
4 participants