Skip to content

Commit

Permalink
fix(sfc/cssVars): fix loss of CSS v-bind variables when setting inlin…
Browse files Browse the repository at this point in the history
…e style with string value (#9824)

close #9821
  • Loading branch information
Alfred-Skyblue authored Dec 15, 2023
1 parent a6503e3 commit 0a387df
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 0 deletions.
31 changes: 31 additions & 0 deletions packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -293,4 +293,35 @@ describe('useCssVars', () => {
await nextTick()
expect(target.children.length).toBe(0)
})

test('with string style', async () => {
document.body.innerHTML = ''
const state = reactive({ color: 'red' })
const root = document.createElement('div')
const disabled = ref(false)

const App = {
setup() {
useCssVars(() => state)
return () => [
h(
'div',
{ style: disabled.value ? 'pointer-events: none' : undefined },
'foo'
)
]
}
}
render(h(App), root)
await nextTick()
for (const c of [].slice.call(root.children as any)) {
expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
}
disabled.value = true
await nextTick()

for (const c of [].slice.call(root.children as any)) {
expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
}
})
})
4 changes: 4 additions & 0 deletions packages/runtime-dom/src/helpers/useCssVars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
} from '@vue/runtime-core'
import { ShapeFlags } from '@vue/shared'

export const CSS_VAR_TEXT = Symbol(__DEV__ ? 'CSS_VAR_TEXT' : '')
/**
* Runtime helper for SFC's CSS variable injection feature.
* @private
Expand Down Expand Up @@ -79,8 +80,11 @@ function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
function setVarsOnNode(el: Node, vars: Record<string, string>) {
if (el.nodeType === 1) {
const style = (el as HTMLElement).style
let cssText = ''
for (const key in vars) {
style.setProperty(`--${key}`, vars[key])
cssText += `--${key}: ${vars[key]};`
}
;(style as any)[CSS_VAR_TEXT] = cssText
}
}
6 changes: 6 additions & 0 deletions packages/runtime-dom/src/modules/style.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { isString, hyphenate, capitalize, isArray } from '@vue/shared'
import { camelize, warn } from '@vue/runtime-core'
import { vShowOldKey } from '../directives/vShow'
import { CSS_VAR_TEXT } from '../helpers/useCssVars'

type Style = string | Record<string, string | string[]> | null

Expand All @@ -22,6 +23,11 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
const currentDisplay = style.display
if (isCssString) {
if (prev !== next) {
// #9821
const cssVarText = (style as any)[CSS_VAR_TEXT]
if (cssVarText) {
;(next as string) += ';' + cssVarText
}
style.cssText = next as string
}
} else if (prev) {
Expand Down

0 comments on commit 0a387df

Please sign in to comment.