css-in-props 3.4.4 → 3.4.6

package/dist/cjs/props/animation.js

@@ -0,0 +1,121 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var animation_exports = {};
+__export(animation_exports, {
+  ANIMATION_PROPS: () => ANIMATION_PROPS
+});
+module.exports = __toCommonJS(animation_exports);
+var import_utils = require("@domql/utils");
+var import_emotion = require("@symbo.ls/emotion");
+var import_scratch = require("@symbo.ls/scratch");
+const TIMING_FUNCTIONS = ["ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end"];
+const FILL_MODES = ["none", "forwards", "backwards", "both"];
+const DIRECTIONS = ["normal", "reverse", "alternate", "alternate-reverse"];
+const PLAY_STATES = ["running", "paused"];
+const isDuration = (v) => /^[\d.]+m?s$/.test(v);
+const applyAnimationProps = (animation, element) => {
+  const { emotion: ctxEmotion } = element.context;
+  const { keyframes } = ctxEmotion || import_emotion.emotion;
+  if ((0, import_utils.isObject)(animation)) return { animationName: keyframes(animation) };
+  const { ANIMATION } = element.context && element.context.designSystem;
+  const record = ANIMATION[animation];
+  return keyframes(record);
+};
+const parseAnimationShorthand = (val, el) => {
+  const { ANIMATION } = el.context && el.context.designSystem || {};
+  const tokens = val.split(/\s+/);
+  let name = null;
+  const durations = [];
+  let timingFunction = null;
+  let iterationCount = null;
+  let direction = null;
+  let fillMode = null;
+  let playState = null;
+  for (const token of tokens) {
+    if (ANIMATION && ANIMATION[token]) {
+      name = token;
+    } else if (isDuration(token)) {
+      durations.push(token);
+    } else if (TIMING_FUNCTIONS.includes(token) || token.startsWith("cubic-bezier") || token.startsWith("steps(")) {
+      timingFunction = token;
+    } else if (token === "infinite" || /^\d+$/.test(token)) {
+      iterationCount = token === "infinite" ? token : Number(token);
+    } else if (DIRECTIONS.includes(token)) {
+      direction = token;
+    } else if (FILL_MODES.includes(token)) {
+      fillMode = token;
+    } else if (PLAY_STATES.includes(token)) {
+      playState = token;
+    } else if (!name) {
+      name = token;
+    }
+  }
+  return { name, durations, timingFunction, iterationCount, direction, fillMode, playState };
+};
+const ANIMATION_PROPS = {
+  animation: (val, el) => {
+    if ((0, import_utils.isString)(val) && val.includes(" ")) {
+      const parsed = parseAnimationShorthand(val, el);
+      return {
+        animationName: applyAnimationProps(parsed.name || val, el),
+        animationDuration: parsed.durations[0] || (0, import_scratch.getTimingByKey)(el.props.animationDuration || "A").timing,
+        animationDelay: parsed.durations[1] || (0, import_scratch.getTimingByKey)(el.props.animationDelay || "0s").timing,
+        animationTimingFunction: parsed.timingFunction || (0, import_scratch.getTimingFunction)(el.props.animationTimingFunction || "ease"),
+        animationFillMode: parsed.fillMode || el.props.animationFillMode || "both",
+        animationIterationCount: parsed.iterationCount != null ? parsed.iterationCount : el.props.animationIterationCount || 1,
+        animationPlayState: parsed.playState || el.props.animationPlayState,
+        animationDirection: parsed.direction || el.props.animationDirection
+      };
+    }
+    return {
+      animationName: applyAnimationProps(val, el),
+      animationDuration: (0, import_scratch.getTimingByKey)(el.props.animationDuration || "A").timing,
+      animationDelay: (0, import_scratch.getTimingByKey)(el.props.animationDelay || "0s").timing,
+      animationTimingFunction: (0, import_scratch.getTimingFunction)(el.props.animationTimingFunction || "ease"),
+      animationFillMode: el.props.animationFillMode || "both",
+      animationIterationCount: el.props.animationIterationCount || 1,
+      animationPlayState: el.props.animationPlayState,
+      animationDirection: el.props.animationDirection
+    };
+  },
+  animationName: (val, el) => ({
+    animationName: applyAnimationProps(val, el)
+  }),
+  animationDuration: (val) => ({
+    animationDuration: (0, import_scratch.getTimingByKey)(val).timing
+  }),
+  animationDelay: (val) => ({
+    animationDelay: (0, import_scratch.getTimingByKey)(val).timing
+  }),
+  animationTimingFunction: (val) => ({
+    animationTimingFunction: (0, import_scratch.getTimingFunction)(val)
+  }),
+  animationIterationCount: (val) => ({
+    animationIterationCount: val
+  }),
+  animationFillMode: (val) => ({
+    animationFillMode: val
+  }),
+  animationPlayState: (val) => ({
+    animationPlayState: val
+  }),
+  animationDirection: (val) => ({
+    animationDirection: val
+  })
+};

package/dist/cjs/props/block.js

@@ -0,0 +1,179 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var block_exports = {};
+__export(block_exports, {
+  BLOCK_PROPS: () => BLOCK_PROPS
+});
+module.exports = __toCommonJS(block_exports);
+var import_utils = require("@domql/utils");
+var import_scratch = require("@symbo.ls/scratch");
+const BLOCK_PROPS = {
+  show: (val, el, s, ctx) => !!(ctx.utils.exec(val, el, s) === false) && {
+    display: "none !important"
+  },
+  hide: (val, el, s, ctx) => !!ctx.utils.exec(val, el, s) && {
+    display: "none !important"
+  },
+  height: (val, { props }) => (0, import_scratch.transformSizeRatio)("height", val, props),
+  width: (val, { props }) => (0, import_scratch.transformSizeRatio)("width", val, props),
+  boxSizing: (val) => !(0, import_utils.isUndefined)(val) ? { boxSizing: val } : { boxSizing: "border-box" },
+  boxSize: (val) => {
+    if (!(0, import_utils.isString)(val)) return;
+    const [height, width] = val.split(" ");
+    return {
+      ...(0, import_scratch.transformSize)("height", height),
+      ...(0, import_scratch.transformSize)("width", width || height)
+    };
+  },
+  inlineSize: (val, { props }) => (0, import_scratch.transformSizeRatio)("inlineSize", val, props),
+  blockSize: (val, { props }) => (0, import_scratch.transformSizeRatio)("blockSize", val, props),
+  minWidth: (val, { props }) => (0, import_scratch.transformSizeRatio)("minWidth", val, props),
+  maxWidth: (val, { props }) => (0, import_scratch.transformSizeRatio)("maxWidth", val, props),
+  widthRange: (val) => {
+    if (!(0, import_utils.isString)(val)) return;
+    const [minWidth, maxWidth] = val.split(" ");
+    return {
+      ...(0, import_scratch.transformSize)("minWidth", minWidth),
+      ...(0, import_scratch.transformSize)("maxWidth", maxWidth || minWidth)
+    };
+  },
+  minHeight: (val, { props }) => (0, import_scratch.transformSizeRatio)("minHeight", val, props),
+  maxHeight: (val, { props }) => (0, import_scratch.transformSizeRatio)("maxHeight", val, props),
+  heightRange: (val) => {
+    if (!(0, import_utils.isString)(val)) return;
+    const [minHeight, maxHeight] = val.split(" ");
+    return {
+      ...(0, import_scratch.transformSize)("minHeight", minHeight),
+      ...(0, import_scratch.transformSize)("maxHeight", maxHeight || minHeight)
+    };
+  },
+  size: (val) => {
+    if (!(0, import_utils.isString)(val)) return;
+    const [inlineSize, blockSize] = val.split(" ");
+    return {
+      ...(0, import_scratch.transformSizeRatio)("inlineSize", inlineSize),
+      ...(0, import_scratch.transformSizeRatio)("blockSize", blockSize || inlineSize)
+    };
+  },
+  minBlockSize: (val, { props }) => (0, import_scratch.transformSizeRatio)("minBlockSize", val, props),
+  minInlineSize: (val, { props }) => (0, import_scratch.transformSizeRatio)("minInlineSize", val, props),
+  maxBlockSize: (val, { props }) => (0, import_scratch.transformSizeRatio)("maxBlockSize", val, props),
+  maxInlineSize: (val, { props }) => (0, import_scratch.transformSizeRatio)("maxInlineSize", val, props),
+  minSize: (val) => {
+    if (!(0, import_utils.isString)(val)) return;
+    const [minInlineSize, minBlockSize] = val.split(" ");
+    return {
+      ...(0, import_scratch.transformSize)("minInlineSize", minInlineSize),
+      ...(0, import_scratch.transformSize)("minBlockSize", minBlockSize || minInlineSize)
+    };
+  },
+  maxSize: (val) => {
+    if (!(0, import_utils.isString)(val)) return;
+    const [maxInlineSize, maxBlockSize] = val.split(" ");
+    return {
+      ...(0, import_scratch.transformSize)("maxInlineSize", maxInlineSize),
+      ...(0, import_scratch.transformSize)("maxBlockSize", maxBlockSize || maxInlineSize)
+    };
+  },
+  borderWidth: (val, { props }) => (0, import_scratch.transformSizeRatio)("borderWidth", val, props),
+  padding: (val, { props }) => (0, import_scratch.transformSizeRatio)("padding", val, props),
+  scrollPadding: (val, { props }) => (0, import_scratch.transformSizeRatio)("scrollPadding", val, props),
+  paddingInline: (val) => {
+    if (!(0, import_utils.isString)(val)) return;
+    const [paddingInlineStart, paddingInlineEnd] = val.split(" ");
+    return {
+      ...(0, import_scratch.transformSize)("paddingInlineStart", paddingInlineStart),
+      ...(0, import_scratch.transformSize)("paddingInlineEnd", paddingInlineEnd || paddingInlineStart)
+    };
+  },
+  paddingBlock: (val) => {
+    if (!(0, import_utils.isString)(val)) return;
+    const [paddingBlockStart, paddingBlockEnd] = val.split(" ");
+    return {
+      ...(0, import_scratch.transformSize)("paddingBlockStart", paddingBlockStart),
+      ...(0, import_scratch.transformSize)("paddingBlockEnd", paddingBlockEnd || paddingBlockStart)
+    };
+  },
+  // Traditional directional padding
+  paddingTop: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingBlockStart", val, props),
+  paddingBottom: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingBlockEnd", val, props),
+  paddingLeft: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingInlineStart", val, props),
+  paddingRight: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingInlineEnd", val, props),
+  // Logical properties (for reference)
+  paddingBlockStart: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingBlockStart", val, props),
+  // maps to top
+  paddingBlockEnd: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingBlockEnd", val, props),
+  // maps to bottom
+  paddingInlineStart: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingInlineStart", val, props),
+  // maps to left
+  paddingInlineEnd: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingInlineEnd", val, props),
+  // maps to right
+  margin: (val, { props }) => (0, import_scratch.transformSizeRatio)("margin", val, props),
+  marginInline: (val) => {
+    if (!(0, import_utils.isString)(val)) return;
+    const [marginInlineStart, marginInlineEnd] = val.split(" ");
+    return {
+      ...(0, import_scratch.transformSize)("marginInlineStart", marginInlineStart),
+      ...(0, import_scratch.transformSize)("marginInlineEnd", marginInlineEnd || marginInlineStart)
+    };
+  },
+  marginBlock: (val, { props }) => {
+    if (!(0, import_utils.isString)(props.marginBlock)) return;
+    const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(" ");
+    return {
+      ...(0, import_scratch.transformSize)("marginBlockStart", marginBlockStart),
+      ...(0, import_scratch.transformSize)("marginBlockEnd", marginBlockEnd || marginBlockStart)
+    };
+  },
+  marginInlineStart: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginInlineStart", val, props),
+  marginInlineEnd: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginInlineEnd", val, props),
+  marginBlockStart: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginBlockStart", val, props),
+  marginBlockEnd: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginBlockEnd", val, props),
+  gap: (val) => ({
+    gap: (0, import_scratch.transfromGap)(val)
+  }),
+  columnGap: (val, { props }) => (0, import_scratch.getSpacingBasedOnRatio)(props, "columnGap", val),
+  rowGap: (val, { props }) => (0, import_scratch.getSpacingBasedOnRatio)(props, "rowGap", val),
+  flexWrap: (val, { props }) => ({
+    display: "flex",
+    flexFlow: (val || "row").split(" ")[0] + " " + props.flexWrap
+  }),
+  flexFlow: (val, { props }) => {
+    const { reverse } = props;
+    if (!(0, import_utils.isString)(val)) return;
+    let [direction, wrap] = (val || "row").split(" ");
+    if (val.startsWith("x") || val === "row") direction = "row";
+    if (val.startsWith("y") || val === "column") direction = "column";
+    return {
+      display: "flex",
+      flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
+    };
+  },
+  flexAlign: (val) => {
+    if (!(0, import_utils.isString)(val)) return;
+    const [alignItems, justifyContent] = val.split(" ");
+    return {
+      display: "flex",
+      alignItems,
+      justifyContent
+    };
+  },
+  round: (val, { props }) => (0, import_scratch.transformBorderRadius)(val || props.borderRadius, props, "round"),
+  borderRadius: (val, { props }) => (0, import_scratch.transformBorderRadius)(val || props.round, props, "borderRadius")
+};

package/dist/cjs/props/defaults.js

@@ -0,0 +1,340 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var defaults_exports = {};
+__export(defaults_exports, {
+  DEFAULT_CSS_PROPERTIES_LIST: () => DEFAULT_CSS_PROPERTIES_LIST
+});
+module.exports = __toCommonJS(defaults_exports);
+const DEFAULT_CSS_PROPERTIES_LIST = /* @__PURE__ */ new Set([
+  "accentColor",
+  "alignContent",
+  "alignItems",
+  "alignSelf",
+  "alignmentBaseline",
+  "all",
+  "animation",
+  "animationDelay",
+  "animationDirection",
+  "animationDuration",
+  "animationFillMode",
+  "animationIterationCount",
+  "animationName",
+  "animationPlayState",
+  "animationTimingFunction",
+  "appearance",
+  "aspectRatio",
+  "backdropFilter",
+  "backfaceVisibility",
+  "background",
+  "backgroundAttachment",
+  "backgroundBlendMode",
+  "backgroundClip",
+  "backgroundColor",
+  "backgroundImage",
+  "backgroundOrigin",
+  "backgroundPosition",
+  "backgroundPositionX",
+  "backgroundPositionY",
+  "backgroundRepeat",
+  "backgroundRepeatX",
+  "backgroundRepeatY",
+  "backgroundSize",
+  "baselineShift",
+  "blockSize",
+  "border",
+  "borderBlock",
+  "borderBlockColor",
+  "borderBlockEnd",
+  "borderBlockEndColor",
+  "borderBlockEndStyle",
+  "borderBlockEndWidth",
+  "borderBlockStart",
+  "borderBlockStartColor",
+  "borderBlockStartStyle",
+  "borderBlockStartWidth",
+  "borderBlockStyle",
+  "borderBlockWidth",
+  "borderBottom",
+  "borderBottomColor",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "borderBottomStyle",
+  "borderBottomWidth",
+  "borderCollapse",
+  "borderColor",
+  "borderImage",
+  "borderImageOutset",
+  "borderImageRepeat",
+  "borderImageSlice",
+  "borderImageSource",
+  "borderImageWidth",
+  "borderLeft",
+  "borderLeftColor",
+  "borderLeftStyle",
+  "borderLeftWidth",
+  "borderRadius",
+  "borderRight",
+  "borderRightColor",
+  "borderRightStyle",
+  "borderRightWidth",
+  "borderSpacing",
+  "borderStyle",
+  "borderTop",
+  "borderTopColor",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderTopStyle",
+  "borderTopWidth",
+  "borderWidth",
+  "bottom",
+  "boxDecorationBreak",
+  "boxShadow",
+  "boxSizing",
+  "breakAfter",
+  "breakBefore",
+  "breakInside",
+  "captionSide",
+  "caretColor",
+  "clear",
+  "clip",
+  "clipPath",
+  "color",
+  "colorAdjust",
+  "colorInterpolation",
+  "colorInterpolationFilters",
+  "colorRendering",
+  "columnCount",
+  "columnFill",
+  "columnGap",
+  "columnRule",
+  "columnRuleColor",
+  "columnRuleStyle",
+  "columnRuleWidth",
+  "columnSpan",
+  "columnWidth",
+  "columns",
+  "contain",
+  "content",
+  "counterIncrement",
+  "counterReset",
+  "cursor",
+  "direction",
+  "display",
+  "emptyCells",
+  "filter",
+  "flex",
+  "flexBasis",
+  "flexDirection",
+  "flexFlow",
+  "flexGrow",
+  "flexShrink",
+  "flexWrap",
+  "float",
+  "font",
+  "fontFamily",
+  "fontFeatureSettings",
+  "fontKerning",
+  "fontLanguageOverride",
+  "fontSize",
+  "fontSizeAdjust",
+  "fontStretch",
+  "fontStyle",
+  "fontVariant",
+  "fontVariantAlternates",
+  "fontVariantCaps",
+  "fontVariantEastAsian",
+  "fontVariantNumeric",
+  "fontVariantPosition",
+  "fontWeight",
+  "fontVariationSettings",
+  "fontSynthesis",
+  "forcedColorAdjust",
+  "gap",
+  "grid",
+  "gridArea",
+  "gridAutoColumns",
+  "gridAutoFlow",
+  "gridAutoRows",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnGap",
+  "gridColumnStart",
+  "gridGap",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowGap",
+  "gridRowStart",
+  "gridTemplate",
+  "gridTemplateAreas",
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "height",
+  "hyphens",
+  "imageOrientation",
+  "imageRendering",
+  "imeMode",
+  "inset",
+  "insetBlock",
+  "insetBlockEnd",
+  "insetBlockStart",
+  "insetInline",
+  "insetInlineEnd",
+  "insetInlineStart",
+  "initialLetter",
+  "isolation",
+  "justifyContent",
+  "justifyItems",
+  "justifySelf",
+  "left",
+  "letterSpacing",
+  "lineBreak",
+  "lineClamp",
+  "lineHeight",
+  "listStyle",
+  "listStyleImage",
+  "listStylePosition",
+  "listStyleType",
+  "margin",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+  "marginTop",
+  "marginBlock",
+  "marginBlockEnd",
+  "marginBlockStart",
+  "marginInline",
+  "marginInlineEnd",
+  "marginInlineStart",
+  "mask",
+  "maskBorder",
+  "maskBorderImage",
+  "maskBorderOutset",
+  "maskBorderRepeat",
+  "maskBorderSlice",
+  "maskBorderSource",
+  "maskBorderWidth",
+  "maskClip",
+  "maskComposite",
+  "maskImage",
+  "maskOrigin",
+  "maskPosition",
+  "maskRepeat",
+  "maskSize",
+  "maskType",
+  "maxBlockSize",
+  "maxHeight",
+  "maxInlineSize",
+  "maxWidth",
+  "minBlockSize",
+  "minHeight",
+  "minInlineSize",
+  "minWidth",
+  "mixBlendMode",
+  "objectFit",
+  "objectPosition",
+  "objectViewBox",
+  "offset",
+  "offsetDistance",
+  "offsetPath",
+  "offsetRotate",
+  "opacity",
+  "order",
+  "orientation",
+  "outline",
+  "outlineColor",
+  "outlineOffset",
+  "outlineStyle",
+  "outlineWidth",
+  "overflow",
+  "overflowAnchor",
+  "overflowClip",
+  "overflowScrolling",
+  "overflowWrap",
+  "overflowX",
+  "overflowY",
+  "padding",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingTop",
+  "pageBreakAfter",
+  "pageBreakBefore",
+  "pageBreakInside",
+  "paintOrder",
+  "perspective",
+  "perspectiveOrigin",
+  "placeContent",
+  "placeItems",
+  "placeSelf",
+  "pointerEvents",
+  "position",
+  "resize",
+  "right",
+  "rotate",
+  "rowGap",
+  "scrollBehavior",
+  "scrollPadding",
+  "scrollSnapAlign",
+  "scrollSnapType",
+  "scrollbarColor",
+  "scrollbarWidth",
+  "shapeImageThreshold",
+  "shapeMargin",
+  "shapeOutside",
+  "tabSize",
+  "tableLayout",
+  "textAlign",
+  "textAlignLast",
+  "textDecoration",
+  "textDecorationColor",
+  "textDecorationLine",
+  "textDecorationSkipInk",
+  "textDecorationStyle",
+  "textDecorationThickness",
+  "textIndent",
+  "textOverflow",
+  "textShadow",
+  "textTransform",
+  "textUnderlineOffset",
+  "top",
+  "transform",
+  "transformOrigin",
+  "transformStyle",
+  "transition",
+  "transitionDelay",
+  "transitionDuration",
+  "transitionProperty",
+  "transitionTimingFunction",
+  "translate",
+  "translateX",
+  "translateY",
+  "translateZ",
+  "unicodeBidi",
+  "userSelect",
+  "verticalAlign",
+  "visibility",
+  "whiteSpace",
+  "widows",
+  "width",
+  "willChange",
+  "wordBreak",
+  "wordSpacing",
+  "wordWrap",
+  "writingMode",
+  "zIndex"
+]);

package/dist/cjs/props/flex.js

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var flex_exports = {};
+__export(flex_exports, {
+  FLEX_PROPS: () => FLEX_PROPS
+});
+module.exports = __toCommonJS(flex_exports);
+var import_utils = require("@domql/utils");
+const FLEX_PROPS = {
+  flow: (value, el) => {
+    const { props } = el;
+    const { reverse } = props;
+    if (!(0, import_utils.isString)(value)) return;
+    let [direction, wrap] = (value || "row").split(" ");
+    if (value.startsWith("x") || value === "row") direction = "row";
+    if (value.startsWith("y") || value === "column") direction = "column";
+    return {
+      display: "flex",
+      flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
+    };
+  },
+  wrap: (value, { props }) => {
+    return { display: "flex", flexWrap: value };
+  },
+  align: (value, { props }) => {
+    const [alignItems, justifyContent] = value.split(" ");
+    return { display: "flex", alignItems, justifyContent };
+  }
+};