@web-atoms/core/dist/style/StyleRule.js

Web Atoms Core

System.register([], function (_export, _context) {
  "use strict";

  var AtomStyleRules, styleId;
  function toUnit(n, unit) {
    if (!unit) {
      unit = "";
    }
    return typeof n === "number" ? n + unit : n;
  }
  function StyleRule(selector) {
    return new AtomStyleRules(selector);
  }
  function fromCamelToHyphen(input) {
    return input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
  }
  function createStyleText(name, pairs, styles) {
    const styleList = [];
    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;
  }
  _export({
    toUnit: toUnit,
    AtomStyleRules: void 0
  });
  return {
    setters: [],
    execute: function () {
      _export("AtomStyleRules", AtomStyleRules = class AtomStyleRules {
        constructor(name) {
          this.style = {};
          if (typeof name === "string") {
            this.name = name;
          } else {
            this.style = name !== null && name !== void 0 ? name : {};
          }
        }
        alignContent(value) {
          if (value !== undefined && value !== null) {
            this.style.alignContent = value;
          }
          return this;
        }
        alignItems(value) {
          if (value !== undefined && value !== null) {
            this.style.alignItems = value;
          }
          return this;
        }
        alignSelf(value) {
          if (value !== undefined && value !== null) {
            this.style.alignSelf = value;
          }
          return this;
        }
        alignmentBaseline(value) {
          if (value !== undefined && value !== null) {
            this.style.alignmentBaseline = value;
          }
          return this;
        }
        animation(value) {
          if (value !== undefined && value !== null) {
            this.style.animation = value;
          }
          return this;
        }
        animationDelay(value) {
          if (value !== undefined && value !== null) {
            this.style.animationDelay = value;
          }
          return this;
        }
        animationDirection(value) {
          if (value !== undefined && value !== null) {
            this.style.animationDirection = value;
          }
          return this;
        }
        animationDuration(value) {
          if (value !== undefined && value !== null) {
            this.style.animationDuration = value;
          }
          return this;
        }
        animationFillMode(value) {
          if (value !== undefined && value !== null) {
            this.style.animationFillMode = value;
          }
          return this;
        }
        animationIterationCount(value) {
          if (value !== undefined && value !== null) {
            this.style.animationIterationCount = value;
          }
          return this;
        }
        animationName(value) {
          if (value !== undefined && value !== null) {
            this.style.animationName = value;
          }
          return this;
        }
        animationPlayState(value) {
          if (value !== undefined && value !== null) {
            this.style.animationPlayState = value;
          }
          return this;
        }
        animationTimingFunction(value) {
          if (value !== undefined && value !== null) {
            this.style.animationTimingFunction = value;
          }
          return this;
        }
        backfaceVisibility(value) {
          if (value !== undefined && value !== null) {
            this.style.backfaceVisibility = value;
          }
          return this;
        }
        background(value) {
          if (value !== undefined && value !== null) {
            this.style.background = value;
          }
          return this;
        }
        backgroundAttachment(value) {
          if (value !== undefined && value !== null) {
            this.style.backgroundAttachment = value;
          }
          return this;
        }
        backgroundBlendMode(value) {
          if (value !== undefined && value !== null) {
            this.style.backgroundBlendMode = value;
          }
          return this;
        }
        backgroundClip(value) {
          if (value !== undefined && value !== null) {
            this.style.backgroundClip = value;
          }
          return this;
        }
        backgroundColor(value) {
          if (value !== undefined && value !== null) {
            this.style.backgroundColor = value;
          }
          return this;
        }
        backgroundImage(value) {
          if (value !== undefined && value !== null) {
            this.style.backgroundImage = value;
          }
          return this;
        }
        backgroundOrigin(value) {
          if (value !== undefined && value !== null) {
            this.style.backgroundOrigin = value;
          }
          return this;
        }
        backgroundPosition(value) {
          if (value !== undefined && value !== null) {
            this.style.backgroundPosition = value;
          }
          return this;
        }
        backgroundPositionX(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.backgroundPositionX = toUnit(value, unit);
          }
          return this;
        }
        backgroundPositionY(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.backgroundPositionY = toUnit(value, unit);
          }
          return this;
        }
        backgroundRepeat(value) {
          if (value !== undefined && value !== null) {
            this.style.backgroundRepeat = value;
          }
          return this;
        }
        backgroundSize(value) {
          if (value !== undefined && value !== null) {
            this.style.backgroundSize = value;
          }
          return this;
        }
        baselineShift(value) {
          if (value !== undefined && value !== null) {
            this.style.baselineShift = value;
          }
          return this;
        }
        border(value) {
          if (value !== undefined && value !== null) {
            this.style.border = value;
          }
          return this;
        }
        borderBottom(value) {
          if (value !== undefined && value !== null) {
            this.style.borderBottom = value;
          }
          return this;
        }
        borderBottomColor(value) {
          if (value !== undefined && value !== null) {
            this.style.borderBottomColor = value;
          }
          return this;
        }
        borderBottomLeftRadius(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.borderBottomLeftRadius = toUnit(value, unit);
          }
          return this;
        }
        borderBottomRightRadius(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.borderBottomRightRadius = toUnit(value, unit);
          }
          return this;
        }
        borderBottomStyle(value) {
          if (value !== undefined && value !== null) {
            this.style.borderBottomStyle = value;
          }
          return this;
        }
        borderBottomWidth(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.borderBottomWidth = toUnit(value, unit);
          }
          return this;
        }
        borderCollapse(value) {
          if (value !== undefined && value !== null) {
            this.style.borderCollapse = value;
          }
          return this;
        }
        borderColor(value) {
          if (value !== undefined && value !== null) {
            this.style.borderColor = value;
          }
          return this;
        }
        borderImage(value) {
          if (value !== undefined && value !== null) {
            this.style.borderImage = value;
          }
          return this;
        }
        borderImageOutset(value) {
          if (value !== undefined && value !== null) {
            this.style.borderImageOutset = value;
          }
          return this;
        }
        borderImageRepeat(value) {
          if (value !== undefined && value !== null) {
            this.style.borderImageRepeat = value;
          }
          return this;
        }
        borderImageSlice(value) {
          if (value !== undefined && value !== null) {
            this.style.borderImageSlice = value;
          }
          return this;
        }
        borderImageSource(value) {
          if (value !== undefined && value !== null) {
            this.style.borderImageSource = value;
          }
          return this;
        }
        borderImageWidth(value) {
          if (value !== undefined && value !== null) {
            this.style.borderImageWidth = value;
          }
          return this;
        }
        borderLeft(value) {
          if (value !== undefined && value !== null) {
            this.style.borderLeft = value;
          }
          return this;
        }
        borderLeftColor(value) {
          if (value !== undefined && value !== null) {
            this.style.borderLeftColor = value;
          }
          return this;
        }
        borderLeftStyle(value) {
          if (value !== undefined && value !== null) {
            this.style.borderLeftStyle = value;
          }
          return this;
        }
        borderLeftWidth(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.borderLeftWidth = toUnit(value, unit);
          }
          return this;
        }
        borderRadius(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.borderRadius = toUnit(value, unit);
          }
          return this;
        }
        borderRight(value) {
          if (value !== undefined && value !== null) {
            this.style.borderRight = value;
          }
          return this;
        }
        borderRightColor(value) {
          if (value !== undefined && value !== null) {
            this.style.borderRightColor = value;
          }
          return this;
        }
        borderRightStyle(value) {
          if (value !== undefined && value !== null) {
            this.style.borderRightStyle = value;
          }
          return this;
        }
        borderRightWidth(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.borderRightWidth = toUnit(value, unit);
          }
          return this;
        }
        borderSpacing(value) {
          if (value !== undefined && value !== null) {
            this.style.borderSpacing = value;
          }
          return this;
        }
        borderStyle(value) {
          if (value !== undefined && value !== null) {
            this.style.borderStyle = value;
          }
          return this;
        }
        borderTop(value) {
          if (value !== undefined && value !== null) {
            this.style.borderTop = value;
          }
          return this;
        }
        borderTopColor(value) {
          if (value !== undefined && value !== null) {
            this.style.borderTopColor = value;
          }
          return this;
        }
        borderTopLeftRadius(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.borderTopLeftRadius = toUnit(value, unit);
          }
          return this;
        }
        borderTopRightRadius(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.borderTopRightRadius = toUnit(value, unit);
          }
          return this;
        }
        borderTopStyle(value) {
          if (value !== undefined && value !== null) {
            this.style.borderTopStyle = value;
          }
          return this;
        }
        borderTopWidth(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.borderTopWidth = toUnit(value, unit);
          }
          return this;
        }
        borderWidth(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.borderWidth = toUnit(value, unit);
          }
          return this;
        }
        bottom(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.bottom = toUnit(value, unit);
          }
          return this;
        }
        boxShadow(value) {
          if (value !== undefined && value !== null) {
            this.style.boxShadow = value;
          }
          return this;
        }
        boxSizing(value) {
          if (value !== undefined && value !== null) {
            this.style.boxSizing = value;
          }
          return this;
        }
        breakAfter(value) {
          if (value !== undefined && value !== null) {
            this.style.breakAfter = value;
          }
          return this;
        }
        breakBefore(value) {
          if (value !== undefined && value !== null) {
            this.style.breakBefore = value;
          }
          return this;
        }
        breakInside(value) {
          if (value !== undefined && value !== null) {
            this.style.breakInside = value;
          }
          return this;
        }
        captionSide(value) {
          if (value !== undefined && value !== null) {
            this.style.captionSide = value;
          }
          return this;
        }
        caretColor(value) {
          this.style.caretColor = value;
          return this;
        }
        clear(value) {
          if (value !== undefined && value !== null) {
            this.style.clear = value;
          }
          return this;
        }
        clip(value) {
          if (value !== undefined && value !== null) {
            this.style.clip = value;
          }
          return this;
        }
        clipPath(value) {
          if (value !== undefined && value !== null) {
            this.style.clipPath = value;
          }
          return this;
        }
        clipRule(value) {
          if (value !== undefined && value !== null) {
            this.style.clipRule = value;
          }
          return this;
        }
        color(value) {
          if (value !== undefined && value !== null) {
            this.style.color = value;
          }
          return this;
        }
        colorInterpolationFilters(value) {
          if (value !== undefined && value !== null) {
            this.style.colorInterpolationFilters = value;
          }
          return this;
        }
        columnCount(value) {
          if (value !== undefined && value !== null) {
            this.style.columnCount = value;
          }
          return this;
        }
        columnFill(value) {
          if (value !== undefined && value !== null) {
            this.style.columnFill = value;
          }
          return this;
        }
        columnGap(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.columnGap = toUnit(value, unit);
          }
          return this;
        }
        columnRule(value) {
          if (value !== undefined && value !== null) {
            this.style.columnRule = value;
          }
          return this;
        }
        columnRuleColor(value) {
          if (value !== undefined && value !== null) {
            this.style.columnRuleColor = value;
          }
          return this;
        }
        columnRuleStyle(value) {
          if (value !== undefined && value !== null) {
            this.style.columnRuleStyle = value;
          }
          return this;
        }
        columnRuleWidth(value) {
          if (value !== undefined && value !== null) {
            this.style.columnRuleWidth = value;
          }
          return this;
        }
        columnSpan(value) {
          if (value !== undefined && value !== null) {
            this.style.columnSpan = value;
          }
          return this;
        }
        columnWidth(value) {
          if (value !== undefined && value !== null) {
            this.style.columnWidth = value;
          }
          return this;
        }
        columns(value) {
          if (value !== undefined && value !== null) {
            this.style.columns = value;
          }
          return this;
        }
        content(value) {
          if (value !== undefined && value !== null) {
            this.style.content = value;
          }
          return this;
        }
        counterIncrement(value) {
          if (value !== undefined && value !== null) {
            this.style.counterIncrement = value;
          }
          return this;
        }
        counterReset(value) {
          if (value !== undefined && value !== null) {
            this.style.counterReset = value;
          }
          return this;
        }
        cssFloat(value) {
          if (value !== undefined && value !== null) {
            this.style.cssFloat = value;
          }
          return this;
        }
        cssText(value) {
          if (value !== undefined && value !== null) {
            this.style.cssText = value;
          }
          return this;
        }
        cursor(value) {
          if (value !== undefined && value !== null) {
            this.style.cursor = value;
          }
          return this;
        }
        direction(value) {
          if (value !== undefined && value !== null) {
            this.style.direction = value;
          }
          return this;
        }
        display(value) {
          if (value !== undefined && value !== null) {
            this.style.display = value;
          }
          return this;
        }
        dominantBaseline(value) {
          if (value !== undefined && value !== null) {
            this.style.dominantBaseline = value;
          }
          return this;
        }
        emptyCells(value) {
          if (value !== undefined && value !== null) {
            this.style.emptyCells = value;
          }
          return this;
        }
        enableBackground(value) {
          if (value !== undefined && value !== null) {
            this.style.enableBackground = value;
          }
          return this;
        }
        fill(value) {
          if (value !== undefined && value !== null) {
            this.style.fill = value;
          }
          return this;
        }
        fillOpacity(value) {
          if (value !== undefined && value !== null) {
            this.style.fillOpacity = value;
          }
          return this;
        }
        fillRule(value) {
          if (value !== undefined && value !== null) {
            this.style.fillRule = value;
          }
          return this;
        }
        filter(value) {
          if (value !== undefined && value !== null) {
            this.style.filter = value;
          }
          return this;
        }
        flex(value) {
          if (value !== undefined && value !== null) {
            this.style.flex = value;
          }
          return this;
        }
        flexBasis(value) {
          if (value !== undefined && value !== null) {
            this.style.flexBasis = value;
          }
          return this;
        }
        flexDirection(value) {
          if (value !== undefined && value !== null) {
            this.style.flexDirection = value;
          }
          return this;
        }
        flexFlow(value) {
          if (value !== undefined && value !== null) {
            this.style.flexFlow = value;
          }
          return this;
        }
        flexGrow(value) {
          if (value !== undefined && value !== null) {
            this.style.flexGrow = value;
          }
          return this;
        }
        flexShrink(value) {
          if (value !== undefined && value !== null) {
            this.style.flexShrink = value;
          }
          return this;
        }
        flexWrap(value) {
          if (value !== undefined && value !== null) {
            this.style.flexWrap = value;
          }
          return this;
        }
        float(value) {
          if (value !== undefined && value !== null) {
            this.style.float = value;
          }
          return this;
        }
        floodColor(value) {
          if (value !== undefined && value !== null) {
            this.style.floodColor = value;
          }
          return this;
        }
        floodOpacity(value) {
          if (value !== undefined && value !== null) {
            this.style.floodOpacity = value;
          }
          return this;
        }
        font(value) {
          if (value !== undefined && value !== null) {
            this.style.font = value;
          }
          return this;
        }
        fontFamily(value) {
          if (value !== undefined && value !== null) {
            this.style.fontFamily = value;
          }
          return this;
        }
        fontFeatureSettings(value) {
          if (value !== undefined && value !== null) {
            this.style.fontFeatureSettings = value;
          }
          return this;
        }
        fontSize(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.fontSize = toUnit(value, unit);
          }
          return this;
        }
        fontSizeAdjust(value) {
          if (value !== undefined && value !== null) {
            this.style.fontSizeAdjust = value;
          }
          return this;
        }
        fontStretch(value) {
          if (value !== undefined && value !== null) {
            this.style.fontStretch = value;
          }
          return this;
        }
        fontStyle(value) {
          if (value !== undefined && value !== null) {
            this.style.fontStyle = value;
          }
          return this;
        }
        fontVariant(value) {
          if (value !== undefined && value !== null) {
            this.style.fontVariant = value;
          }
          return this;
        }
        fontWeight(value) {
          if (value !== undefined && value !== null) {
            this.style.fontWeight = value;
          }
          return this;
        }
        gap(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.gap = toUnit(value, unit);
          }
          return this;
        }
        glyphOrientationHorizontal(value) {
          if (value !== undefined && value !== null) {
            this.style.glyphOrientationHorizontal = value;
          }
          return this;
        }
        glyphOrientationVertical(value) {
          if (value !== undefined && value !== null) {
            this.style.glyphOrientationVertical = value;
          }
          return this;
        }
        grid(value) {
          if (value !== undefined && value !== null) {
            this.style.grid = value;
          }
          return this;
        }
        gridArea(value) {
          if (value !== undefined && value !== null) {
            this.style.gridArea = value;
          }
          return this;
        }
        gridAutoColumns(value) {
          if (value !== undefined && value !== null) {
            this.style.gridAutoColumns = value;
          }
          return this;
        }
        gridAutoFlow(value) {
          if (value !== undefined && value !== null) {
            this.style.gridAutoFlow = value;
          }
          return this;
        }
        gridAutoRows(value) {
          if (value !== undefined && value !== null) {
            this.style.gridAutoRows = value;
          }
          return this;
        }
        gridColumn(value) {
          if (value !== undefined && value !== null) {
            this.style.gridColumn = value;
          }
          return this;
        }
        gridColumnEnd(value) {
          if (value !== undefined && value !== null) {
            this.style.gridColumnEnd = value;
          }
          return this;
        }
        gridColumnGap(value) {
          if (value !== undefined && value !== null) {
            this.style.gridColumnGap = value;
          }
          return this;
        }
        gridColumnStart(value) {
          if (value !== undefined && value !== null) {
            this.style.gridColumnStart = value;
          }
          return this;
        }
        gridGap(value) {
          if (value !== undefined && value !== null) {
            this.style.gridGap = value;
          }
          return this;
        }
        gridRow(value) {
          if (value !== undefined && value !== null) {
            this.style.gridRow = value;
          }
          return this;
        }
        gridRowEnd(value) {
          if (value !== undefined && value !== null) {
            this.style.gridRowEnd = value;
          }
          return this;
        }
        gridRowGap(value) {
          if (value !== undefined && value !== null) {
            this.style.gridRowGap = value;
          }
          return this;
        }
        gridRowStart(value) {
          if (value !== undefined && value !== null) {
            this.style.gridRowStart = value;
          }
          return this;
        }
        gridTemplate(value) {
          if (value !== undefined && value !== null) {
            this.style.gridTemplate = value;
          }
          return this;
        }
        gridTemplateAreas(value) {
          if (value !== undefined && value !== null) {
            this.style.gridTemplateAreas = value;
          }
          return this;
        }
        gridTemplateColumns(value) {
          if (value !== undefined && value !== null) {
            this.style.gridTemplateColumns = value;
          }
          return this;
        }
        gridTemplateRows(value) {
          if (value !== undefined && value !== null) {
            this.style.gridTemplateRows = value;
          }
          return this;
        }
        height(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.height = toUnit(value, unit);
          }
          return this;
        }
        imeMode(value) {
          if (value !== undefined && value !== null) {
            this.style.imeMode = value;
          }
          return this;
        }
        justifyContent(value) {
          if (value !== undefined && value !== null) {
            this.style.justifyContent = value;
          }
          return this;
        }
        justifyItems(value) {
          if (value !== undefined && value !== null) {
            this.style.justifyItems = value;
          }
          return this;
        }
        justifySelf(value) {
          if (value !== undefined && value !== null) {
            this.style.justifySelf = value;
          }
          return this;
        }
        kerning(value) {
          if (value !== undefined && value !== null) {
            this.style.kerning = value;
          }
          return this;
        }
        layoutGrid(value) {
          if (value !== undefined && value !== null) {
            this.style.layoutGrid = value;
          }
          return this;
        }
        layoutGridChar(value) {
          if (value !== undefined && value !== null) {
            this.style.layoutGridChar = value;
          }
          return this;
        }
        layoutGridLine(value) {
          if (value !== undefined && value !== null) {
            this.style.layoutGridLine = value;
          }
          return this;
        }
        layoutGridMode(value) {
          if (value !== undefined && value !== null) {
            this.style.layoutGridMode = value;
          }
          return this;
        }
        layoutGridType(value) {
          if (value !== undefined && value !== null) {
            this.style.layoutGridType = value;
          }
          return this;
        }
        left(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.left = toUnit(value, unit);
          }
          return this;
        }
        letterSpacing(value) {
          if (value !== undefined && value !== null) {
            this.style.letterSpacing = value;
          }
          return this;
        }
        lightingColor(value) {
          if (value !== undefined && value !== null) {
            this.style.lightingColor = value;
          }
          return this;
        }
        lineBreak(value) {
          if (value !== undefined && value !== null) {
            this.style.lineBreak = value;
          }
          return this;
        }
        lineHeight(value) {
          if (value !== undefined && value !== null) {
            this.style.lineHeight = value;
          }
          return this;
        }
        listStyle(value) {
          if (value !== undefined && value !== null) {
            this.style.listStyle = value;
          }
          return this;
        }
        listStyleImage(value) {
          if (value !== undefined && value !== null) {
            this.style.listStyleImage = value;
          }
          return this;
        }
        listStylePosition(value) {
          if (value !== undefined && value !== null) {
            this.style.listStylePosition = value;
          }
          return this;
        }
        listStyleType(value) {
          if (value !== undefined && value !== null) {
            this.style.listStyleType = value;
          }
          return this;
        }
        margin(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.margin = toUnit(value, unit);
          }
          return this;
        }
        marginBottom(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.marginBottom = toUnit(value, unit);
          }
          return this;
        }
        marginLeft(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.marginLeft = toUnit(value, unit);
          }
          return this;
        }
        marginRight(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.marginRight = toUnit(value, unit);
          }
          return this;
        }
        marginTop(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.marginTop = toUnit(value, unit);
          }
          return this;
        }
        marginInlineStart(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.marginInlineStart = toUnit(value, unit);
          }
          return this;
        }
        marginInlineEnd(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.marginInlineEnd = toUnit(value, unit);
          }
          return this;
        }
        marginBlockStart(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.marginBlockStart = toUnit(value, unit);
          }
          return this;
        }
        marginBlockEnd(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.marginBlockEnd = toUnit(value, unit);
          }
          return this;
        }
        marker(value) {
          if (value !== undefined && value !== null) {
            this.style.marker = value;
          }
          return this;
        }
        markerEnd(value) {
          if (value !== undefined && value !== null) {
            this.style.markerEnd = value;
          }
          return this;
        }
        markerMid(value) {
          if (value !== undefined && value !== null) {
            this.style.markerMid = value;
          }
          return this;
        }
        markerStart(value) {
          if (value !== undefined && value !== null) {
            this.style.markerStart = value;
          }
          return this;
        }
        mask(value) {
          if (value !== undefined && value !== null) {
            this.style.mask = value;
          }
          return this;
        }
        maskImage(value) {
          if (value !== undefined && value !== null) {
            this.style.maskImage = value;
          }
          return this;
        }
        maxHeight(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.maxHeight = toUnit(value, unit);
          }
          return this;
        }
        maxWidth(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.maxWidth = toUnit(value, unit);
          }
          return this;
        }
        minHeight(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.minHeight = toUnit(value, unit);
          }
          return this;
        }
        minWidth(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.minWidth = toUnit(value, unit);
          }
          return this;
        }
        msContentZoomChaining(value) {
          if (value !== undefined && value !== null) {
            this.style.msContentZoomChaining = value;
          }
          return this;
        }
        msContentZoomLimit(value) {
          if (value !== undefined && value !== null) {
            this.style.msContentZoomLimit = value;
          }
          return this;
        }
        msContentZoomLimitMax(value) {
          if (value !== undefined && value !== null) {
            this.style.msContentZoomLimitMax = value;
          }
          return this;
        }
        msContentZoomLimitMin(value) {
          if (value !== undefined && value !== null) {
            this.style.msContentZoomLimitMin = value;
          }
          return this;
        }
        msContentZoomSnap(value) {
          if (value !== undefined && value !== null) {
            this.style.msContentZoomSnap = value;
          }
          return this;
        }
        msContentZoomSnapPoints(value) {
          if (value !== undefined && value !== null) {
            this.style.msContentZoomSnapPoints = value;
          }
          return this;
        }
        msContentZoomSnapType(value) {
          if (value !== undefined && value !== null) {
            this.style.msContentZoomSnapType = value;
          }
          return this;
        }
        msContentZooming(value) {
          if (value !== undefined && value !== null) {
            this.style.msContentZooming = value;
          }
          return this;
        }
        msFlowFrom(value) {
          if (value !== undefined && value !== null) {
            this.style.msFlowFrom = value;
          }
          return this;
        }
        msFlowInto(value) {
          if (value !== undefined && value !== null) {
            this.style.msFlowInto = value;
          }
          return this;
        }
        msFontFeatureSettings(value) {
          if (value !== undefined && value !== null) {
            this.style.msFontFeatureSettings = value;
          }
          return this;
        }
        msGridColumn(value) {
          if (value !== undefined && value !== null) {
            this.style.msGridColumn = value;
          }
          return this;
        }
        msGridColumnAlign(value) {
          if (value !== undefined && value !== null) {
            this.style.msGridColumnAlign = value;
          }
          return this;
        }
        msGridColumnSpan(value) {
          if (value !== undefined && value !== null) {
            this.style.msGridColumnSpan = value;
          }
          return this;
        }
        msGridColumns(value) {
          if (value !== undefined && value !== null) {
            this.style.msGridColumns = value;
          }
          return this;
        }
        msGridRow(value) {
          if (value !== undefined && value !== null) {
            this.style.msGridRow = value;
          }
          return this;
        }
        msGridRowAlign(value) {
          if (value !== undefined && value !== null) {
            this.style.msGridRowAlign = value;
          }
          return this;
        }
        msGridRowSpan(value) {
          if (value !== undefined && value !== null) {
            this.style.msGridRowSpan = value;
          }
          return this;
        }
        msGridRows(value) {
          if (value !== undefined && value !== null) {
            this.style.msGridRows = value;
          }
          return this;
        }
        msHighContrastAdjust(value) {
          if (value !== undefined && value !== null) {
            this.style.msHighContrastAdjust = value;
          }
          return this;
        }
        msHyphenateLimitChars(value) {
          if (value !== undefined && value !== null) {
            this.style.msHyphenateLimitChars = value;
          }
          return this;
        }
        msHyphenateLimitLines(value) {
          if (value !== undefined && value !== null) {
            this.style.msHyphenateLimitLines = value;
          }
          return this;
        }
        msHyphenateLimitZone(value) {
          if (value !== undefined && value !== null) {
            this.style.msHyphenateLimitZone = value;
          }
          return this;
        }
        msHyphens(value) {
          if (value !== undefined && value !== null) {
            this.style.msHyphens = value;
          }
          return this;
        }
        msImeAlign(value) {
          if (value !== undefined && value !== null) {
            this.style.msImeAlign = value;
          }
          return this;
        }
        msOverflowStyle(value) {
          if (value !== undefined && value !== null) {
            this.style.msOverflowStyle = value;
          }
          return this;
        }
        msScrollChaining(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollChaining = value;
          }
          return this;
        }
        msScrollLimit(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollLimit = value;
          }
          return this;
        }
        msScrollLimitXMax(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollLimitXMax = value;
          }
          return this;
        }
        msScrollLimitXMin(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollLimitXMin = value;
          }
          return this;
        }
        msScrollLimitYMax(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollLimitYMax = value;
          }
          return this;
        }
        msScrollLimitYMin(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollLimitYMin = value;
          }
          return this;
        }
        msScrollRails(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollRails = value;
          }
          return this;
        }
        msScrollSnapPointsX(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollSnapPointsX = value;
          }
          return this;
        }
        msScrollSnapPointsY(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollSnapPointsY = value;
          }
          return this;
        }
        msScrollSnapType(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollSnapType = value;
          }
          return this;
        }
        msScrollSnapX(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollSnapX = value;
          }
          return this;
        }
        msScrollSnapY(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollSnapY = value;
          }
          return this;
        }
        msScrollTranslation(value) {
          if (value !== undefined && value !== null) {
            this.style.msScrollTranslation = value;
          }
          return this;
        }
        msTextCombineHorizontal(value) {
          if (value !== undefined && value !== null) {
            this.style.msTextCombineHorizontal = value;
          }
          return this;
        }
        msTextSizeAdjust(value) {
          if (value !== undefined && value !== null) {
            this.style.msTextSizeAdjust = value;
          }
          return this;
        }
        msTouchAction(value) {
          if (value !== undefined && value !== null) {
            this.style.msTouchAction = value;
          }
          return this;
        }
        msTouchSelect(value) {
          if (value !== undefined && value !== null) {
            this.style.msTouchSelect = value;
          }
          return this;
        }
        msUserSelect(value) {
          if (value !== undefined && value !== null) {
            this.style.msUserSelect = value;
          }
          return this;
        }
        msWrapFlow(value) {
          if (value !== undefined && value !== null) {
            this.style.msWrapFlow = value;
          }
          return this;
        }
        msWrapMargin(value) {
          if (value !== undefined && value !== null) {
            this.style.msWrapMargin = value;
          }
          return this;
        }
        msWrapThrough(value) {
          if (value !== undefined && value !== null) {
            this.style.msWrapThrough = value;
          }
          return this;
        }
        objectFit(value) {
          if (value !== undefined && value !== null) {
            this.style.objectFit = value;
          }
          return this;
        }
        objectPosition(value) {
          if (value !== undefined && value !== null) {
            this.style.objectPosition = value;
          }
          return this;
        }
        opacity(value) {
          if (value !== undefined && value !== null) {
            this.style.opacity = value;
          }
          return this;
        }
        order(value) {
          if (value !== undefined && value !== null) {
            this.style.order = value;
          }
          return this;
        }
        orphans(value) {
          if (value !== undefined && value !== null) {
            this.style.orphans = value;
          }
          return this;
        }
        outline(value) {
          if (value !== undefined && value !== null) {
            this.style.outline = value;
          }
          return this;
        }
        outlineColor(value) {
          if (value !== undefined && value !== null) {
            this.style.outlineColor = value;
          }
          return this;
        }
        outlineOffset(value) {
          if (value !== undefined && value !== null) {
            this.style.outlineOffset = value;
          }
          return this;
        }
        outlineStyle(value) {
          if (value !== undefined && value !== null) {
            this.style.outlineStyle = value;
          }
          return this;
        }
        outlineWidth(value) {
          if (value !== undefined && value !== null) {
            this.style.outlineWidth = value;
          }
          return this;
        }
        overflow(value) {
          if (value !== undefined && value !== null) {
            this.style.overflow = value;
          }
          return this;
        }
        overflowX(value) {
          if (value !== undefined && value !== null) {
            this.style.overflowX = value;
          }
          return this;
        }
        overflowY(value) {
          if (value !== undefined && value !== null) {
            this.style.overflowY = value;
          }
          return this;
        }
        padding(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.padding = toUnit(value, unit);
          }
          return this;
        }
        paddingBottom(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.paddingBottom = toUnit(value, unit);
          }
          return this;
        }
        paddingLeft(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.paddingLeft = toUnit(value, unit);
          }
          return this;
        }
        paddingRight(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.paddingRight = toUnit(value, unit);
          }
          return this;
        }
        paddingTop(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.paddingTop = toUnit(value, unit);
          }
          return this;
        }
        paddingInlineStart(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.paddingInlineStart = toUnit(value, unit);
          }
          return this;
        }
        paddingInlineEnd(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.paddingInlineEnd = toUnit(value, unit);
          }
          return this;
        }
        pageBreakAfter(value) {
          if (value !== undefined && value !== null) {
            this.style.pageBreakAfter = value;
          }
          return this;
        }
        pageBreakBefore(value) {
          if (value !== undefined && value !== null) {
            this.style.pageBreakBefore = value;
          }
          return this;
        }
        pageBreakInside(value) {
          if (value !== undefined && value !== null) {
            this.style.pageBreakInside = value;
          }
          return this;
        }
        penAction(value) {
          if (value !== undefined && value !== null) {
            this.style.penAction = value;
          }
          return this;
        }
        perspective(value) {
          if (value !== undefined && value !== null) {
            this.style.perspective = value;
          }
          return this;
        }
        perspectiveOrigin(value) {
          if (value !== undefined && value !== null) {
            this.style.perspectiveOrigin = value;
          }
          return this;
        }
        pointerEvents(value) {
          if (value !== undefined && value !== null) {
            this.style.pointerEvents = value;
          }
          return this;
        }
        position(value) {
          if (value !== undefined && value !== null) {
            this.style.position = value;
          }
          return this;
        }
        quotes(value) {
          if (value !== undefined && value !== null) {
            this.style.quotes = value;
          }
          return this;
        }
        resize(value) {
          if (value !== undefined && value !== null) {
            this.style.resize = value;
          }
          return this;
        }
        right(value, unit = "px") {
          if (value !== undefined && value !== null) {
            this.style.right = toUnit(value, unit);
          }
          return this;
        }
        rotate(value) {
          if (value !== undefined && value !== null) {
            this.style.rotate = value;
          }
          return this;
        }
        rowGap(value) {
          if (value !== undefined && value !== null) {
            this.style.rowGap = value;
          }
          return this;
        }
        rubyAlign(value) {
          if (value !== undefined && value !== null) {
            this.style.rubyAlign = value;
          }
          return this;
        }
        rubyOverhang(value) {
          if (value !== undefined && value !== null) {
            this.style.rubyOverhang = value;
          }
          return this;
        }
        rubyPosition(value) {
          if (value !== undefined && value !== null) {
            this.style.rubyPosition = value;
          }
          return this;
        }
        scale(value) {
          if (value !== undefined && value !== null) {
            this.style.scale = value;
          }
          return this;
        }
        custom(name, value) {
          this.style[name] = value;
          return this;
        }
        scrollBarWidth(value, unit) {
          var _a, _b;
          var _c, _d;
          this.style["scrollbar-width"] = toUnit(value, unit);
          (_a = (_c = this.style).subclasses) !== null && _a !== void 0 ? _a : _c.subclasses = {};
          const ws = (_b = (_d = this.style.subclasses)["::-webkit-scrollbar"]) !== null && _b !== void 0 ? _b : _d["::-webkit-scrollbar"] = {};
          ws.width = toUnit(value, unit);
          return this;
        }
        scrollBarColor(thumb, bg) {
          var _a, _b;
          var _c, _d;
          this.style["scrollbar-color"] = `${thumb} ${bg}`;
          (_a = (_c = this.style).subclasses) !== null && _a !== void 0 ? _a : _c.subclasses = {};
          const ws = (_b = (_d = this.style.s