feat(runtime-dom): support !important for patchStyle. (#422)

packages/runtime-dom/__tests__/modules/style.spec.ts

@@ -0,0 +1,48 @@
+import { patchStyle } from '../../src/modules/style'
+
+describe(`module style`, () => {
+  it('string', () => {
+    const el = document.createElement('div')
+    patchStyle(el, {}, 'color:red')
+    expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
+  })
+
+  it('plain object', () => {
+    const el = document.createElement('div')
+    patchStyle(el, {}, { color: 'red' })
+    expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
+  })
+
+  it('camelCase', () => {
+    const el = document.createElement('div')
+    patchStyle(el, {}, { marginRight: '10px' })
+    expect(el.style.cssText.replace(/\s/g, '')).toBe('margin-right:10px;')
+  })
+
+  it('remove if falsy value', () => {
+    const el = document.createElement('div')
+    patchStyle(el, { color: 'red' }, { color: null })
+    expect(el.style.cssText.replace(/\s/g, '')).toBe('')
+  })
+
+  it('!important', () => {
+    const el = document.createElement('div')
+    patchStyle(el, {}, { color: 'red !important' })
+    expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red!important;')
+  })
+
+  it('camelCase with !important', () => {
+    const el = document.createElement('div')
+    patchStyle(el, {}, { marginRight: '10px !important' })
+    expect(el.style.cssText.replace(/\s/g, '')).toBe(
+      'margin-right:10px!important;'
+    )
+  })
+
+  it('object with multiple entries', () => {
+    const el = document.createElement('div')
+    patchStyle(el, {}, { color: 'red', marginRight: '10px' })
+    expect(el.style.getPropertyValue('color')).toBe('red')
+    expect(el.style.getPropertyValue('margin-right')).toBe('10px')
+  })
+})

packages/runtime-dom/src/modules/style.ts

@@ -1,4 +1,4 @@
-import { isString } from '@vue/shared'
+import { isString, hyphenate } from '@vue/shared'
 
 type Style = string | Partial<CSSStyleDeclaration> | null
 
@@ -10,14 +10,31 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
     style.cssText = next
   } else {
     for (const key in next) {
-      style[key] = next[key] as string
+      setStyle(style, key, next[key] as string)
     }
     if (prev && !isString(prev)) {
       for (const key in prev) {
         if (!next[key]) {
-          style[key] = ''
+          setStyle(style, key, '')
         }
       }
     }
   }
 }
+
+const importantRE = /\s*!important$/
+
+function setStyle(style: CSSStyleDeclaration, name: string, val: string) {
+  let rawName = hyphenate(name)
+  if (importantRE.test(val)) {
+    style.setProperty(rawName, val.replace(importantRE, ''), 'important')
+  } else {
+    /**
+     * TODO:
+     * 1. support values array created by autoprefixer.
+     * 2. support css variable, maybe should import 'csstype'.
+     *    similar to https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1450
+     */
+    style.setProperty(rawName, val)
+  }
+}