@web-atoms/core/src/style/StyleRule.ts

Web Atoms Core

import { ColorItem } from "../core/Colors";
import WebImage from "../core/WebImage";
import { IStyleDeclaration } from "../web/styles/IStyleDeclaration";

export type StylePosition = "" | "default" | "initial" | "static" | "relative" | "absolute" | string;
export type TextAlignType = "" | "default" | "initial" | "left" | "right" | "center" | "justify";
export type FloatPosition = "" | "default" | "none" | "left" | "right" | "initial" | "inherit";
export type OverFlowType = "" | "default" | "visible" | "hidden" | "scroll" | "auto";
export type ItemAlignType =  "" | "default" | "stretch" | "center" |"flex-start" | "flex-end" | "baseline" |
"initial" | "inherit" | "start" | "end";
export type SelfAlignType =  "" | "default" | "auto" | "stretch" | "center" |"flex-start" | "flex-end" | "baseline" |
"initial" | "inherit";
export type ContentAlignType =  "" | "default" | "stretch" | "center" |"flex-start" | "flex-end" | "space-between" |
"space-around" | "initial" | "inherit";
export type JustifyType = "" | "default" | "auto" | "inter-word" | "inter-character" | "none" | "initial" |
"inherit";
export type TextSize = "" | "default" | "medium" | "xx-small" | "x-small" | "small" | "large" |
"x-large" | "xx-large" | "smaller" | "larger" | "initial" | "inherit";
export type AnimationType = "" | "animation-name" | "animation-duration" | "animation-timing-function" |
"animation-delay" | "animation-iteration-count" | "animation-direction" |"animation-fill-mode" |
"animation-play-state" | "initial" | "inherit";
export type AnimationNameType = "" | "keyframename" | "none" | "initial" | "inherit";
export type AnimationDirection = "" | "default" | "reverse" | "alternate" | "alternate-reverse" | "initial" |
"inherit";
export type AnimationTimeType = "" | "initial" | "inherit";
export type AnimationModeType = "" | "default" | "none" | "forwards" | "backwards" | "both" | "initial" |
"inherit";
export type IterationCount = "" | "default" | "infinite" | "initial" |"inherit";
export type PlayState = "" | "default" | "paused" | "running" | "initial" | "inherit";
export type TimingFunction = "" | "default" | "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" |
"step-start" | "step-end" | "steps()" | "cubic-bezier()" | "initial" | "inherit";
export type Visibility = "" | "default" | "visible" | "hidden" | "initial" | "inherit";
export type BackgroundType = "" | "background-color" | "background-image" | "background-position" |
"background-size" | "background-repeat" | "background-origin" |"background-clip" | "background-attachment" |
"initial" | "inherit";
export type BackgroundAttachmentType = "" | "default" | "scroll" | "fixed" | "local" |"initial" | "inherit" |
string;
export type BackgroundBlendType = "" | "default" | "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" |
"color-dodge" | "saturation" | "color" | "luminosity" |"initial" | "inherit";
export type BackgroundClipType = "" | "default" | "border-box" | "padding-box" | "content-box" |"initial" |
"inherit";
export type BackgroundImageType = "" | "default" | "url()" | "none" | "linear-gradient()" |"radial-gradient()" |
"repeating-linear-gradient()" | "repeating-radial-gradient()" | "initial" | "inherit";
export type BackgroundOriginType = "" | "default" | "padding-box" | "border-box" | "content-box" |"initial" |
"inherit";
export type BackgroundPositionType = "" | "default" | "left top" | "left center" | "left bottom" |"right top" |
"right center" | "right bottom" | "center top" | "center center" | "center bottom" | "0% 0%" | "0px 0px" |
"initial" | "inherit";
export type BackgroundRepeatType = "" | "default" | "repeat" | "repeat-x" | "repeat-y" | "no-repeat" | "space" |
"round" |"initial" | "inherit";
export type BackgroundSizeType = "" | "default" | "auto" | "0px" | "0px 0px" | "0%" | "50% 50%" | "cover" |
"contain" |"initial" | "inherit";
export type BorderStyleType = "" | "default" | "none" | "hidden" | "dotted" | "dashed" | "solid" | "double" |
"groove" | "ridge" | "inset" | "outset" | "initial" | "inherit";
export type CommonWidthType = "" | "default" | "medium" | "thin" | "thick" | "initial" | "inherit";
export type BorderCollapseType = "" | "default" | "separate" | "collapse" | "initial" | "inherit";
export type BorderImageRepeatType = "" | "default" | "stretch" | "repeat" | "round" | "space" | "initial" |
"inherit";
// export type BorderRadiusType = "" | "default" | "0px" | "0px 0px" | "0px 0px 0px" | "0px 0px 0px" | "0%" |
// "initial" | "inherit";
export type BorderSpacingType = "" | "default" | "0px" | "0px 0px" | "initial" | "inherit" | null | string;
export type BoxSizingType = "" | "default" | "border-box" | "content-box" |"initial" | "inherit";
export type CaptionSideType = "" | "default" | "top" | "bottom" | "initial" | "inherit";
export type ClearType = "" | "default" | "none" | "left" |"right" | "both" | "initial" | "inherit";
export type ColumnCountType = "" | "default" | "auto" | "initial" | "inherit" | number;
export type ColumnGapType = "" | "default" | "normal" | "initial" | "inherit";
export type ContentType = "" | "default" | "none" | "normal" | "counter" | "attr()" | "open-quote" | "close-quote" |
"no-open-quote" | "no-close-quote" | "url()" | "initial" | "inherit";
export type CursorType = "" | "alias" | "all-scroll" | "auto" | "cell" |"context-menu" |"col-resize" | "copy" |
"crosshair" | "default" | "e-resize" | "ew-resize" | "grab" | "grabbing" |"help" |"move" | "n-resize" | "ne-resize" |
"nesw-resize" | "ns-resize" | "nw-resize" | "nwse-resize" | "no-drop" | "none" | "not-allowed" | "pointer" |
"progress" | "row-resize" | "s-resize" | "se-resize" | "sw-resize" | "text" | "url()" | "vertical-text" | "w-resize" |
"wait" | "zoom-in" | "zoom-out" |"initial" | "inherit";
export type DirectionType = "" | "default" | "ltr" | "rtl" | "initial" | "inherit";
export type DisplayType = "" | "default" | "inline" | "block" | "contents" |"flex" | "grid" | "inline-block" |
"inline-flex" | "inline-grid" | "inline-table" | "list-item" | "run-in" | "table" | "table-caption" |
"table-column-group" | "table-header-group" | "table-footer-group" | "table-row-group" | "table-cell" |
"table-column" | "table-row" | "none" | "none" | "initial" | "inherit";
export type EmptyCellType = "" | "default" | "show" | "hide" | "initial" | "inherit";
export type FilterType = "" | "none" | "blur()" | "brightness()" | "contrast()" | "drop-shadow()" | "grayscale()" |
"hue-rotate()" | "invert()" | "opacity()" | "saturate()" | "sepia()" | "url()" | "initial" | "inherit";
export type FlexDirectionType = "" | "default" | "row" | "row-reverse" | "column" | "column-reverse" |
"initial" | "inherit";
export type FlexFlowDirectionType = "" | "default" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" |
"unset" | "wrap" | "wrap-reverse" |"initial" | "inherit";
export type FlexWrapType = "" | "default" | "nowrap" | "wrap" | "wrap-reverse" | "initial" | "inherit";
export type FloatType = "" | "default" | "none" | "left" | "right" | "initial" | "inherit";
export type FontStretchType = "" | "default" | "ultra-condensed" | "extra-condensed" | "condensed" | "semi-condensed" |
"normal" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded" | "initial" | "inherit";
export type FontStyleType = "" | "default" | "normal" | "italic" | "oblique" | "initial" | "inherit";
export type FontVariantType = "" | "default" | "normal" | "small-caps" | "initial" | "inherit";
export type FontWeightType = "" | "default" | "normal" | "bold" | "bolder" | "lighter" | "initial" | "inherit" |
string;
export type GridAutoColumnsType = "" | "default" | "auto" | "max-content" | "min-content";
export type GridAutoFlowType = "" | "default" | "row" | "column" | "row dense" | "column dense";
export type GridAutoRowsType = "" | "default" | "auto" | "max-content" | "min-content";
export type JustifyContentType = "" | "default" | "flex-start" | "flex-end" | "center" | "space-between" |
"space-around" | "initial" | "inherit";
export type ListStylePositionType = "" | "default" | "inside" | "max-content" | "outside" | "initial" |
"inherit";
export type ListStyleType = "" | "default" | "disc" | "circle" | "none" | "square";
export type ObjectFitType = "" | "default" | "fill" | "contain" | "cover" | "none" | "scale-down" |
"initial" | "inherit";
export type ObjectPositionType = "" | "default" | "fill" | "contain" | "cover" | "none" | "scale-down" |
"initial" | "inherit";
export type PageBreakCommonType = "" | "default" | "auto" | "always" | "avoid" | "left" | "right" |
"initial" | "inherit";
export type PageBreakInsideType = "" | "default" | "auto"| "avoid" | "initial" | "inherit";
export type ResizeType = "" | "default" | "none" | "both" | "horizontal" | "vertical" | "initial" |
"inherit";
export type TableLayoutType = "" | "default" | "auto" | "fixed" | "initial" | "inherit";
export type TextAlignLastType = "" | "default" | "auto" | "left" | "right" | "center" | "justify" |
"start" | "end" | "initial" | "inherit"| string;
export type TextDecorationType = "" | "none" | "underline" | "overline" | "line-through" |
"initial" | "inherit";
export type TextTransformType = "" | "none" | "capitalize" | "uppercase" | "lowercase" | "initial" |
"inherit";
export type TransformType = "" | "default" | "none" | "matrix()" | "matrix3d()" | "translate()" | "translate3d()" |
"translateX()" | "translateY()" | "translateZ()" | "scale()" | "scale3d()" | "scaleX()" | "scaleY()" | "scaleZ()" |
"rotate()" | "rotate3d()" | "rotateX()" | "rotateY()" | "rotateZ()" | "skew()" | "skewX()" | "skewY()" |
"perspective()" | "initial" | "inherit";
export type TransformStyleType = "" | "default" | "flat" | "preserve-3d" | "initial" | "inherit";
export type VisibilityType = "" | "default" | "visible" | "hidden" | "collapse" | "initial" | "inherit";
export type WhiteSpaceType = "" | "default" | "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap" |
"initial" | "inherit";
export type WordBreakType = "" | "default" | "normal" | "break-all" | "keep-all" | "break-word" |
"initial" | "inherit";
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;
        }