@web-atoms/core 2.6.14 → 2.6.17

package/src/style/StyleRule.ts

@@ -129,3133 +129,3 @@ export type WordSpacingType = "" | "default" | "normal" | "initial" | "inherit";
 export type WordWrapType = "" | "default" | "normal" | "break-word" | "initial" | "inherit";
 
 export type Units = "" | "px" | "pt" | "%" | "rem";
-
-export interface IFlexAttributes {
-    direction?: FlexDirectionType;
-    alignItems?: ItemAlignType;
-    justifyContent?: JustifyContentType;
-    stretch?: boolean;
-    inline?: boolean;
-    /** Try to keep gap an even number as it hides borders of input/textarea for odd numbers */
-    gap?: number;
-}
-
-export function toUnit(n: number | string, unit: string) {
-    if (!unit) {
-        unit = "";
-    }
-    return typeof n === "number" ? n + unit : n;
-}
-
-export interface IRect {
-    top?: number | string;
-    left?: number | string;
-    right?: number | string;
-    bottom?: number | string;
-    width?: number | string;
-    height?: number | string;
-}
-
-export class AtomStyleRules {
-
-    public style: IStyleDeclaration = {};
-
-    public name: string;
-
-    constructor(name: string | object) {
-        if (typeof name === "string") {
-            this.name = name;
-        } else {
-            this.style = name ?? {};
-        }
-    }
-
-    public alignContent(value: ContentAlignType) {
-        if (value !== undefined && value !== null) {
-            this.style.alignContent = value;
-        }
-        return this;
-    }
-
-    public alignItems(value: ItemAlignType) {
-        if (value !== undefined && value !== null) {
-            this.style.alignItems = value;
-        }
-        return this;
-    }
-
-    public alignSelf(value: SelfAlignType) {
-        if (value !== undefined && value !== null) {
-            this.style.alignSelf = value;
-        }
-        return this;
-    }
-
-    public alignmentBaseline(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.alignmentBaseline = value;
-        }
-        return this;
-    }
-
-    public animation(value: AnimationType) {
-        if (value !== undefined && value !== null) {
-            this.style.animation = value;
-        }
-        return this;
-    }
-
-    public animationDelay(value: AnimationTimeType) {
-        if (value !== undefined && value !== null) {
-            this.style.animationDelay = value;
-        }
-        return this;
-    }
-
-    public animationDirection(value: AnimationDirection) {
-        if (value !== undefined && value !== null) {
-            this.style.animationDirection = value;
-        }
-        return this;
-    }
-
-    public animationDuration(value: AnimationTimeType) {
-        if (value !== undefined && value !== null) {
-            this.style.animationDuration = value;
-        }
-        return this;
-    }
-
-    public animationFillMode(value: AnimationModeType) {
-        if (value !== undefined && value !== null) {
-            this.style.animationFillMode = value;
-        }
-        return this;
-    }
-
-    public animationIterationCount(value: IterationCount) {
-        if (value !== undefined && value !== null) {
-            this.style.animationIterationCount = value;
-        }
-        return this;
-    }
-
-    public animationName(value: AnimationNameType) {
-        if (value !== undefined && value !== null) {
-            this.style.animationName = value;
-        }
-        return this;
-    }
-
-    public animationPlayState(value: PlayState) {
-        if (value !== undefined && value !== null) {
-            this.style.animationPlayState = value;
-        }
-        return this;
-    }
-
-    public animationTimingFunction(value: TimingFunction) {
-        if (value !== undefined && value !== null) {
-            this.style.animationTimingFunction = value;
-        }
-        return this;
-    }
-
-    public backfaceVisibility(value: Visibility) {
-        if (value !== undefined && value !== null) {
-            this.style.backfaceVisibility = value;
-        }
-        return this;
-    }
-
-    public background(value: BackgroundType) {
-        if (value !== undefined && value !== null) {
-            this.style.background = value;
-        }
-        return this;
-    }
-
-    public backgroundAttachment(value: BackgroundAttachmentType) {
-        if (value !== undefined && value !== null) {
-            this.style.backgroundAttachment = value;
-        }
-        return this;
-    }
-
-    public backgroundBlendMode(value: BackgroundBlendType) {
-        if (value !== undefined && value !== null) {
-            this.style.backgroundBlendMode = value;
-        }
-        return this;
-    }
-
-    public backgroundClip(value: BackgroundClipType) {
-        if (value !== undefined && value !== null) {
-            this.style.backgroundClip = value;
-        }
-        return this;
-    }
-
-    public backgroundColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.backgroundColor = value;
-        }
-        return this;
-    }
-
-    public backgroundImage(value: string | WebImage) {
-        if (value !== undefined && value !== null) {
-            this.style.backgroundImage = value;
-        }
-        return this;
-    }
-
-    public backgroundOrigin(value: BackgroundOriginType) {
-        if (value !== undefined && value !== null) {
-            this.style.backgroundOrigin = value;
-        }
-        return this;
-    }
-
-    public backgroundPosition(value: BackgroundPositionType) {
-        if (value !== undefined && value !== null) {
-            this.style.backgroundPosition = value;
-        }
-        return this;
-    }
-
-    public backgroundPositionX(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.backgroundPositionX = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public backgroundPositionY(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.backgroundPositionY = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public backgroundRepeat(value: BackgroundRepeatType) {
-        if (value !== undefined && value !== null) {
-            this.style.backgroundRepeat = value;
-        }
-        return this;
-    }
-
-    public backgroundSize(value: BackgroundSizeType) {
-        if (value !== undefined && value !== null) {
-            this.style.backgroundSize = value;
-        }
-        return this;
-    }
-
-    public baselineShift(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.baselineShift = value;
-        }
-        return this;
-    }
-
-    public border(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.border = value;
-        }
-        return this;
-    }
-
-    public borderBottom(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.borderBottom = value;
-        }
-        return this;
-    }
-
-    public borderBottomColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.borderBottomColor = value;
-        }
-        return this;
-    }
-
-    public borderBottomLeftRadius(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.borderBottomLeftRadius = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public borderBottomRightRadius(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.borderBottomRightRadius = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public borderBottomStyle(value: BorderStyleType) {
-        if (value !== undefined && value !== null) {
-            this.style.borderBottomStyle = value;
-        }
-        return this;
-    }
-
-    public borderBottomWidth(value: CommonWidthType): AtomStyleRules;
-    public borderBottomWidth(value: string): AtomStyleRules;
-    public borderBottomWidth(value: number, unit?: Units): AtomStyleRules;
-    public borderBottomWidth(value: number | string | CommonWidthType, unit: Units = "px"): AtomStyleRules {
-        if (value !== undefined && value !== null) {
-            this.style.borderBottomWidth = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public borderCollapse(value: BorderCollapseType) {
-        if (value !== undefined && value !== null) {
-            this.style.borderCollapse = value;
-        }
-        return this;
-    }
-
-    public borderColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.borderColor = value;
-        }
-        return this;
-    }
-
-    public borderImage(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.borderImage = value;
-        }
-        return this;
-    }
-
-    public borderImageOutset(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.borderImageOutset = value;
-        }
-        return this;
-    }
-
-    public borderImageRepeat(value: BorderImageRepeatType) {
-        if (value !== undefined && value !== null) {
-            this.style.borderImageRepeat = value;
-        }
-        return this;
-    }
-
-    public borderImageSlice(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.borderImageSlice = value;
-        }
-        return this;
-    }
-
-    public borderImageSource(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.borderImageSource = value;
-        }
-        return this;
-    }
-
-    public borderImageWidth(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.borderImageWidth = value;
-        }
-        return this;
-    }
-
-    public borderLeft(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.borderLeft = value;
-        }
-        return this;
-    }
-
-    public borderLeftColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.borderLeftColor = value;
-        }
-        return this;
-    }
-
-    public borderLeftStyle(value: BorderStyleType) {
-        if (value !== undefined && value !== null) {
-            this.style.borderLeftStyle = value;
-        }
-        return this;
-    }
-
-    public borderLeftWidth(value: CommonWidthType): AtomStyleRules;
-    public borderLeftWidth(value: string): AtomStyleRules;
-    public borderLeftWidth(value: number, unit?: Units): AtomStyleRules;
-    public borderLeftWidth(value: number | string | CommonWidthType, unit: Units = "px"): AtomStyleRules {
-        if (value !== undefined && value !== null) {
-            this.style.borderLeftWidth = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public borderRadius(value: string | number, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.borderRadius = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public borderRight(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.borderRight = value;
-        }
-        return this;
-    }
-
-    public borderRightColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.borderRightColor = value;
-        }
-        return this;
-    }
-
-    public borderRightStyle(value: BorderStyleType) {
-        if (value !== undefined && value !== null) {
-            this.style.borderRightStyle = value;
-        }
-        return this;
-    }
-
-    public borderRightWidth(value: CommonWidthType): AtomStyleRules;
-    public borderRightWidth(value: string): AtomStyleRules;
-    public borderRightWidth(value: number, unit?: Units): AtomStyleRules;
-    public borderRightWidth(value: number | string | CommonWidthType, unit: Units = "px"): AtomStyleRules {
-        if (value !== undefined && value !== null) {
-            this.style.borderRightWidth = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public borderSpacing(value: BorderSpacingType) {
-        if (value !== undefined && value !== null) {
-            this.style.borderSpacing = value;
-        }
-        return this;
-    }
-
-    public borderStyle(value: BorderStyleType) {
-        if (value !== undefined && value !== null) {
-            this.style.borderStyle = value;
-        }
-        return this;
-    }
-
-    public borderTop(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.borderTop = value;
-        }
-        return this;
-    }
-
-    public borderTopColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.borderTopColor = value;
-        }
-        return this;
-    }
-
-    public borderTopLeftRadius(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.borderTopLeftRadius = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public borderTopRightRadius(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.borderTopRightRadius = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public borderTopStyle(value: BorderStyleType) {
-        if (value !== undefined && value !== null) {
-            this.style.borderTopStyle = value;
-        }
-        return this;
-    }
-
-    public borderTopWidth(value: CommonWidthType): AtomStyleRules;
-    public borderTopWidth(value: string): AtomStyleRules;
-    public borderTopWidth(value: number, unit?: Units): AtomStyleRules;
-    public borderTopWidth(value: number | string | CommonWidthType, unit: Units = "px"): AtomStyleRules {
-        if (value !== undefined && value !== null) {
-            this.style.borderTopWidth = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public borderWidth(value: CommonWidthType): AtomStyleRules;
-    public borderWidth(value: string): AtomStyleRules;
-    public borderWidth(value: number, unit?: Units): AtomStyleRules;
-    public borderWidth(value: number | string | CommonWidthType, unit: Units = "px"): AtomStyleRules {
-        if (value !== undefined && value !== null) {
-            this.style.borderWidth = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public bottom(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.bottom = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public boxShadow(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.boxShadow = value;
-        }
-        return this;
-    }
-
-    public boxSizing(value: BoxSizingType) {
-        if (value !== undefined && value !== null) {
-            this.style.boxSizing = value;
-        }
-        return this;
-    }
-
-    public breakAfter(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.breakAfter = value;
-        }
-        return this;
-    }
-
-    public breakBefore(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.breakBefore = value;
-        }
-        return this;
-    }
-
-    public breakInside(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.breakInside = value;
-        }
-        return this;
-    }
-
-    public captionSide(value: CaptionSideType) {
-        if (value !== undefined && value !== null) {
-            this.style.captionSide = value;
-        }
-        return this;
-    }
-
-    public caretColor(value: ColorItem | string) {
-        this.style.caretColor = value;
-        return this;
-    }
-
-    public clear(value: ClearType) {
-        if (value !== undefined && value !== null) {
-            this.style.clear = value;
-        }
-        return this;
-    }
-
-    public clip(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.clip = value;
-        }
-        return this;
-    }
-
-    public clipPath(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.clipPath = value;
-        }
-        return this;
-    }
-
-    public clipRule(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.clipRule = value;
-        }
-        return this;
-    }
-
-    public color(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.color = value;
-        }
-        return this;
-    }
-
-    public colorInterpolationFilters(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.colorInterpolationFilters = value;
-        }
-        return this;
-    }
-
-    public columnCount(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.columnCount = value;
-        }
-        return this;
-    }
-
-    public columnFill(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.columnFill = value;
-        }
-        return this;
-    }
-
-    public columnGap(value: ColumnGapType);
-    public columnGap(value: string): AtomStyleRules;
-    public columnGap(value: number | string | any, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.columnGap = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public columnRule(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.columnRule = value;
-        }
-        return this;
-    }
-
-    public columnRuleColor(value: any | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.columnRuleColor = value;
-        }
-        return this;
-    }
-
-    public columnRuleStyle(value: BorderStyleType) {
-        if (value !== undefined && value !== null) {
-            this.style.columnRuleStyle = value;
-        }
-        return this;
-    }
-
-    public columnRuleWidth(value: CommonWidthType) {
-        if (value !== undefined && value !== null) {
-            this.style.columnRuleWidth = value;
-        }
-        return this;
-    }
-
-    public columnSpan(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.columnSpan = value;
-        }
-        return this;
-    }
-
-    public columnWidth(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.columnWidth = value;
-        }
-        return this;
-    }
-
-    public columns(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.columns = value;
-        }
-        return this;
-    }
-
-    public content(value: ContentType) {
-        if (value !== undefined && value !== null) {
-            this.style.content = value;
-        }
-        return this;
-    }
-
-    public counterIncrement(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.counterIncrement = value;
-        }
-        return this;
-    }
-
-    public counterReset(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.counterReset = value;
-        }
-        return this;
-    }
-
-    public cssFloat(value: FloatPosition) {
-        if (value !== undefined && value !== null) {
-            this.style.cssFloat = value;
-        }
-        return this;
-    }
-
-    public cssText(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.cssText = value;
-        }
-        return this;
-    }
-
-    public cursor(value: CursorType) {
-        if (value !== undefined && value !== null) {
-            this.style.cursor = value;
-        }
-        return this;
-    }
-
-    public direction(value: DirectionType) {
-        if (value !== undefined && value !== null) {
-            this.style.direction = value;
-        }
-        return this;
-    }
-
-    public display(value: DisplayType) {
-        if (value !== undefined && value !== null) {
-            this.style.display = value;
-        }
-        return this;
-    }
-
-    public dominantBaseline(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.dominantBaseline = value;
-        }
-        return this;
-    }
-
-    public emptyCells(value: EmptyCellType) {
-        if (value !== undefined && value !== null) {
-            this.style.emptyCells = value;
-        }
-        return this;
-    }
-
-    public enableBackground(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.enableBackground = value;
-        }
-        return this;
-    }
-
-    public fill(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.fill = value;
-        }
-        return this;
-    }
-
-    public fillOpacity(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.fillOpacity = value;
-        }
-        return this;
-    }
-
-    public fillRule(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.fillRule = value;
-        }
-        return this;
-    }
-
-    public filter(value: FilterType) {
-        if (value !== undefined && value !== null) {
-            this.style.filter = value;
-        }
-        return this;
-    }
-
-    public flex(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.flex = value;
-        }
-        return this;
-    }
-
-    public flexBasis(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.flexBasis = value;
-        }
-        return this;
-    }
-
-    public flexDirection(value: FlexDirectionType) {
-        if (value !== undefined && value !== null) {
-            this.style.flexDirection = value;
-        }
-        return this;
-    }
-
-    public flexFlow(value: FlexFlowDirectionType) {
-        if (value !== undefined && value !== null) {
-            this.style.flexFlow = value;
-        }
-        return this;
-    }
-
-    public flexGrow(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.flexGrow = value;
-        }
-        return this;
-    }
-
-    public flexShrink(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.flexShrink = value;
-        }
-        return this;
-    }
-
-    public flexWrap(value: FlexWrapType) {
-        if (value !== undefined && value !== null) {
-            this.style.flexWrap = value;
-        }
-        return this;
-    }
-
-    public float(value: FloatType) {
-        if (value !== undefined && value !== null) {
-            this.style.float = value;
-        }
-        return this;
-    }
-
-    public floodColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.floodColor = value;
-        }
-        return this;
-    }
-
-    public floodOpacity(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.floodOpacity = value;
-        }
-        return this;
-    }
-
-    public font(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.font = value;
-        }
-        return this;
-    }
-
-    public fontFamily(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.fontFamily = value;
-        }
-        return this;
-    }
-
-    public fontFeatureSettings(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.fontFeatureSettings = value;
-        }
-        return this;
-    }
-
-    public fontSize(value: number): AtomStyleRules;
-    public fontSize(value: TextSize): AtomStyleRules;
-    public fontSize(value: string): AtomStyleRules;
-    public fontSize(value: number | string | TextSize, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.fontSize = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public fontSizeAdjust(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.fontSizeAdjust = value;
-        }
-        return this;
-    }
-
-    public fontStretch(value: FontStretchType) {
-        if (value !== undefined && value !== null) {
-            this.style.fontStretch = value;
-        }
-        return this;
-    }
-
-    public fontStyle(value: FontStyleType) {
-        if (value !== undefined && value !== null) {
-            this.style.fontStyle = value;
-        }
-        return this;
-    }
-
-    public fontVariant(value: FontVariantType) {
-        if (value !== undefined && value !== null) {
-            this.style.fontVariant = value;
-        }
-        return this;
-    }
-
-    public fontWeight(value: FontWeightType) {
-        if (value !== undefined && value !== null) {
-            this.style.fontWeight = value;
-        }
-        return this;
-    }
-
-    public gap(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.gap = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public glyphOrientationHorizontal(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.glyphOrientationHorizontal = value;
-        }
-        return this;
-    }
-
-    public glyphOrientationVertical(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.glyphOrientationVertical = value;
-        }
-        return this;
-    }
-
-    public grid(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.grid = value;
-        }
-        return this;
-    }
-
-    public gridArea(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridArea = value;
-        }
-        return this;
-    }
-
-    public gridAutoColumns(value: GridAutoColumnsType) {
-        if (value !== undefined && value !== null) {
-            this.style.gridAutoColumns = value;
-        }
-        return this;
-    }
-
-    public gridAutoFlow(value: GridAutoFlowType) {
-        if (value !== undefined && value !== null) {
-            this.style.gridAutoFlow = value;
-        }
-        return this;
-    }
-
-    public gridAutoRows(value: GridAutoRowsType) {
-        if (value !== undefined && value !== null) {
-            this.style.gridAutoRows = value;
-        }
-        return this;
-    }
-
-    public gridColumn(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridColumn = value;
-        }
-        return this;
-    }
-
-    public gridColumnEnd(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridColumnEnd = value;
-        }
-        return this;
-    }
-
-    public gridColumnGap(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridColumnGap = value;
-        }
-        return this;
-    }
-
-    public gridColumnStart(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridColumnStart = value;
-        }
-        return this;
-    }
-
-    public gridGap(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridGap = value;
-        }
-        return this;
-    }
-
-    public gridRow(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridRow = value;
-        }
-        return this;
-    }
-
-    public gridRowEnd(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridRowEnd = value;
-        }
-        return this;
-    }
-
-    public gridRowGap(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridRowGap = value;
-        }
-        return this;
-    }
-
-    public gridRowStart(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridRowStart = value;
-        }
-        return this;
-    }
-
-    public gridTemplate(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridTemplate = value;
-        }
-        return this;
-    }
-
-    public gridTemplateAreas(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridTemplateAreas = value;
-        }
-        return this;
-    }
-
-    public gridTemplateColumns(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridTemplateColumns = value;
-        }
-        return this;
-    }
-
-    public gridTemplateRows(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.gridTemplateRows = value;
-        }
-        return this;
-    }
-
-    public height(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.height = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public imeMode(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.imeMode = value;
-        }
-        return this;
-    }
-
-    public justifyContent(value: JustifyContentType) {
-        if (value !== undefined && value !== null) {
-            this.style.justifyContent = value;
-        }
-        return this;
-    }
-
-    public justifyItems(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.justifyItems = value;
-        }
-        return this;
-    }
-
-    public justifySelf(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.justifySelf = value;
-        }
-        return this;
-    }
-
-    public kerning(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.kerning = value;
-        }
-        return this;
-    }
-
-    public layoutGrid(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.layoutGrid = value;
-        }
-        return this;
-    }
-
-    public layoutGridChar(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.layoutGridChar = value;
-        }
-        return this;
-    }
-
-    public layoutGridLine(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.layoutGridLine = value;
-        }
-        return this;
-    }
-
-    public layoutGridMode(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.layoutGridMode = value;
-        }
-        return this;
-    }
-
-    public layoutGridType(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.layoutGridType = value;
-        }
-        return this;
-    }
-
-    public left(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.left = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public letterSpacing(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.letterSpacing = value;
-        }
-        return this;
-    }
-
-    public lightingColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.lightingColor = value;
-        }
-        return this;
-    }
-
-    public lineBreak(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.lineBreak = value;
-        }
-        return this;
-    }
-
-    public lineHeight(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.lineHeight = value;
-        }
-        return this;
-    }
-
-    public listStyle(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.listStyle = value;
-        }
-        return this;
-    }
-
-    public listStyleImage(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.listStyleImage = value;
-        }
-        return this;
-    }
-
-    public listStylePosition(value: ListStylePositionType) {
-        if (value !== undefined && value !== null) {
-            this.style.listStylePosition = value;
-        }
-        return this;
-    }
-
-    public listStyleType(value: ListStyleType) {
-        if (value !== undefined && value !== null) {
-            this.style.listStyleType = value;
-        }
-        return this;
-    }
-
-    public margin(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.margin = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public marginBottom(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.marginBottom = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public marginLeft(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.marginLeft = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public marginRight(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.marginRight = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public marginTop(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.marginTop = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public marginInlineStart(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.marginInlineStart = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public marginInlineEnd(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.marginInlineEnd = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public marginBlockStart(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.marginBlockStart = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public marginBlockEnd(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.marginBlockEnd = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public marker(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.marker = value;
-        }
-        return this;
-    }
-
-    public markerEnd(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.markerEnd = value;
-        }
-        return this;
-    }
-
-    public markerMid(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.markerMid = value;
-        }
-        return this;
-    }
-
-    public markerStart(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.markerStart = value;
-        }
-        return this;
-    }
-
-    public mask(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.mask = value;
-        }
-        return this;
-    }
-
-    public maskImage(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.maskImage = value;
-        }
-        return this;
-    }
-
-    public maxHeight(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.maxHeight = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public maxWidth(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.maxWidth = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public minHeight(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.minHeight = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public minWidth(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.minWidth = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public msContentZoomChaining(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msContentZoomChaining = value;
-        }
-        return this;
-    }
-
-    public msContentZoomLimit(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msContentZoomLimit = value;
-        }
-        return this;
-    }
-
-    public msContentZoomLimitMax(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msContentZoomLimitMax = value;
-        }
-        return this;
-    }
-
-    public msContentZoomLimitMin(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msContentZoomLimitMin = value;
-        }
-        return this;
-    }
-
-    public msContentZoomSnap(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msContentZoomSnap = value;
-        }
-        return this;
-    }
-
-    public msContentZoomSnapPoints(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msContentZoomSnapPoints = value;
-        }
-        return this;
-    }
-
-    public msContentZoomSnapType(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msContentZoomSnapType = value;
-        }
-        return this;
-    }
-
-    public msContentZooming(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msContentZooming = value;
-        }
-        return this;
-    }
-
-    public msFlowFrom(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msFlowFrom = value;
-        }
-        return this;
-    }
-
-    public msFlowInto(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msFlowInto = value;
-        }
-        return this;
-    }
-
-    public msFontFeatureSettings(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msFontFeatureSettings = value;
-        }
-        return this;
-    }
-
-    public msGridColumn(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msGridColumn = value;
-        }
-        return this;
-    }
-
-    public msGridColumnAlign(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msGridColumnAlign = value;
-        }
-        return this;
-    }
-
-    public msGridColumnSpan(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msGridColumnSpan = value;
-        }
-        return this;
-    }
-
-    public msGridColumns(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msGridColumns = value;
-        }
-        return this;
-    }
-
-    public msGridRow(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msGridRow = value;
-        }
-        return this;
-    }
-
-    public msGridRowAlign(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msGridRowAlign = value;
-        }
-        return this;
-    }
-
-    public msGridRowSpan(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msGridRowSpan = value;
-        }
-        return this;
-    }
-
-    public msGridRows(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msGridRows = value;
-        }
-        return this;
-    }
-
-    public msHighContrastAdjust(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msHighContrastAdjust = value;
-        }
-        return this;
-    }
-
-    public msHyphenateLimitChars(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msHyphenateLimitChars = value;
-        }
-        return this;
-    }
-
-    public msHyphenateLimitLines(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msHyphenateLimitLines = value;
-        }
-        return this;
-    }
-
-    public msHyphenateLimitZone(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msHyphenateLimitZone = value;
-        }
-        return this;
-    }
-
-    public msHyphens(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msHyphens = value;
-        }
-        return this;
-    }
-
-    public msImeAlign(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msImeAlign = value;
-        }
-        return this;
-    }
-
-    public msOverflowStyle(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msOverflowStyle = value;
-        }
-        return this;
-    }
-
-    public msScrollChaining(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollChaining = value;
-        }
-        return this;
-    }
-
-    public msScrollLimit(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollLimit = value;
-        }
-        return this;
-    }
-
-    public msScrollLimitXMax(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollLimitXMax = value;
-        }
-        return this;
-    }
-
-    public msScrollLimitXMin(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollLimitXMin = value;
-        }
-        return this;
-    }
-
-    public msScrollLimitYMax(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollLimitYMax = value;
-        }
-        return this;
-    }
-
-    public msScrollLimitYMin(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollLimitYMin = value;
-        }
-        return this;
-    }
-
-    public msScrollRails(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollRails = value;
-        }
-        return this;
-    }
-
-    public msScrollSnapPointsX(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollSnapPointsX = value;
-        }
-        return this;
-    }
-
-    public msScrollSnapPointsY(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollSnapPointsY = value;
-        }
-        return this;
-    }
-
-    public msScrollSnapType(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollSnapType = value;
-        }
-        return this;
-    }
-
-    public msScrollSnapX(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollSnapX = value;
-        }
-        return this;
-    }
-
-    public msScrollSnapY(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollSnapY = value;
-        }
-        return this;
-    }
-
-    public msScrollTranslation(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msScrollTranslation = value;
-        }
-        return this;
-    }
-
-    public msTextCombineHorizontal(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msTextCombineHorizontal = value;
-        }
-        return this;
-    }
-
-    public msTextSizeAdjust(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msTextSizeAdjust = value;
-        }
-        return this;
-    }
-
-    public msTouchAction(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msTouchAction = value;
-        }
-        return this;
-    }
-
-    public msTouchSelect(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msTouchSelect = value;
-        }
-        return this;
-    }
-
-    public msUserSelect(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msUserSelect = value;
-        }
-        return this;
-    }
-
-    public msWrapFlow(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msWrapFlow = value;
-        }
-        return this;
-    }
-
-    public msWrapMargin(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.msWrapMargin = value;
-        }
-        return this;
-    }
-
-    public msWrapThrough(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.msWrapThrough = value;
-        }
-        return this;
-    }
-
-    public objectFit(value: ObjectFitType) {
-        if (value !== undefined && value !== null) {
-            this.style.objectFit = value;
-        }
-        return this;
-    }
-
-    public objectPosition(value: ObjectPositionType) {
-        if (value !== undefined && value !== null) {
-            this.style.objectPosition = value;
-        }
-        return this;
-    }
-
-    public opacity(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.opacity = value;
-        }
-        return this;
-    }
-
-    public order(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.order = value;
-        }
-        return this;
-    }
-
-    public orphans(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.orphans = value;
-        }
-        return this;
-    }
-
-    public outline(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.outline = value;
-        }
-        return this;
-    }
-
-    public outlineColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.outlineColor = value;
-        }
-        return this;
-    }
-
-    public outlineOffset(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.outlineOffset = value;
-        }
-        return this;
-    }
-
-    public outlineStyle(value: BorderStyleType) {
-        if (value !== undefined && value !== null) {
-            this.style.outlineStyle = value;
-        }
-        return this;
-    }
-
-    public outlineWidth(value: CommonWidthType) {
-        if (value !== undefined && value !== null) {
-            this.style.outlineWidth = value;
-        }
-        return this;
-    }
-
-    public overflow(value: OverFlowType) {
-        if (value !== undefined && value !== null) {
-            this.style.overflow = value;
-        }
-        return this;
-    }
-
-    public overflowX(value: OverFlowType) {
-        if (value !== undefined && value !== null) {
-            this.style.overflowX = value;
-        }
-        return this;
-    }
-
-    public overflowY(value: OverFlowType) {
-        if (value !== undefined && value !== null) {
-            this.style.overflowY = value;
-        }
-        return this;
-    }
-
-    public padding(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.padding = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public paddingBottom(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.paddingBottom = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public paddingLeft(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.paddingLeft = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public paddingRight(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.paddingRight = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public paddingTop(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.paddingTop = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public paddingInlineStart(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.paddingInlineStart = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public paddingInlineEnd(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.paddingInlineEnd = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public pageBreakAfter(value: PageBreakCommonType) {
-        if (value !== undefined && value !== null) {
-            this.style.pageBreakAfter = value;
-        }
-        return this;
-    }
-
-    public pageBreakBefore(value: PageBreakCommonType) {
-        if (value !== undefined && value !== null) {
-            this.style.pageBreakBefore = value;
-        }
-        return this;
-    }
-
-    public pageBreakInside(value: PageBreakInsideType) {
-        if (value !== undefined && value !== null) {
-            this.style.pageBreakInside = value;
-        }
-        return this;
-    }
-
-    public penAction(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.penAction = value;
-        }
-        return this;
-    }
-
-    public perspective(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.perspective = value;
-        }
-        return this;
-    }
-
-    public perspectiveOrigin(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.perspectiveOrigin = value;
-        }
-        return this;
-    }
-
-    public pointerEvents(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.pointerEvents = value;
-        }
-        return this;
-    }
-
-    public position(value: StylePosition) {
-        if (value !== undefined && value !== null) {
-            this.style.position = value;
-        }
-        return this;
-    }
-
-    public quotes(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.quotes = value;
-        }
-        return this;
-    }
-
-    public resize(value: ResizeType) {
-        if (value !== undefined && value !== null) {
-            this.style.resize = value;
-        }
-        return this;
-    }
-
-    public right(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.right = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public rotate(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.rotate = value;
-        }
-        return this;
-    }
-
-    public rowGap(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.rowGap = value;
-        }
-        return this;
-    }
-
-    public rubyAlign(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.rubyAlign = value;
-        }
-        return this;
-    }
-
-    public rubyOverhang(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.rubyOverhang = value;
-        }
-        return this;
-    }
-
-    public rubyPosition(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.rubyPosition = value;
-        }
-        return this;
-    }
-
-    public scale(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.scale = value;
-        }
-        return this;
-    }
-
-    public custom(name: string, value: string) {
-        this.style[name] = value;
-        return this;
-    }
-
-    public scrollBarWidth(value: string): AtomStyleRules;
-    public scrollBarWidth(value: number, unit?: Units): AtomStyleRules;
-    public scrollBarWidth(value: number | string, unit?: Units) {
-        this.style["scrollbar-width"] = toUnit(value, unit);
-        this.style.subclasses ??= {};
-        const ws = this.style.subclasses["::-webkit-scrollbar"] ??= {};
-        ws.width = toUnit(value, unit);
-        return this;
-    }
-
-    public scrollBarColor(thumb: ColorItem | string, bg: ColorItem | string) {
-        this.style["scrollbar-color"] = `${thumb} ${bg}`;
-        this.style.subclasses ??= {};
-        const ws = this.style.subclasses["::-webkit-scrollbar-thumb"] ??= {};
-        ws.backgroundColor = bg;
-        ws.borderRadius = "20px";
-        ws.border = `3px solid ${thumb}`;
-        return this;
-    }
-
-    public stopColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.stopColor = value;
-        }
-        return this;
-    }
-
-    public stopOpacity(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.stopOpacity = value;
-        }
-        return this;
-    }
-
-    public stroke(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.stroke = value;
-        }
-        return this;
-    }
-
-    public strokeDasharray(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.strokeDasharray = value;
-        }
-        return this;
-    }
-
-    public strokeDashoffset(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.strokeDashoffset = value;
-        }
-        return this;
-    }
-
-    public strokeLinecap(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.strokeLinecap = value;
-        }
-        return this;
-    }
-
-    public strokeLinejoin(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.strokeLinejoin = value;
-        }
-        return this;
-    }
-
-    public strokeMiterlimit(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.strokeMiterlimit = value;
-        }
-        return this;
-    }
-
-    public strokeOpacity(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.strokeOpacity = value;
-        }
-        return this;
-    }
-
-    public strokeWidth(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.strokeWidth = value;
-        }
-        return this;
-    }
-
-    public tableLayout(value: TableLayoutType) {
-        if (value !== undefined && value !== null) {
-            this.style.tableLayout = value;
-        }
-        return this;
-    }
-
-    public textAlign(value: TextAlignType) {
-        if (value !== undefined && value !== null) {
-            this.style.textAlign = value;
-        }
-        return this;
-    }
-
-    public textAlignLast(value: TextAlignLastType) {
-        if (value !== undefined && value !== null) {
-            this.style.textAlignLast = value;
-        }
-        return this;
-    }
-
-    public textAnchor(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.textAnchor = value;
-        }
-        return this;
-    }
-
-    public textCombineUpright(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.textCombineUpright = value;
-        }
-        return this;
-    }
-
-    public textDecoration(value: TextDecorationType) {
-        if (value !== undefined && value !== null) {
-            this.style.textDecoration = value;
-        }
-        return this;
-    }
-
-    public textIndent(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.textIndent = value;
-        }
-        return this;
-    }
-
-    public textJustify(value: JustifyType) {
-        if (value !== undefined && value !== null) {
-            this.style.textJustify = value;
-        }
-        return this;
-    }
-
-    public textKashida(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.textKashida = value;
-        }
-        return this;
-    }
-
-    public textKashidaSpace(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.textKashidaSpace = value;
-        }
-        return this;
-    }
-
-    public textOverflow(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.textOverflow = value;
-        }
-        return this;
-    }
-
-    public textShadow(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.textShadow = value;
-        }
-        return this;
-    }
-
-    public textTransform(value: TextTransformType) {
-        if (value !== undefined && value !== null) {
-            this.style.textTransform = value;
-        }
-        return this;
-    }
-
-    public textUnderlinePosition(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.textUnderlinePosition = value;
-        }
-        return this;
-    }
-
-    public top(value: number | string, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.top = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public touchAction(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.touchAction = value;
-        }
-        return this;
-    }
-
-    public transform(value: TransformType) {
-        if (value !== undefined && value !== null) {
-            this.style.transform = value;
-        }
-        return this;
-    }
-
-    public transformOrigin(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.transformOrigin = value;
-        }
-        return this;
-    }
-
-    public transformStyle(value: TransformStyleType) {
-        if (value !== undefined && value !== null) {
-            this.style.transformStyle = value;
-        }
-        return this;
-    }
-
-    public transition(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.transition = value;
-        }
-        return this;
-    }
-
-    public transitionDelay(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.transitionDelay = value;
-        }
-        return this;
-    }
-
-    public transitionDuration(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.transitionDuration = value;
-        }
-        return this;
-    }
-
-    public transitionProperty(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.transitionProperty = value;
-        }
-        return this;
-    }
-
-    public transitionTimingFunction(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.transitionTimingFunction = value;
-        }
-        return this;
-    }
-
-    public translate(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.translate = value;
-        }
-        return this;
-    }
-
-    public unicodeBidi(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.unicodeBidi = value;
-        }
-        return this;
-    }
-
-    public userSelect(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.userSelect = value;
-        }
-        return this;
-    }
-
-    public userDrag(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.userDrag = value;
-        }
-        return this;
-    }
-
-    public verticalAlign(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.verticalAlign = value;
-        }
-        return this;
-    }
-
-    public visibility(value: VisibilityType) {
-        if (value !== undefined && value !== null) {
-            this.style.visibility = value;
-        }
-        return this;
-    }
-
-    public webkitAlignContent(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAlignContent = value;
-        }
-        return this;
-    }
-
-    public webkitAlignItems(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAlignItems = value;
-        }
-        return this;
-    }
-
-    public webkitAlignSelf(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAlignSelf = value;
-        }
-        return this;
-    }
-
-    public webkitAnimation(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAnimation = value;
-        }
-        return this;
-    }
-
-    public webkitAnimationDelay(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAnimationDelay = value;
-        }
-        return this;
-    }
-
-    public webkitAnimationDirection(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAnimationDirection = value;
-        }
-        return this;
-    }
-
-    public webkitAnimationDuration(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAnimationDuration = value;
-        }
-        return this;
-    }
-
-    public webkitAnimationFillMode(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAnimationFillMode = value;
-        }
-        return this;
-    }
-
-    public webkitAnimationIterationCount(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAnimationIterationCount = value;
-        }
-        return this;
-    }
-
-    public webkitAnimationName(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAnimationName = value;
-        }
-        return this;
-    }
-
-    public webkitAnimationPlayState(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAnimationPlayState = value;
-        }
-        return this;
-    }
-
-    public webkitAnimationTimingFunction(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAnimationTimingFunction = value;
-        }
-        return this;
-    }
-
-    public webkitAppearance(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitAppearance = value;
-        }
-        return this;
-    }
-
-    public webkitBackfaceVisibility(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBackfaceVisibility = value;
-        }
-        return this;
-    }
-
-    public webkitBackgroundClip(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBackgroundClip = value;
-        }
-        return this;
-    }
-
-    public webkitBackgroundOrigin(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBackgroundOrigin = value;
-        }
-        return this;
-    }
-
-    public webkitBackgroundSize(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBackgroundSize = value;
-        }
-        return this;
-    }
-
-    public webkitBorderBottomLeftRadius(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBorderBottomLeftRadius = value;
-        }
-        return this;
-    }
-
-    public webkitBorderBottomRightRadius(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBorderBottomRightRadius = value;
-        }
-        return this;
-    }
-
-    public webkitBorderImage(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBorderImage = value;
-        }
-        return this;
-    }
-
-    public webkitBorderRadius(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBorderRadius = value;
-        }
-        return this;
-    }
-
-    public webkitBorderTopLeftRadius(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBorderTopLeftRadius = value;
-        }
-        return this;
-    }
-
-    public webkitBorderTopRightRadius(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBorderTopRightRadius = value;
-        }
-        return this;
-    }
-
-    public webkitBoxAlign(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBoxAlign = value;
-        }
-        return this;
-    }
-
-    public webkitBoxDirection(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBoxDirection = value;
-        }
-        return this;
-    }
-
-    public webkitBoxFlex(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBoxFlex = value;
-        }
-        return this;
-    }
-
-    public webkitBoxOrdinalGroup(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBoxOrdinalGroup = value;
-        }
-        return this;
-    }
-
-    public webkitBoxOrient(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBoxOrient = value;
-        }
-        return this;
-    }
-
-    public webkitBoxPack(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBoxPack = value;
-        }
-        return this;
-    }
-
-    public webkitBoxSizing(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitBoxSizing = value;
-        }
-        return this;
-    }
-
-    public webkitColumnBreakAfter(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitColumnBreakAfter = value;
-        }
-        return this;
-    }
-
-    public webkitColumnBreakBefore(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitColumnBreakBefore = value;
-        }
-        return this;
-    }
-
-    public webkitColumnBreakInside(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitColumnBreakInside = value;
-        }
-        return this;
-    }
-
-    public webkitColumnCount(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitColumnCount = value;
-        }
-        return this;
-    }
-
-    public webkitColumnGap(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitColumnGap = value;
-        }
-        return this;
-    }
-
-    public webkitColumnRule(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitColumnRule = value;
-        }
-        return this;
-    }
-
-    public webkitColumnRuleColor(value: any | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitColumnRuleColor = value;
-        }
-        return this;
-    }
-
-    public webkitColumnRuleStyle(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitColumnRuleStyle = value;
-        }
-        return this;
-    }
-
-    public webkitColumnRuleWidth(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitColumnRuleWidth = value;
-        }
-        return this;
-    }
-
-    public webkitColumnSpan(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitColumnSpan = value;
-        }
-        return this;
-    }
-
-    public webkitColumnWidth(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitColumnWidth = value;
-        }
-        return this;
-    }
-
-    public webkitColumns(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitColumns = value;
-        }
-        return this;
-    }
-
-    public webkitFilter(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitFilter = value;
-        }
-        return this;
-    }
-
-    public webkitFlex(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitFlex = value;
-        }
-        return this;
-    }
-
-    public webkitFlexBasis(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitFlexBasis = value;
-        }
-        return this;
-    }
-
-    public webkitFlexDirection(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitFlexDirection = value;
-        }
-        return this;
-    }
-
-    public webkitFlexFlow(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitFlexFlow = value;
-        }
-        return this;
-    }
-
-    public webkitFlexGrow(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitFlexGrow = value;
-        }
-        return this;
-    }
-
-    public webkitFlexShrink(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitFlexShrink = value;
-        }
-        return this;
-    }
-
-    public webkitFlexWrap(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitFlexWrap = value;
-        }
-        return this;
-    }
-
-    public webkitJustifyContent(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitJustifyContent = value;
-        }
-        return this;
-    }
-
-    public webkitOrder(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitOrder = value;
-        }
-        return this;
-    }
-
-    public webkitPerspective(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitPerspective = value;
-        }
-        return this;
-    }
-
-    public webkitPerspectiveOrigin(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitPerspectiveOrigin = value;
-        }
-        return this;
-    }
-
-    public webkitTapHighlightColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTapHighlightColor = value;
-        }
-        return this;
-    }
-
-    public webkitTextFillColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTextFillColor = value;
-        }
-        return this;
-    }
-
-    public webkitTextSizeAdjust(value: any) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTextSizeAdjust = value;
-        }
-        return this;
-    }
-
-    public webkitTextStroke(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTextStroke = value;
-        }
-        return this;
-    }
-
-    public webkitTextStrokeColor(value: string | ColorItem) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTextStrokeColor = value;
-        }
-        return this;
-    }
-
-    public webkitTextStrokeWidth(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTextStrokeWidth = value;
-        }
-        return this;
-    }
-
-    public webkitTransform(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTransform = value;
-        }
-        return this;
-    }
-
-    public webkitTransformOrigin(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTransformOrigin = value;
-        }
-        return this;
-    }
-
-    public webkitTransformStyle(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTransformStyle = value;
-        }
-        return this;
-    }
-
-    public webkitTransition(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTransition = value;
-        }
-        return this;
-    }
-
-    public webkitTransitionDelay(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTransitionDelay = value;
-        }
-        return this;
-    }
-
-    public webkitTransitionDuration(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTransitionDuration = value;
-        }
-        return this;
-    }
-
-    public webkitTransitionProperty(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTransitionProperty = value;
-        }
-        return this;
-    }
-
-    public webkitTransitionTimingFunction(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitTransitionTimingFunction = value;
-        }
-        return this;
-    }
-
-    public webkitUserModify(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitUserModify = value;
-        }
-        return this;
-    }
-
-    public webkitUserSelect(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitUserSelect = value;
-        }
-        return this;
-    }
-
-    public webkitUserDrag(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitUserDrag = value;
-        }
-        return this;
-    }
-
-    public webkitWritingMode(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.webkitWritingMode = value;
-        }
-        return this;
-    }
-
-    public whiteSpace(value: WhiteSpaceType) {
-        if (value !== undefined && value !== null) {
-            this.style.whiteSpace = value;
-        }
-        return this;
-    }
-
-    public widows(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.widows = value;
-        }
-        return this;
-    }
-
-    public width(value: string | number, unit: Units = "px") {
-        if (value !== undefined && value !== null) {
-            this.style.width = toUnit(value, unit);
-        }
-        return this;
-    }
-
-    public wordBreak(value: WordBreakType) {
-        if (value !== undefined && value !== null) {
-            this.style.wordBreak = value;
-        }
-        return this;
-    }
-
-    public wordSpacing(value: WordSpacingType) {
-        if (value !== undefined && value !== null) {
-            this.style.wordSpacing = value;
-        }
-        return this;
-    }
-
-    public wordWrap(value: WordWrapType) {
-        if (value !== undefined && value !== null) {
-            this.style.wordWrap = value;
-        }
-        return this;
-    }
-
-    public writingMode(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.writingMode = value;
-        }
-        return this;
-    }
-
-    public zIndex(value: string | number) {
-        if (value !== undefined && value !== null) {
-            this.style.zIndex = value as any;
-        }
-        return this;
-    }
-
-    public zoom(value: string) {
-        if (value !== undefined && value !== null) {
-            this.style.zoom = value;
-        }
-        return this;
-    }
-
-    public displayFlex() {
-        this.style.display = "flex";
-        return this;
-    }
-
-    public flexStretch() {
-        return this.flex("1 1 100%");
-    }
-
-    public roundBorderFull() {
-        this.style.borderRadius = "9999px";
-        return this;
-    }
-
-    public subclass(name: string, style: IStyleDeclaration | AtomStyleRules) {
-        if (style instanceof AtomStyleRules) {
-            style = style.style;
-        }
-        const sc = this.style.subclasses ??= {};
-        sc[name] = style;
-        return this;
-    }
-
-    public childSubclass(name: string, style: IStyleDeclaration | AtomStyleRules) {
-        return this.subclass(" > " + name, style);
-    }
-
-    public subclasses(... styles: AtomStyleRules[]) {
-        const sc = this.style.subclasses ??= {};
-        for (const iterator of styles) {
-            sc[iterator.name] = iterator.style;
-        }
-        return this;
-    }
-
-    /**
-     * Creates rule for immediate child like `this > child`
-     * @param styles children
-     * @returns this
-     */
-    public childSubclasses(... styles: AtomStyleRules[]) {
-        const sc = this.style.subclasses ??= {};
-        for (const iterator of styles) {
-            sc[" > " + iterator.name] = iterator.style;
-        }
-        return this;
-    }
-
-    public roundBox(bgColor: string | ColorItem, padding: number = 5, radius: number = 5, unit: Units = "px") {
-        this.style.padding = toUnit(padding, unit);
-        this.style.borderRadius = toUnit(radius, unit);
-        this.style.borderColor = bgColor;
-        this.style.backgroundColor = bgColor;
-        return this;
-    }
-
-    public maximizeAbsolute() {
-        this.style.position = "absolute";
-        this.style.left = 0;
-        this.style.top = 0;
-        this.style.bottom = 0;
-        this.style.right = 0;
-        return this;
-    }
-
-    public setRect(
-        position: string,
-        {
-            top,
-            left,
-            right,
-            bottom,
-            width,
-            height
-        }: IRect = {},
-        unit: Units = "px") {
-
-        this.style.position = position;
-        if (typeof top !== "undefined") {
-            this.style.top = toUnit(top, unit);
-        }
-        if (typeof left !== "undefined") {
-            this.style.left = toUnit(left, unit);
-        }
-        if (typeof width !== "undefined") {
-            this.style.width = toUnit(width, unit);
-        }
-        if (typeof height !== "undefined") {
-            this.style.height = toUnit(height, unit);
-        }
-        if (typeof right !== "undefined") {
-            this.style.right = toUnit(right, unit);
-        }
-        if (typeof bottom !== "undefined") {
-            this.style.bottom = toUnit(bottom, unit);
-        }
-        return this;
-    }
-
-    public absolutePosition(
-        rect: IRect = {},
-        unit: Units = "px") {
-        return this.setRect("absolute", rect, unit);
-    }
-
-    public relativePosition(
-        rect: IRect = {},
-        unit: Units = "px") {
-        return this.setRect("relative", rect, unit);
-    }
-
-    public absoluteDockTop(height: number | string, unit: Units = "px") {
-        this.style.position = "absolute";
-        this.style.left = 0;
-        this.style.top = 0;
-        this.style.right = 0;
-        this.style.height = toUnit(height, unit);
-        return this;
-    }
-
-    public absoluteDockBottom(top: number | string, unit: Units = "px") {
-        this.style.position = "absolute";
-        this.style.left = 0;
-        this.style.bottom = 0;
-        this.style.right = 0;
-        this.style.top = toUnit(top, unit);
-        return this;
-    }
-
-    public defaultBoxShadow() {
-        this.style.boxShadow = "rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;";
-        this.style.border = "solid 1px rgba(0, 0, 0, 0.05)";
-        return this;
-    }
-
-    public textEllipsis() {
-        this.style.overflow = "hidden";
-        this.style.whiteSpace = "nowrap";
-        this.style.textOverflow = "ellipsis";
-        return this;
-    }
-
-    public hover(style: AtomStyleRules) {
-        const sc = this.style.subclasses ??= {};
-        sc[":hover"] = { ... sc[":hover"], ... style.style };
-        return this;
-    }
-
-    public focus(style: AtomStyleRules) {
-        const sc = this.style.subclasses ??= {};
-        sc[":focus"] = { ... sc[":focus"], ... style.style };
-        return this;
-    }
-
-    public hoverBackgroundColor(color: ColorItem | string) {
-        const sc = this.style.subclasses ??= {};
-        const hover = sc[":hover"] ??= {};
-        hover.backgroundColor = color;
-        return this;
-    }
-
-    public hoverColor(color: ColorItem | string) {
-        const sc = this.style.subclasses ??= {};
-        const hover = sc[":hover"] ??= {};
-        hover.color = color;
-        return this;
-    }
-
-    public and( ... styles: AtomStyleRules[]) {
-        const sc = this.style.subclasses ??= {};
-        for (const style of styles) {
-            sc[style.name] = style.style;
-        }
-        return this;
-    }
-
-    public nested( ... styles: AtomStyleRules[]) {
-        const sc = this.style.subclasses ??= {};
-        for (const style of styles) {
-            sc[" " + style.name] = style.style;
-        }
-        return this;
-    }
-
-    public child( ... styles: AtomStyleRules[]) {
-        const sc = this.style.subclasses ??= {};
-        for (const style of styles) {
-            sc[" > " + style.name] = style.style;
-        }
-        return this;
-    }
-
-    public merge( ... styles: AtomStyleRules[]) {
-        for (const { style } of styles) {
-            for (const key in style) {
-                if (Object.prototype.hasOwnProperty.call(style, key)) {
-                    const element = style[key];
-                    this.style[key] = element;
-                }
-            }
-        }
-        return this;
-    }
-
-    public toStyleSheet() {
-        const list = createStyleText(this.name, [], this.style);
-        return list.join("\n");
-    }
-
-    /**
-     * @deprecated Please use `displayNone(":not(XX) > A.XX")` format
-     * @param showSelector showSelector
-     * @param hideSelector hideSelector
-     * @returns AtomStyleRule
-     */
-    public toggle(showSelector: string, hideSelector: string) {
-        const sc = this.style.subclasses ??= {};
-        const h = sc[hideSelector] ??= {};
-        const d = sc[showSelector] ??= {};
-        d.display = "inherit";
-        h.display = "none";
-        return this;
-    }
-
-    public displayNone(... selectors: string[]) {
-        const sc = this.style.subclasses ??= {};
-        for (const iterator of selectors) {
-            const d = sc[iterator] ??= {};
-            d.display = "none";
-        }
-        return this;
-    }
-
-    /**
-     * Creates vertical flex layout with 5px gap
-     * @param p defaults { direction: "column", alignItems: "center", justifyContent: "space-around" }
-     * @param units px
-     */
-     public verticalFlexLayout(a: IFlexAttributes = {}, units: Units = "px") {
-        a.direction ??= "column";
-        return this.flexLayout(a, units);
-    }
-
-    /**
-     * Creates flex layout with 5px gap
-     * @param p defaults { direction: "row", alignItems: "center", justifyContent: "space-around" }
-     * @param units px
-     */
-    public flexLayout(
-    {
-        direction = "row",
-        alignItems = "center",
-        justifyContent = "space-around",
-        stretch,
-        inline,
-        gap = 4
-    }: IFlexAttributes = {},
-    units: Units = "px") {
-        if (direction !== void 0) {
-            this.style.flexDirection = direction;
-        }
-        if (alignItems !== void 0) {
-            this.style.alignItems = alignItems;
-        }
-        if (justifyContent !== void 0) {
-            this.style.justifyContent = justifyContent;
-        }
-        if (stretch) {
-            this.style.flex = "1 1 100%";
-        }
-        if (gap) {
-            this.style.gap = toUnit(gap, units);
-        }
-        this.style.display = inline ? "inline-flex" : "flex";
-        return this;
-    }
-
-    public toString() {
-        const list = [];
-        if (this.style) {
-            for (const key in this.style) {
-                if (Object.prototype.hasOwnProperty.call(this.style, key)) {
-                    const element = this.style[key];
-                    if (key === "subclasses") {
-                        throw new Error("Single AtomStyleRule cannot contain subclasses");
-                    }
-                    if (key === "toString") {
-                        continue;
-                    }
-                    if (!element) {
-                        continue;
-                    }
-                    const name = fromCamelToHyphen(key);
-                    if (element.url) {
-                        list.push(`${name}: url(${element.url})`);
-                        continue;
-                    }
-                    list.push(`${name}: ${element}`);
-                }
-            }
-        }
-        return list.join(";");
-    }
-}
-
-/**
- * Creates new style rule
- * @param selector [optional] name of child subclass
- * @returns StyleRuleClass
- */
-function StyleRule(selector?: string): AtomStyleRules {
-    return new AtomStyleRules(selector);
-}
-
-export default StyleRule;
-
-const styleId = 1;
-
-function fromCamelToHyphen(input: string): string {
-    return input.replace( /([a-z])([A-Z])/g, "$1-$2" ).toLowerCase();
-}
-
-function createStyleText(name: string, pairs: string[], styles: IStyleDeclaration): string[] {
-    const styleList: any[] = [];
-    for (const key in styles) {
-        if (styles.hasOwnProperty(key)) {
-            if (/^(\_\$\_|className$|toString$)/i.test(key)) {
-                continue;
-            }
-            const element = styles[key];
-            if (element === undefined || element === null) {
-                continue;
-            }
-            const keyName = fromCamelToHyphen(key);
-            if (key === "subclasses") {
-                const n = name;
-                for (const subclassKey in element) {
-                    if (element.hasOwnProperty(subclassKey)) {
-                        const ve = element[subclassKey];
-                        pairs = createStyleText(`${n}${subclassKey}`, pairs, ve);
-                    }
-                }
-            } else {
-                if (element.url) {
-                    styleList.push(`${keyName}: url(${element})`);
-                } else {
-                    styleList.push(`${keyName}: ${element}`);
-                }
-            }
-        }
-    }
-
-    if (!name) {
-        return [styleList.join(";")];
-    }
-
-    const cname = fromCamelToHyphen(name);
-
-    const styleClassName = `${cname}`;
-
-    if (styleList.length) {
-        pairs.push(`.${styleClassName} { ${styleList.join(";\r\n")}; }`);
-    }
-    return pairs;
-}