@tarojs/plugin-platform-harmony-ets 4.0.0-beta.11 → 4.0.0-beta.13

package/dist/apis/base/system.ts

@@ -1,25 +1,42 @@
+import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant'
 // 设备信息,从 API Version 6 开始支持
 import deviceInfo from '@ohos.deviceInfo'
 // 显示设备属性,从 API Version 7 开始支持
 import _display from '@ohos.display'
 // 从 API Version 7 开始支持
 import i18n from '@ohos.i18n'
-// 设备信息 从API Version 6开始，该接口不再维护，推荐使用新接口'@ohos.deviceInfo'进行设备信息查询
-import deviceMethod from '@system.device'
 
 import { callAsyncFail, callAsyncSuccess } from '../utils'
 
 import type Taro from '@tarojs/taro/types'
 
-const display = _display.getDefaultDisplaySync()
-
-let device
+let display
+let safeArea: TaroGeneral.SafeAreaResult | null = null
+try {
+  display = _display.getDefaultDisplaySync()
+  // @ts-ignore
+  display.getCutoutInfo((err, { boundingRects = [], waterfallDisplayAreaRects = {} }: _display.CutoutInfo = {}) => {
+    if (err?.code) {
+      console.error('Failed to get cutout info', JSON.stringify(err))
+      return
+    }
 
-deviceMethod.getInfo({
-  success: data => {
-    device = data
-  }
-})
+    const top = Math.max(...boundingRects.map(rect => rect.top * 2 + rect.height), waterfallDisplayAreaRects.top?.top + waterfallDisplayAreaRects.top?.height)
+    const bottom = (waterfallDisplayAreaRects.bottom?.top + waterfallDisplayAreaRects.bottom?.height) || display.height
+    const left = waterfallDisplayAreaRects.left?.left + waterfallDisplayAreaRects.left?.width
+    const right = (waterfallDisplayAreaRects.right?.left + waterfallDisplayAreaRects.right?.width) || display.width
+    safeArea = {
+      top,
+      bottom,
+      left,
+      right,
+      height: bottom - top,
+      width: right - left,
+    }
+  })
+} catch (e) {
+  console.error('Failed to get display', e)
+}
 
 /* 同步版本 */
 export const getSystemInfoSync: typeof Taro.getSystemInfoSync = function () {
@@ -32,7 +49,7 @@ export const getSystemInfoSync: typeof Taro.getSystemInfoSync = function () {
   res.cameraAuthorized = null // 允许使用摄像头的开关 boolean
   res.enableDebug = null // 是否已打开调试 boolean
   res.fontSizeSetting = null // 用户字体大小（单位px） number
-  res.language = i18n && i18n.getSystemLanguage && i18n.getSystemLanguage() // string
+  res.language = i18n?.getSystemLanguage?.() // string
   res.locationAuthorized = null // 定位的开关 boolean
   res.locationEnabled = null // 地理位置的系统开关 boolean
   res.microphoneAuthorized = null // 麦克风的开关 boolean
@@ -43,17 +60,18 @@ export const getSystemInfoSync: typeof Taro.getSystemInfoSync = function () {
   res.notificationSoundAuthorized = false // 通知带有声音的开关（仅 iOS 有效）boolean
   res.phoneCalendarAuthorized = null // 使用日历的开关 boolean
   res.wifiEnabled = false // Wi-Fi 的系统开关 boolean
-  res.pixelRatio = null // 设备像素比,number
-  res.platform = 'android' // 客户端平台 string
-  res.safeArea = null // 在竖屏正方向下的安全区域 General.SafeAreaResult
-  res.screenHeight = display && display.height // 屏幕高度，单位px number
-  res.screenWidth = display && display.width // 屏幕宽度，单位px number
-  res.statusBarHeight = null // 状态栏的高度，单位px number
-  res.system = deviceInfo && deviceInfo.osFullName // 操作系统及版本 string
-  res.theme = null // 系统当前主题，取值为light或dark 'light' | 'dark'
-  res.windowWidth = device && device.windowWidth // 可使用窗口宽度，单位px number
-  res.windowHeight = device && device.windowHeight // 可使用窗口高度，单位px number
-  res.version = deviceInfo && deviceInfo.displayVersion // 版本号 string
+  res.pixelRatio = display && (Math.round(display.xDPI / display.width * 100) / 100) // 设备像素比,number
+  res.platform = 'harmony' // 客户端平台 string
+  res.safeArea = safeArea // 在竖屏正方向下的安全区域 General.SafeAreaResult
+  res.screenHeight = display?.height // 屏幕高度，单位px number
+  res.screenWidth = display?.width // 屏幕宽度，单位px number
+  res.statusBarHeight = safeArea?.top // 状态栏的高度，单位px number
+  res.system = deviceInfo?.osFullName // 操作系统及版本 string
+  // Note: 更新配置时才能记录
+  res.theme = AppStorage.get('__TARO_APP_CONFIG')?.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK ? 'dark' : 'light' // 系统当前主题，取值为light或dark 'light' | 'dark'
+  res.windowHeight = display?.height // 可使用窗口高度，单位px number
+  res.windowWidth = display?.width // 可使用窗口宽度，单位px number
+  res.version = deviceInfo?.displayVersion // 版本号 string
 
   return res
 }

package/dist/apis/framework/index.ts

@@ -1,5 +1,3 @@
-import { Current } from '@tarojs/runtime'
-
 import { temporarilyNotSupport } from '../utils'
 
 export const ENV_TYPE = {
@@ -19,12 +17,10 @@ export function getEnv () {
   return ENV_TYPE.HARMONY
 }
 
-export { Current }
-
 // TODO
 export const getCurrentPages = () => []
 
-export const getCurrentInstance = () => Current
+export { Current, getCurrentInstance } from '@tarojs/runtime'
 
 export const requirePlugin = temporarilyNotSupport('requirePlugin')
 

package/dist/apis/index.ts

@@ -33,7 +33,7 @@ const defaultUnitPrecision = 5
 const defaultTargetUnit = 'vp'
 
 export function getApp () {
-  return Current.app
+  return Current.app || {}
 }
 
 export function initPxTransform ({

package/dist/components-harmony-ets/checkbox.ets

@@ -2,7 +2,7 @@ import { createTaroEvent, eventHandler, getComponentEventCallback, AREA_CHANGE_E
 
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroAny, TaroEvent, TaroCheckboxElement, TaroCheckboxGroupElement } from '@tarojs/runtime'
@@ -60,7 +60,7 @@ export struct TaroCheckbox {
                   this.node.updateComponent()
                 } else {
                   this.node.updateCheckedValue(value)
-      
+
                   if (value) {
                     const event: TaroEvent = createTaroEvent('change', { detail: { value: this.node?._attrs.value } }, this.node)
                     eventHandler(event, 'change', this.node)

package/dist/components-harmony-ets/form.ets

@@ -3,7 +3,7 @@ import { AREA_CHANGE_EVENT_NAME, eventHandler, getComponentEventCallback, VISIBL
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroAny, TaroFormElement } from '@tarojs/runtime'

package/dist/components-harmony-ets/label.ets

@@ -3,7 +3,7 @@ import { Current, eventHandler, getComponentEventCallback, VISIBLE_CHANGE_EVENT_
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroLabelElement, TaroElement, TaroAny, TaroRadioElement, TaroCheckboxElement } from '@tarojs/runtime'

package/dist/components-harmony-ets/movableArea.ets

@@ -2,7 +2,7 @@ import type { TaroMovableAreaElement, TaroStyleType } from '@tarojs/runtime'
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { getNormalAttributes } from './utils/helper'
 
 

package/dist/components-harmony-ets/movableView.ets

@@ -3,7 +3,7 @@ import type { TaroMovableViewElement, TaroStyleType } from '@tarojs/runtime'
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { getNormalAttributes, } from './utils/helper'
 @Extend(Row)
 function rowAttrs(style: TaroStyleType) {

package/dist/components-harmony-ets/picker.ets

@@ -3,7 +3,7 @@ import { createLazyChildren } from './render'
 import commonStyleModify from './style'
 import { getSingleSelector, getMultiSelector } from './utils'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { getNormalAttributes, shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroAny, TaroEvent } from '@tarojs/runtime'
@@ -238,8 +238,8 @@ export default struct TaroPicker {
           break
         case 'time': {
           const hour = new Date().getHours()
-          const minute = new Date().getMinutes() 
-  
+          const minute = new Date().getMinutes()
+
           defaultResetValue = `${('00'+hour).slice(-2)}:${('00'+minute).slice(-2)}`
           break
         }
@@ -248,7 +248,7 @@ export default struct TaroPicker {
           const day = data[1]
           const month = data[0]
           const year = data[2]
-  
+
           defaultResetValue = `${year}-${month}-${day}`
           break
         }
@@ -256,7 +256,7 @@ export default struct TaroPicker {
           defaultResetValue = ''
           break
       }
-  
+
       this.node._isInit = true
       this.node._reset = this.node.value || defaultResetValue
     }

package/dist/components-harmony-ets/pseudo.ets

@@ -0,0 +1,72 @@
+import { getFontAttributes, getStyle } from './utils/helper'
+import { pseudoModify } from './style'
+import { createLazyChildren } from './render'
+
+import type { TaroViewElement, TaroStyleType, TaroTextStyleType } from '@tarojs/runtime'
+
+@Extend(Stack)
+function stackAttrs (style: TaroStyleType) {
+  .constraintSize({
+    minWidth: style.minWidth,
+    maxWidth: style.maxWidth,
+    minHeight: style.minHeight || style.height,
+    maxHeight: style.maxHeight
+  })
+}
+
+
+@Extend(Text)
+function textNormalFontStyle (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .opacity(style.opacity)
+  .fontColor(style.color)
+  .fontSize(style.fontSize)
+  .fontWeight(style.fontWeight)
+  .fontStyle(style.fontStyle)
+  .fontFamily(style.fontFamily)
+  .lineHeight(style.lineHeight)
+  .decoration({
+    type: style.textDecoration,
+    color: style.color
+  })
+}
+
+@Extend(Text)
+function textSpecialFontStyle(attr: TaroTextStyleType) {
+  .textAlign(attr.textAlign)
+  .textOverflow(attr.textOverflow)
+  .maxLines(attr.WebkitLineClamp)
+  .letterSpacing(attr.letterSpacing)
+}
+
+@Builder
+export default function PseduoChildren (node: TaroViewElement) {
+  // 伪类::Before
+  if (node.pseudo_before) {
+    if (node.pseudo_before.content) {
+      Text(node.pseudo_before.content)
+        .attributeModifier(pseudoModify.setStyle(node.pseudo_before))
+        .textNormalFontStyle(getStyle(node.pseudo_before || {}))
+        .textSpecialFontStyle(getFontAttributes(node))
+    } else {
+      Stack() {}
+      .attributeModifier(pseudoModify.setStyle(node.pseudo_before || {}))
+      .stackAttrs(getStyle(node.pseudo_before || {}))
+    }
+  }
+  createLazyChildren(node)
+  // 伪类::After
+  if (node.pseudo_after) {
+    if (node.pseudo_after.content) {
+      Text(node.pseudo_after.content)
+        .attributeModifier(pseudoModify.setStyle(node.pseudo_after))
+        .textNormalFontStyle(getStyle(node.pseudo_after || {}))
+        .textSpecialFontStyle(getFontAttributes(node))
+    } else {
+      Stack() {}
+      .attributeModifier(pseudoModify.setStyle(node.pseudo_after || {}))
+      .stackAttrs(getStyle(node.pseudo_after || {}))
+    }
+  }
+}

package/dist/components-harmony-ets/radio.ets

@@ -3,7 +3,7 @@ import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBL
 import commonStyleModify from './style'
 import { createLazyChildren } from './render'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
-import { FlexManager } from './utils/FlexManager'
+import { FlexManager } from './utils/flexManager'
 import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import { TaroEvent, TaroAny, HarmonyType, TaroRadioGroupElement, TaroRadioElement } from '@tarojs/runtime'
@@ -36,7 +36,7 @@ function themeStyles(isDisabled: boolean) {
 @Component
 export struct TaroRadio {
   @ObjectLink node: TaroRadioElement
-  
+
   aboutToAppear () {
     if (this.node && !this.node._isInit) {
       this.node._isInit = true
@@ -61,7 +61,7 @@ export struct TaroRadio {
                   this.node.updateComponent()
                 } else {
                   this.node.updateCheckedValue(value)
-      
+
                   if (value) {
                     const event: TaroEvent = createTaroEvent('change', { detail: { value: this.node?._attrs.value } }, this.node)
                     eventHandler(event, 'change', this.node)

package/dist/components-harmony-ets/scrollView.ets

@@ -1,7 +1,7 @@
 import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
 import commonStyleModify from './style'
-import { createLazyChildren } from './render'
+import PseduoChildren from './pseudo'
 import { FlexManager } from './utils/FlexManager'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 import { getNodeThresholds, getNormalAttributes, shouldBindEvent } from './utils/helper'
@@ -49,8 +49,8 @@ function handleScrollEvent (node: TaroScrollViewElement, eventName = 'scroll', x
     deltaY: vp2px(yOffset),
     scrollLeft: vp2px(currentXOffset),
     scrollTop: vp2px(currentYOffset),
-    scrollWidth: vp2px(Number(node._scroll?.width)),
-    scrollHeight: vp2px(Number(node._scroll?.height)),
+    scrollWidth: vp2px(Number(node._nodeInfo?._scroll?.width)),
+    scrollHeight: vp2px(Number(node._nodeInfo?._scroll?.height)),
   }
   const event: TaroEvent = createTaroEvent(eventName, { detail: value }, node)
 
@@ -85,27 +85,27 @@ export default struct TaroScrollView {
     Scroll(this.node.scroller) {
       if (this.node._attrs.scrollX) {
         Row() {
-          createLazyChildren(this.node)
+          PseduoChildren(this.node)
         }
         .attributeModifier(commonStyleModify.setNode(this.node))
         .rowAttrs(getNormalAttributes(this.node))
         .width(null)
         .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {
-          this.node._scroll = areaResult
+          this.node._nodeInfo._scroll = areaResult
         }, this.node, ['scroll', 'scrollstart', 'scrollend']))
         .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
         .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
         .flexGrow(0).flexShrink(0)
       } else {
         Column() {
-          createLazyChildren(this.node)
+          PseduoChildren(this.node)
         }
         .attributeModifier(commonStyleModify.setNode(this.node))
         .columnAttrs(getNormalAttributes(this.node))
         .height(null)
         .alignItems(HorizontalAlign.Start)
         .onAreaChange(shouldBindEvent((_: Area, areaResult: Area) => {
-          this.node._scroll = areaResult
+          this.node._nodeInfo._scroll = areaResult
         }, this.node, ['scroll', 'scrollstart', 'scrollend']))
         .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
         .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
@@ -127,5 +127,6 @@ export default struct TaroScrollView {
     .onScrollStart(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollstart') }, this.node, ['scrollstart']))
     .onScrollStop(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrollend') }, this.node, ['scrollend']))
     .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+    .onReachEnd(shouldBindEvent(() => { handleScrollEvent(this.node, 'scrolltolower') }, this.node, ['scrolltolower']))
   }
 }

package/dist/components-harmony-ets/style.ets

@@ -1,6 +1,6 @@
-import type { TaroElement, TaroStyleType } from '@tarojs/runtime'
+import type { HarmonyStyle, TaroElement, TaroStyleType } from '@tarojs/runtime'
 import { isUndefined } from '../shared'
-import { getNormalAttributes } from './utils/helper'
+import { getNormalAttributes, getStyle } from './utils/helper'
 
 function getTop (node: TaroElement): Length | number {
   return node?.hmStyle?.top || 0
@@ -23,132 +23,153 @@ class CommonStyleModify implements AttributeModifier<CommonAttribute> {
 
   applyNormalAttribute(instance: CommonAttribute): void {
     if (this.node && this.style) {
+      setNormalAttributeIntoInstance(instance, this.style)
+    }
+  }
+}
+
+class PseudoStyleModify implements AttributeModifier<CommonAttribute> {
+  style: TaroStyleType | null = null
 
-      if (!isUndefined(this.style.id)) {
-        instance.id(this.style.id)
-        instance.key(this.style.id)
-      }
-      if (!isUndefined(this.style.flexGrow)) {
-        instance.flexGrow(this.style.flexGrow)
-      }
-      if (!isUndefined(this.style.flexShrink)) {
-        instance.flexShrink(this.style.flexShrink)
-      }
-      if (!isUndefined(this.style.flexBasis)) {
-        instance.flexBasis(this.style.flexBasis)
-      }
-      if (!isUndefined(this.style.alignSelf)) {
-        instance.alignSelf(this.style.alignSelf)
-      }
-      if (!isUndefined(this.style.paddingTop) || !isUndefined(this.style.paddingRight) || !isUndefined(this.style.paddingBottom) || !isUndefined(this.style.paddingLeft)) {
-        instance.padding({
-          top: this.style.paddingTop,
-          right: this.style.paddingRight,
-          bottom: this.style.paddingBottom,
-          left: this.style.paddingLeft
-        })
-      }
-      if (!isUndefined(this.style.marginTop) || !isUndefined(this.style.marginRight) || !isUndefined(this.style.marginBottom) || !isUndefined(this.style.marginLeft)) {
-        instance.margin({
-          top: this.style.marginTop,
-          right: this.style.marginRight,
-          bottom: this.style.marginBottom,
-          left: this.style.marginLeft
-        })
-      }
-      if (!isUndefined(this.style.width)) {
-        instance.width(this.style.width)
-      }
-      if (!isUndefined(this.style.height)) {
-        instance.height(this.style.height)
-      }
-      if (!isUndefined(this.style.minWidth) || !isUndefined(this.style.maxWidth) || !isUndefined(this.style.minHeight) || !isUndefined(this.style.maxHeight)) {
-        instance.constraintSize({
-          minWidth: this.style.minWidth,
-          maxWidth: this.style.maxWidth,
-          minHeight: this.style.minHeight,
-          maxHeight: this.style.maxHeight
-        })
-      }
-      if (!isUndefined(this.style.backgroundColor)) {
-        instance.backgroundColor(this.style.backgroundColor)
-      }
-      if (!isUndefined(this.style.backgroundImage)) {
-        instance.backgroundImage(this.style.backgroundImage?.src, this.style.backgroundRepeat)
-      }
-      if (!isUndefined(this.style.backgroundSize)) {
-        instance.backgroundImageSize(this.style.backgroundSize)
-      }
-      if (!isUndefined(this.style.backgroundPosition)) {
-        instance.backgroundImagePosition(this.style.backgroundPosition)
-      }
-      if (!isUndefined(this.style.borderTopStyle) || !isUndefined(this.style.borderRightStyle) || !isUndefined(this.style.borderBottomStyle) || !isUndefined(this.style.borderLeftStyle)) {
-        instance.borderStyle({
-          top: this.style.borderTopStyle,
-          right: this.style.borderRightStyle,
-          bottom: this.style.borderBottomStyle,
-          left: this.style.borderLeftStyle
-        })
-      }
-      if (!isUndefined(this.style.borderTopWidth) || !isUndefined(this.style.borderRightWidth) || !isUndefined(this.style.borderBottomWidth) || !isUndefined(this.style.borderLeftWidth)) {
-        instance.borderWidth({
-          top: this.style.borderTopWidth,
-          right: this.style.borderRightWidth,
-          bottom: this.style.borderBottomWidth,
-          left: this.style.borderLeftWidth
-        })
-      }
-      if (!isUndefined(this.style.borderTopColor) || !isUndefined(this.style.borderRightColor) || !isUndefined(this.style.borderBottomColor) || !isUndefined(this.style.borderLeftColor)) {
-        instance.borderColor({
-          top: this.style.borderTopColor,
-          right: this.style.borderRightColor,
-          bottom: this.style.borderBottomColor,
-          left: this.style.borderLeftColor
-        })
-      }
-      if (!isUndefined(this.style.borderTopLeftRadius) || !isUndefined(this.style.borderTopRightRadius) || !isUndefined(this.style.borderBottomLeftRadius) || !isUndefined(this.style.borderBottomRightRadius)) {
-        instance.borderRadius({
-          topLeft: this.style.borderTopLeftRadius,
-          topRight: this.style.borderTopRightRadius,
-          bottomLeft: this.style.borderBottomLeftRadius,
-          bottomRight: this.style.borderBottomRightRadius
-        })
-      }
-      if (!isUndefined(this.style.zIndex)) {
-        instance.zIndex(this.style.zIndex)
-      }
-      if (!isUndefined(this.style.opacity)) {
-        instance.opacity(this.style.opacity)
-      }
-      if (!isUndefined(this.style.linearGradient)) {
-        instance.linearGradient(this.style.linearGradient)
-      }
-      if (!isUndefined(this.style.overflow)) {
-        instance.clip(this.style.overflow)
-      }
-      if (!isUndefined(this.style.transformOrigin)) {
-        instance.rotate({ centerX: this.style.transformOrigin.x, centerY: this.style.transformOrigin.y, angle: 0 })
-        instance.scale({ centerX: this.style.transformOrigin.x, centerY: this.style.transformOrigin.y })
-      }
-      if (!isUndefined(this.style.transform)) {
-        instance.transform(this.style.transform)
-      }
-      if (this.node.hmStyle?.position === 'absolute' || this.node.hmStyle?.position === 'fixed') {
-        instance.position({
-          x: getLeft(this.node),
-          y: getTop(this.node)
-        })
-      }
-      if (this.node.hmStyle?.position === 'relative') {
-        instance.offset({
-          x: getLeft(this.node),
-          y: getTop(this.node)
-        })
-      }
+  setStyle (style: HarmonyStyle) {
+    this.style = getStyle(style)
+    return this
+  }
+
+  applyNormalAttribute(instance: CommonAttribute): void {
+    if (this.style) {
+      setNormalAttributeIntoInstance(instance, this.style)
     }
   }
 }
 
+
+function setNormalAttributeIntoInstance(instance: CommonAttribute, style: TaroStyleType) {
+  if (!isUndefined(style.id)) {
+    instance.id(style.id)
+    instance.key(style.id)
+  }
+  if (!isUndefined(style.flexGrow)) {
+    instance.flexGrow(style.flexGrow)
+  }
+  if (!isUndefined(style.flexShrink)) {
+    instance.flexShrink(style.flexShrink)
+  }
+  if (!isUndefined(style.flexBasis)) {
+    instance.flexBasis(style.flexBasis)
+  }
+  if (!isUndefined(style.alignSelf)) {
+    instance.alignSelf(style.alignSelf)
+  }
+  if (!isUndefined(style.paddingTop) || !isUndefined(style.paddingRight) || !isUndefined(style.paddingBottom) || !isUndefined(style.paddingLeft)) {
+    instance.padding({
+      top: style.paddingTop,
+      right: style.paddingRight,
+      bottom: style.paddingBottom,
+      left: style.paddingLeft
+    })
+  }
+  if (!isUndefined(style.marginTop) || !isUndefined(style.marginRight) || !isUndefined(style.marginBottom) || !isUndefined(style.marginLeft)) {
+    instance.margin({
+      top: style.marginTop,
+      right: style.marginRight,
+      bottom: style.marginBottom,
+      left: style.marginLeft
+    })
+  }
+  if (!isUndefined(style.width)) {
+    instance.width(style.width)
+  }
+  if (!isUndefined(style.height)) {
+    instance.height(style.height)
+  }
+  if (!isUndefined(style.minWidth) || !isUndefined(style.maxWidth) || !isUndefined(style.minHeight) || !isUndefined(style.maxHeight)) {
+    instance.constraintSize({
+      minWidth: style.minWidth,
+      maxWidth: style.maxWidth,
+      minHeight: style.minHeight,
+      maxHeight: style.maxHeight
+    })
+  }
+  if (!isUndefined(style.backgroundColor)) {
+    instance.backgroundColor(style.backgroundColor)
+  }
+  if (!isUndefined(style.backgroundImage)) {
+    instance.backgroundImage(style.backgroundImage?.src, style.backgroundRepeat)
+  }
+  if (!isUndefined(style.backgroundSize)) {
+    instance.backgroundImageSize(style.backgroundSize)
+  }
+  if (!isUndefined(style.backgroundPosition)) {
+    instance.backgroundImagePosition(style.backgroundPosition)
+  }
+  if (!isUndefined(style.borderTopStyle) || !isUndefined(style.borderRightStyle) || !isUndefined(style.borderBottomStyle) || !isUndefined(style.borderLeftStyle)) {
+    instance.borderStyle({
+      top: style.borderTopStyle,
+      right: style.borderRightStyle,
+      bottom: style.borderBottomStyle,
+      left: style.borderLeftStyle
+    })
+  }
+  if (!isUndefined(style.borderTopWidth) || !isUndefined(style.borderRightWidth) || !isUndefined(style.borderBottomWidth) || !isUndefined(style.borderLeftWidth)) {
+    instance.borderWidth({
+      top: style.borderTopWidth,
+      right: style.borderRightWidth,
+      bottom: style.borderBottomWidth,
+      left: style.borderLeftWidth
+    })
+  }
+  if (!isUndefined(style.borderTopColor) || !isUndefined(style.borderRightColor) || !isUndefined(style.borderBottomColor) || !isUndefined(style.borderLeftColor)) {
+    instance.borderColor({
+      top: style.borderTopColor,
+      right: style.borderRightColor,
+      bottom: style.borderBottomColor,
+      left: style.borderLeftColor
+    })
+  }
+  if (!isUndefined(style.borderTopLeftRadius) || !isUndefined(style.borderTopRightRadius) || !isUndefined(style.borderBottomLeftRadius) || !isUndefined(style.borderBottomRightRadius)) {
+    instance.borderRadius({
+      topLeft: style.borderTopLeftRadius,
+      topRight: style.borderTopRightRadius,
+      bottomLeft: style.borderBottomLeftRadius,
+      bottomRight: style.borderBottomRightRadius
+    })
+  }
+  if (!isUndefined(style.zIndex)) {
+    instance.zIndex(style.zIndex)
+  }
+  if (!isUndefined(style.opacity)) {
+    instance.opacity(style.opacity)
+  }
+  if (!isUndefined(style.linearGradient)) {
+    instance.linearGradient(style.linearGradient)
+  }
+  if (!isUndefined(style.overflow)) {
+    instance.clip(style.overflow)
+  }
+  if (!isUndefined(style.transformOrigin)) {
+    instance.rotate({ centerX: style.transformOrigin.x, centerY: style.transformOrigin.y, angle: 0 })
+    instance.scale({ centerX: style.transformOrigin.x, centerY: style.transformOrigin.y })
+  }
+  if (!isUndefined(style.transform)) {
+    instance.transform(style.transform)
+  }
+  if (style.position === 'absolute' || style.position === 'fixed') {
+    instance.position({
+      x: style.left || 0,
+      y: style.top || 0,
+    })
+  }
+  if (style.position === 'relative') {
+    instance.offset({
+      x: style.left || 0,
+      y: style.top || 0,
+    })
+  }
+}
+
 const modify = new CommonStyleModify()
 
+export const pseudoModify = new PseudoStyleModify()
+
 export default modify