Skip to content

Commit

Permalink
fix(runtime-dom): style binding multi value support
Browse files Browse the repository at this point in the history
fix #1759
  • Loading branch information
yyx990803 committed Aug 3, 2020
1 parent f6afe70 commit 0cd98c3
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 16 deletions.
12 changes: 12 additions & 0 deletions packages/runtime-dom/__tests__/patchStyle.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ describe(`runtime-dom: style patching`, () => {
const store: any = {}
return {
style: {
display: '',
WebkitTransition: '',
setProperty(key: string, val: string) {
store[key] = val
Expand All @@ -96,4 +97,15 @@ describe(`runtime-dom: style patching`, () => {
patchProp(el as any, 'style', {}, { transition: 'all 1s' })
expect(el.style.WebkitTransition).toBe('all 1s')
})

it('multiple values', () => {
const el = mockElementWithStyle()
patchProp(
el as any,
'style',
{},
{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }
)
expect(el.style.display).toBe('flex')
})
})
40 changes: 24 additions & 16 deletions packages/runtime-dom/src/modules/style.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { isString, hyphenate, capitalize } from '@vue/shared'
import { isString, hyphenate, capitalize, isArray } from '@vue/shared'
import { camelize } from '@vue/runtime-core'

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

export function patchStyle(el: Element, prev: Style, next: Style) {
const style = (el as HTMLElement).style
Expand All @@ -13,7 +13,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
}
} else {
for (const key in next) {
setStyle(style, key, next[key] as string)
setStyle(style, key, next[key])
}
if (prev && !isString(prev)) {
for (const key in prev) {
Expand All @@ -27,21 +27,29 @@ export function patchStyle(el: Element, prev: Style, next: Style) {

const importantRE = /\s*!important$/

function setStyle(style: CSSStyleDeclaration, name: string, val: string) {
if (name.startsWith('--')) {
// custom property definition
style.setProperty(name, val)
function setStyle(
style: CSSStyleDeclaration,
name: string,
val: string | string[]
) {
if (isArray(val)) {
val.forEach(v => setStyle(style, name, v))
} else {
const prefixed = autoPrefix(style, name)
if (importantRE.test(val)) {
// !important
style.setProperty(
hyphenate(prefixed),
val.replace(importantRE, ''),
'important'
)
if (name.startsWith('--')) {
// custom property definition
style.setProperty(name, val)
} else {
style[prefixed as any] = val
const prefixed = autoPrefix(style, name)
if (importantRE.test(val)) {
// !important
style.setProperty(
hyphenate(prefixed),
val.replace(importantRE, ''),
'important'
)
} else {
style[prefixed as any] = val
}
}
}
}
Expand Down

0 comments on commit 0cd98c3

Please sign in to comment.