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

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/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/scrollView.ets

@@ -1,8 +1,8 @@
 import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, createTaroEvent } from '@tarojs/runtime'
 
 import commonStyleModify from './style'
-import { createLazyChildren } from './render'
-import { FlexManager } from './utils/flexManager'
+import PseduoChildren from './pseudo'
+import { FlexManager } from './utils/FlexManager'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 import { getNodeThresholds, getNormalAttributes, shouldBindEvent } from './utils/helper'
 
@@ -85,7 +85,7 @@ 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))
@@ -98,7 +98,7 @@ export default struct TaroScrollView {
         .flexGrow(0).flexShrink(0)
       } else {
         Column() {
-          createLazyChildren(this.node)
+          PseduoChildren(this.node)
         }
         .attributeModifier(commonStyleModify.setNode(this.node))
         .columnAttrs(getNormalAttributes(this.node))

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

package/dist/components-harmony-ets/utils/flexManager.ets

@@ -18,21 +18,21 @@ class FlexManager {
   static convertFlexAlignItemsToColumnOrRow (direction: FlexDirection, alignItems: ItemAlign | undefined): 	VerticalAlign | HorizontalAlign {
     if (direction === FlexDirection.Column) {
       switch (alignItems) {
-        case ItemAlign.Start:
-          return HorizontalAlign.Start
+        case ItemAlign.Center:
+          return HorizontalAlign.Center
         case ItemAlign.End:
           return HorizontalAlign.End
         default:
-          return HorizontalAlign.Center
+          return HorizontalAlign.Start
       }
     } else {
       switch (alignItems) {
-        case ItemAlign.Start:
-          return VerticalAlign.Top
+        case ItemAlign.Center:
+          return VerticalAlign.Center
         case ItemAlign.End:
           return VerticalAlign.Bottom
         default:
-          return VerticalAlign.Center
+          return VerticalAlign.Top
       }
     }
   }

package/dist/components-harmony-ets/utils/helper.ets

@@ -1,4 +1,4 @@
-import { getNormalAttributes, getFontAttributes } from './styles'
+import { getNormalAttributes, getStyle, getFontAttributes } from './styles'
 
 import type { TFunc } from '@tarojs/runtime/dist/runtime.esm'
 import type { TaroElement } from '@tarojs/runtime'
@@ -36,4 +36,4 @@ export function getNodeThresholds (node: TaroElement): number[] | null {
   return node?._nodeInfo.thresholds || null
 }
 
-export { getNormalAttributes, getFontAttributes }
+export { getNormalAttributes, getStyle, getFontAttributes }

package/dist/components-harmony-ets/utils/styles.ets

@@ -42,6 +42,30 @@ export function getNormalAttributes (node: TaroElement): TaroStyleType {
     linearGradient = hmStyle.backgroundImage
   }
 
+  let normalAttributes = getStyle(hmStyle)
+
+  normalAttributes.width = isMaxWidthView(node) && isUndefined(hmStyle.width) ? '100%' : hmStyle.width
+  normalAttributes.id =  _attrs.id || _nid
+
+  // taro_page 等写死在运行时里的节点，没有 _nodeInfo
+  if (node._nodeInfo) {
+    const overwriteStyle: TaroStyleType = node._nodeInfo?.overwriteStyle
+
+    // 处理覆盖属性：如动画的覆盖
+    if (overwriteStyle) {
+      normalAttributes = ObjectAssign(normalAttributes, overwriteStyle)
+    }
+  }
+  return normalAttributes
+}
+
+export function getStyle(hmStyle: HarmonyStyle): TaroStyleType {
+  let linearGradient: HarmonyType.LinearGradient | undefined = undefined
+  // 渐变
+  if (hmStyle.backgroundImage?.colors) {
+    linearGradient = hmStyle.backgroundImage
+  }
+
   let normalAttributes: HarmonyStyle = {
     // Flex相关
     flexBasis: hmStyle.flexBasis,
@@ -49,7 +73,7 @@ export function getNormalAttributes (node: TaroElement): TaroStyleType {
     flexShrink: hmStyle.flexShrink,
     alignSelf: hmStyle.alignSelf,
     // 尺寸相关
-    width: isMaxWidthView(node) && isUndefined(hmStyle.width) ? '100%' : hmStyle.width,
+    width: hmStyle.width,
     height: hmStyle.height,
     minHeight: hmStyle.minHeight,
     maxHeight: hmStyle.maxHeight,
@@ -107,20 +131,13 @@ export function getNormalAttributes (node: TaroElement): TaroStyleType {
     textDecoration: hmStyle.textDecoration,
     // 其他
     overflow: hmStyle.overflow,
-    id: _attrs.id || _nid,
     opacity: hmStyle.opacity,
-    zIndex: hmStyle.zIndex
-    // focus: _attrs.focus || false,
+    zIndex: hmStyle.zIndex,
+    // 定位
+    position: hmStyle.position,
+    top: hmStyle.top,
+    left: hmStyle.left,
   }
 
-  // taro_page 等写死在运行时里的节点，没有 _nodeInfo
-  if (node._nodeInfo) {
-    const overwriteStyle: TaroStyleType = node._nodeInfo?.overwriteStyle
-
-    // 处理覆盖属性：如动画的覆盖
-    if (overwriteStyle) {
-      normalAttributes = ObjectAssign(normalAttributes, overwriteStyle)
-    }
-  }
   return normalAttributes
-}
+}

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

@@ -1,7 +1,7 @@
 import { eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME } from '@tarojs/runtime'
 
 import commonStyleModify from './style'
-import { createLazyChildren } from './render'
+import PseduoChildren from './pseudo'
 import { TOUCH_EVENT_MAP } from './utils/constant/event'
 import { FlexManager } from './utils/flexManager'
 import { getNodeThresholds, getNormalAttributes, shouldBindEvent } from './utils/helper'
@@ -35,7 +35,7 @@ export default struct TaroView {
   build () {
     if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
       Row() {
-        createLazyChildren(this.node)
+        PseduoChildren(this.node)
       }
       .attributeModifier(commonStyleModify.setNode(this.node))
       .rowAttrs(getNormalAttributes(this.node))
@@ -49,7 +49,7 @@ export default struct TaroView {
       .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
     } else {
       Column() {
-        createLazyChildren(this.node)
+        PseduoChildren(this.node)
       }
       .attributeModifier(commonStyleModify.setNode(this.node))
       .columnAttrs(getNormalAttributes(this.node))

package/dist/runtime-ets/bom/window.ts

@@ -3,6 +3,7 @@ import { History, Location } from '@tarojs/runtime/dist/runtime.esm'
 
 import { TaroEventTarget } from '../dom/eventTarget'
 import { getComputedStyle } from './getComputedStyle'
+import { nav } from './navigator'
 
 import type { TaroDocument } from '../dom/document'
 
@@ -13,6 +14,7 @@ class Window extends TaroEventTarget {
 
   public location: any
   public history: any
+  public navigator = nav
   public getComputedStyle = getComputedStyle
 
   constructor () {

package/dist/runtime-ets/current.ts

@@ -14,3 +14,5 @@ export const Current: any = {
   }),
   createHarmonyElement: null
 }
+
+export const getCurrentInstance = () => Current

package/dist/runtime-ets/dom/element/element.ts

@@ -6,7 +6,7 @@ import { initComponentNodeInfo, triggerAttributesCallback } from '../../utils/in
 import { bindAnimation } from '../bind'
 import { ClassList } from '../class-list'
 import { NodeType, TaroNode } from '../node'
-import StyleSheet from '../stylesheet'
+import StyleSheet, { HarmonyStyle } from '../stylesheet'
 
 import type { StandardProps } from '@tarojs/components/types'
 import type { TaroAny } from '../../utils'
@@ -156,4 +156,44 @@ export class TaroElement<T extends StandardProps = StandardProps> extends TaroNo
   public get style (): ICSSStyleDeclaration | null {
     return this._style
   }
+
+  // 伪类，不存在style动态设置，均已被转换为鸿蒙样式
+  // TODO：可根据实际情况，迁移到具体的组件中，如View、ScrollView中，Text\Image其实是不需要的
+  public _pseudo_before: StyleSheet | null
+
+  public get pseudo_before () {
+    return this._pseudo_before?.hmStyle
+  }
+
+  public set_pseudo_before (value: HarmonyStyle | null) {
+    if (value) {
+      if (!this._pseudo_before) {
+        this._pseudo_before = new StyleSheet()
+      }
+      Object.keys(value).forEach(key => {
+        this._pseudo_before![key] = value[key]
+      })
+    } else {
+      this._pseudo_before = null
+    }
+  }
+
+  public _pseudo_after: StyleSheet | null
+
+  public get pseudo_after () {
+    return this._pseudo_after?.hmStyle
+  }
+
+  public set_pseudo_after (value: HarmonyStyle | null) {
+    if (value) {
+      if (!this._pseudo_after) {
+        this._pseudo_after = new StyleSheet()
+      }
+      Object.keys(value).forEach(key => {
+        this._pseudo_after![key] = value[key]
+      })
+    } else {
+      this._pseudo_after = null
+    }
+  }
 }