Merge pull request #317 from dev-five-git/add-mask-shortcut

Add mask shortcut

Author: owjs3901

.changeset/six-owls-thank.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Add maskPos, maskImg

libs/css/src/constant.rs

@@ -28,6 +28,7 @@ pub(super) static GLOBAL_STYLE_PROPERTY: phf::Map<&str, &[&str]> = phf_map! {
     "bgClip" => &["background-clip"],
     "bgColor" => &["background-color"],
     "bgImage" => &["background-image"],
+    "bgImg" => &["background-image"],
     "bgOrigin" => &["background-origin"],
     "bgPosition" => &["background-position"],
     "bgPositionX" => &["background-position-x"],
@@ -38,6 +39,7 @@ pub(super) static GLOBAL_STYLE_PROPERTY: phf::Map<&str, &[&str]> = phf_map! {
     "bgRepeat" => &["background-repeat"],
     "bgSize" => &["background-size"],
     "bgBlendMode" => &["background-blend-mode"],
+    "backgroundImg" => &["background-image"],
     "animationDir" => &["animation-direction"],
     "flexDir" => &["flex-direction"],
     "pos" => &["position"],
@@ -68,6 +70,8 @@ pub(super) static GLOBAL_STYLE_PROPERTY: phf::Map<&str, &[&str]> = phf_map! {
     "borderRightRadius" => &["border-top-right-radius", "border-bottom-right-radius"],
     "objectPos" => &["object-position"],
     "offsetPos" => &["offset-position"],
+    "maskPos" => &["mask-position"],
+    "maskImg" => &["mask-image"],
 };
 pub(super) static OPTIMIZE_MULTI_CSS_VALUE_PROPERTY: phf::Set<&str> = phf_set! {
     "font-family",

packages/react/src/types/props/background.ts

@@ -19,4 +19,6 @@ export interface DevupUiBackgroundProps {
   bgRepeat?: ResponsiveValue<Property.BackgroundRepeat>
   bgSize?: ResponsiveValue<Property.BackgroundSize>
   bgBlendMode?: ResponsiveValue<Property.BackgroundBlendMode>
+  backgroundImg?: ResponsiveValue<Property.BackgroundImage>
+  bgImg?: ResponsiveValue<Property.BackgroundImage>
 }

packages/react/src/types/props/index.ts

@@ -8,6 +8,7 @@ import type { DevupUiBoxModelProps } from './box-model'
 import type { DevupUiBoxSizingProps } from './box-sizing'
 import type { DevupUiFlexProps } from './flex'
 import type { DevupUiImageProps } from './image'
+import type { DevupUiMaskProps } from './mask'
 import type { DevupUiMotionPathProps } from './motion-path'
 import type { DevupUiPositionProps } from './position'
 import type { DevupSelectorProps, DevupThemeSelectorProps } from './selector'
@@ -22,6 +23,7 @@ export interface DevupShortcutsProps
     DevupUiImageProps,
     DevupUiMotionPathProps,
     DevupUiPositionProps,
+    DevupUiMaskProps,
     DevupUiTextProps {}
 
 export type DevupCommonProps = Merge<

packages/react/src/types/props/mask.ts

@@ -0,0 +1,8 @@
+import type { Property } from 'csstype'
+
+import type { ResponsiveValue } from '../responsive-value'
+
+export interface DevupUiMaskProps {
+  maskPos?: ResponsiveValue<Property.MaskPosition>
+  maskImg?: ResponsiveValue<Property.MaskImage>
+}