chore: fix setStyle and tests

packages/runtime-vapor/__tests__/dom/prop.spec.ts

@@ -9,7 +9,7 @@ import {
   setText,
   setValue,
 } from '../../src/dom/prop'
-import { setStyle } from '../../src/dom/style'
+import { setStyle } from '../../src/dom/prop'
 import { VaporComponentInstance } from '../../src/component'
 import { currentInstance, simpleSetCurrentInstance } from '@vue/runtime-dom'
 
@@ -42,87 +42,83 @@ describe('patchProp', () => {
   describe('setStyle', () => {
     test('should set style', () => {
       const el = document.createElement('div')
-      setStyle(el, '', 'color: red')
+      setStyle(el, 'color: red')
       expect(el.style.cssText).toBe('color: red;')
     })
 
     test('should work with camelCase', () => {
       const el = document.createElement('div')
-      setStyle(el, null, { fontSize: '12px' })
+      setStyle(el, { fontSize: '12px' })
       expect(el.style.cssText).toBe('font-size: 12px;')
     })
 
     test('shoud set style with object and array property', () => {
       const el = document.createElement('div')
-      let prev: any
-      prev = setStyle(el, prev, { color: 'red' })
+      setStyle(el, { color: 'red' })
       expect(el.style.cssText).toBe('color: red;')
-      setStyle(el, prev, [{ color: 'blue' }, { fontSize: '12px' }])
+      setStyle(el, [{ color: 'blue' }, { fontSize: '12px' }])
       expect(el.style.cssText).toBe('color: blue; font-size: 12px;')
     })
 
     test('should remove if falsy value', () => {
       const el = document.createElement('div')
-      let prev
-      prev = setStyle(el, prev, { color: undefined, borderRadius: null })
+      setStyle(el, { color: undefined, borderRadius: null })
       expect(el.style.cssText).toBe('')
-      prev = setStyle(el, prev, { color: 'red' })
+      setStyle(el, { color: 'red' })
       expect(el.style.cssText).toBe('color: red;')
-      setStyle(el, prev, { color: undefined, borderRadius: null })
+      setStyle(el, { color: undefined, borderRadius: null })
       expect(el.style.cssText).toBe('')
     })
 
     test('should work with !important', () => {
       const el = document.createElement('div')
-      setStyle(el, null, { color: 'red !important' })
+      setStyle(el, { color: 'red !important' })
       expect(el.style.cssText).toBe('color: red !important;')
     })
 
     test('should work with camelCase and !important', () => {
       const el = document.createElement('div')
-      setStyle(el, null, { fontSize: '12px !important' })
+      setStyle(el, { fontSize: '12px !important' })
       expect(el.style.cssText).toBe('font-size: 12px !important;')
     })
 
     test('should work with multiple entries', () => {
       const el = document.createElement('div')
-      setStyle(el, null, { color: 'red', marginRight: '10px' })
+      setStyle(el, { color: 'red', marginRight: '10px' })
       expect(el.style.getPropertyValue('color')).toBe('red')
       expect(el.style.getPropertyValue('margin-right')).toBe('10px')
     })
 
     test('should patch with falsy style value', () => {
       const el = document.createElement('div')
-      let prev: any
-      prev = setStyle(el, prev, { width: '100px' })
+      setStyle(el, { width: '100px' })
       expect(el.style.cssText).toBe('width: 100px;')
-      prev = setStyle(el, prev, { width: 0 })
+      setStyle(el, { width: 0 })
       expect(el.style.cssText).toBe('width: 0px;')
     })
 
     test('should remove style attribute on falsy value', () => {
       const el = document.createElement('div')
-      let prev: any
-      prev = setStyle(el, prev, { width: '100px' })
+      setStyle(el, { width: '100px' })
       expect(el.style.cssText).toBe('width: 100px;')
-      prev = setStyle(el, prev, { width: undefined })
+      setStyle(el, { width: undefined })
       expect(el.style.cssText).toBe('')
 
-      prev = setStyle(el, prev, { width: '100px' })
+      setStyle(el, { width: '100px' })
       expect(el.style.cssText).toBe('width: 100px;')
-      setStyle(el, prev, null)
+      setStyle(el, null)
       expect(el.hasAttribute('style')).toBe(false)
       expect(el.style.cssText).toBe('')
     })
 
     test('should warn for trailing semicolons', () => {
       const el = document.createElement('div')
-      setStyle(el, null, { color: 'red;' })
+      setStyle(el, { color: 'red;' })
       expect(
         `Unexpected semicolon at the end of 'color' style value: 'red;'`,
       ).toHaveBeenWarned()
 
-      setStyle(el, null, { '--custom': '100; ' })
+      setStyle(el, { '--custom': '100; ' })
       expect(
         `Unexpected semicolon at the end of '--custom' style value: '100; '`,
       ).toHaveBeenWarned()
@@ -130,13 +126,13 @@ describe('patchProp', () => {
 
     test('should not warn for trailing semicolons', () => {
       const el = document.createElement('div')
-      setStyle(el, null, { '--custom': '100\\;' })
+      setStyle(el, { '--custom': '100\\;' })
       expect(el.style.getPropertyValue('--custom')).toBe('100\\;')
     })
 
     test('should work with shorthand properties', () => {
       const el = document.createElement('div')
-      setStyle(el, null, {
+      setStyle(el, {
         borderBottom: '1px solid red',
         border: '1px solid green',
       })
@@ -164,25 +160,29 @@ describe('patchProp', () => {
 
     test('should work with css custom properties', () => {
       const el = mockElementWithStyle()
-      setStyle(el as any, null, { '--theme': 'red' })
+      setStyle(el as any, { '--theme': 'red' })
       expect(el.style.getPropertyValue('--theme')).toBe('red')
     })
 
     test('should auto vendor prefixing', () => {
       const el = mockElementWithStyle()
-      setStyle(el as any, null, { transition: 'all 1s' })
+      setStyle(el as any, { transition: 'all 1s' })
       expect(el.style.WebkitTransition).toBe('all 1s')
     })
 
     test('should work with multiple values', () => {
       const el = mockElementWithStyle()
-      setStyle(el as any, null, {
+      setStyle(el as any, {
         display: ['-webkit-box', '-ms-flexbox', 'flex'],
       })
       expect(el.style.display).toBe('flex')
     })
   })
 
+  describe.todo('setClassIncremental', () => {})
+
+  describe.todo('setStyleIncremental', () => {})
+
   describe('setAttr', () => {
     test('should set attribute', () => {
       const el = document.createElement('div')

packages/runtime-vapor/src/dom/prop.ts

@@ -9,19 +9,14 @@ import {
   toDisplayString,
 } from '@vue/shared'
 import { on } from './event'
-import {
-  mergeProps,
-  patchStyle as setStyle,
-  shouldSetAsProp,
-  warn,
-} from '@vue/runtime-dom'
+import { mergeProps, patchStyle, shouldSetAsProp, warn } from '@vue/runtime-dom'
 
 type TargetElement = Element & {
   $html?: string
   $cls?: string
   $clsi?: string
-  $sty?: NormalizedStyle
-  $styi?: NormalizedStyle
+  $sty?: NormalizedStyle | string | undefined
+  $styi?: NormalizedStyle | undefined
   $dprops?: Record<string, any>
 }
 
@@ -67,10 +62,11 @@ export function setClassIncremental(el: TargetElement, value: any): void {
   }
 }
 
-/**
- * Reuse from runtime-dom
- */
-export { setStyle }
+export function setStyle(el: TargetElement, value: any): void {
+  const prev = el.$sty
+  value = el.$sty = normalizeStyle(value)
+  patchStyle(el, prev, value)
+}
 
 /**
  * A version of setStyle that does not overwrite pre-existing styles.
@@ -81,8 +77,8 @@ export function setStyleIncremental(el: TargetElement, value: any): void {
   const prev = el.$styi
   value = el.$styi = isString(value)
     ? parseStringStyle(value)
-    : ((normalizeStyle(value) || {}) as NormalizedStyle)
-  setStyle(el, prev, value)
+    : (normalizeStyle(value) as NormalizedStyle | undefined)
+  patchStyle(el, prev, value)
 }
 
 export function setAttr(el: any, key: string, value: any): void {
@@ -218,7 +214,7 @@ export function setDynamicProp(
     if (root) {
       setStyleIncremental(el, value)
     } else {
-      setStyle(el, prev, value)
+      setStyle(el, value)
     }
   } else if (isOn(key)) {
     on(el, key[2].toLowerCase() + key.slice(3), () => value, { effect: true })