css-in-props 3.4.4 → 3.4.6

package/dist/esm/props/animation.js

@@ -0,0 +1,101 @@
+import { isObject, isString } from "@domql/utils";
+import { emotion } from "@symbo.ls/emotion";
+import { getTimingByKey, getTimingFunction } from "@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 || emotion;
+  if (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 (isString(val) && val.includes(" ")) {
+      const parsed = parseAnimationShorthand(val, el);
+      return {
+        animationName: applyAnimationProps(parsed.name || val, el),
+        animationDuration: parsed.durations[0] || getTimingByKey(el.props.animationDuration || "A").timing,
+        animationDelay: parsed.durations[1] || getTimingByKey(el.props.animationDelay || "0s").timing,
+        animationTimingFunction: parsed.timingFunction || 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: getTimingByKey(el.props.animationDuration || "A").timing,
+      animationDelay: getTimingByKey(el.props.animationDelay || "0s").timing,
+      animationTimingFunction: 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: getTimingByKey(val).timing
+  }),
+  animationDelay: (val) => ({
+    animationDelay: getTimingByKey(val).timing
+  }),
+  animationTimingFunction: (val) => ({
+    animationTimingFunction: getTimingFunction(val)
+  }),
+  animationIterationCount: (val) => ({
+    animationIterationCount: val
+  }),
+  animationFillMode: (val) => ({
+    animationFillMode: val
+  }),
+  animationPlayState: (val) => ({
+    animationPlayState: val
+  }),
+  animationDirection: (val) => ({
+    animationDirection: val
+  })
+};
+export {
+  ANIMATION_PROPS
+};

package/dist/esm/props/block.js

@@ -0,0 +1,165 @@
+import { isUndefined, isString } from "@domql/utils";
+import {
+  getSpacingBasedOnRatio,
+  transformSize,
+  transformBorderRadius,
+  transformSizeRatio,
+  transfromGap
+} from "@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 }) => transformSizeRatio("height", val, props),
+  width: (val, { props }) => transformSizeRatio("width", val, props),
+  boxSizing: (val) => !isUndefined(val) ? { boxSizing: val } : { boxSizing: "border-box" },
+  boxSize: (val) => {
+    if (!isString(val)) return;
+    const [height, width] = val.split(" ");
+    return {
+      ...transformSize("height", height),
+      ...transformSize("width", width || height)
+    };
+  },
+  inlineSize: (val, { props }) => transformSizeRatio("inlineSize", val, props),
+  blockSize: (val, { props }) => transformSizeRatio("blockSize", val, props),
+  minWidth: (val, { props }) => transformSizeRatio("minWidth", val, props),
+  maxWidth: (val, { props }) => transformSizeRatio("maxWidth", val, props),
+  widthRange: (val) => {
+    if (!isString(val)) return;
+    const [minWidth, maxWidth] = val.split(" ");
+    return {
+      ...transformSize("minWidth", minWidth),
+      ...transformSize("maxWidth", maxWidth || minWidth)
+    };
+  },
+  minHeight: (val, { props }) => transformSizeRatio("minHeight", val, props),
+  maxHeight: (val, { props }) => transformSizeRatio("maxHeight", val, props),
+  heightRange: (val) => {
+    if (!isString(val)) return;
+    const [minHeight, maxHeight] = val.split(" ");
+    return {
+      ...transformSize("minHeight", minHeight),
+      ...transformSize("maxHeight", maxHeight || minHeight)
+    };
+  },
+  size: (val) => {
+    if (!isString(val)) return;
+    const [inlineSize, blockSize] = val.split(" ");
+    return {
+      ...transformSizeRatio("inlineSize", inlineSize),
+      ...transformSizeRatio("blockSize", blockSize || inlineSize)
+    };
+  },
+  minBlockSize: (val, { props }) => transformSizeRatio("minBlockSize", val, props),
+  minInlineSize: (val, { props }) => transformSizeRatio("minInlineSize", val, props),
+  maxBlockSize: (val, { props }) => transformSizeRatio("maxBlockSize", val, props),
+  maxInlineSize: (val, { props }) => transformSizeRatio("maxInlineSize", val, props),
+  minSize: (val) => {
+    if (!isString(val)) return;
+    const [minInlineSize, minBlockSize] = val.split(" ");
+    return {
+      ...transformSize("minInlineSize", minInlineSize),
+      ...transformSize("minBlockSize", minBlockSize || minInlineSize)
+    };
+  },
+  maxSize: (val) => {
+    if (!isString(val)) return;
+    const [maxInlineSize, maxBlockSize] = val.split(" ");
+    return {
+      ...transformSize("maxInlineSize", maxInlineSize),
+      ...transformSize("maxBlockSize", maxBlockSize || maxInlineSize)
+    };
+  },
+  borderWidth: (val, { props }) => transformSizeRatio("borderWidth", val, props),
+  padding: (val, { props }) => transformSizeRatio("padding", val, props),
+  scrollPadding: (val, { props }) => transformSizeRatio("scrollPadding", val, props),
+  paddingInline: (val) => {
+    if (!isString(val)) return;
+    const [paddingInlineStart, paddingInlineEnd] = val.split(" ");
+    return {
+      ...transformSize("paddingInlineStart", paddingInlineStart),
+      ...transformSize("paddingInlineEnd", paddingInlineEnd || paddingInlineStart)
+    };
+  },
+  paddingBlock: (val) => {
+    if (!isString(val)) return;
+    const [paddingBlockStart, paddingBlockEnd] = val.split(" ");
+    return {
+      ...transformSize("paddingBlockStart", paddingBlockStart),
+      ...transformSize("paddingBlockEnd", paddingBlockEnd || paddingBlockStart)
+    };
+  },
+  // Traditional directional padding
+  paddingTop: (val, { props }) => transformSizeRatio("paddingBlockStart", val, props),
+  paddingBottom: (val, { props }) => transformSizeRatio("paddingBlockEnd", val, props),
+  paddingLeft: (val, { props }) => transformSizeRatio("paddingInlineStart", val, props),
+  paddingRight: (val, { props }) => transformSizeRatio("paddingInlineEnd", val, props),
+  // Logical properties (for reference)
+  paddingBlockStart: (val, { props }) => transformSizeRatio("paddingBlockStart", val, props),
+  // maps to top
+  paddingBlockEnd: (val, { props }) => transformSizeRatio("paddingBlockEnd", val, props),
+  // maps to bottom
+  paddingInlineStart: (val, { props }) => transformSizeRatio("paddingInlineStart", val, props),
+  // maps to left
+  paddingInlineEnd: (val, { props }) => transformSizeRatio("paddingInlineEnd", val, props),
+  // maps to right
+  margin: (val, { props }) => transformSizeRatio("margin", val, props),
+  marginInline: (val) => {
+    if (!isString(val)) return;
+    const [marginInlineStart, marginInlineEnd] = val.split(" ");
+    return {
+      ...transformSize("marginInlineStart", marginInlineStart),
+      ...transformSize("marginInlineEnd", marginInlineEnd || marginInlineStart)
+    };
+  },
+  marginBlock: (val, { props }) => {
+    if (!isString(props.marginBlock)) return;
+    const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(" ");
+    return {
+      ...transformSize("marginBlockStart", marginBlockStart),
+      ...transformSize("marginBlockEnd", marginBlockEnd || marginBlockStart)
+    };
+  },
+  marginInlineStart: (val, { props }) => transformSizeRatio("marginInlineStart", val, props),
+  marginInlineEnd: (val, { props }) => transformSizeRatio("marginInlineEnd", val, props),
+  marginBlockStart: (val, { props }) => transformSizeRatio("marginBlockStart", val, props),
+  marginBlockEnd: (val, { props }) => transformSizeRatio("marginBlockEnd", val, props),
+  gap: (val) => ({
+    gap: transfromGap(val)
+  }),
+  columnGap: (val, { props }) => getSpacingBasedOnRatio(props, "columnGap", val),
+  rowGap: (val, { props }) => getSpacingBasedOnRatio(props, "rowGap", val),
+  flexWrap: (val, { props }) => ({
+    display: "flex",
+    flexFlow: (val || "row").split(" ")[0] + " " + props.flexWrap
+  }),
+  flexFlow: (val, { props }) => {
+    const { reverse } = props;
+    if (!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 (!isString(val)) return;
+    const [alignItems, justifyContent] = val.split(" ");
+    return {
+      display: "flex",
+      alignItems,
+      justifyContent
+    };
+  },
+  round: (val, { props }) => transformBorderRadius(val || props.borderRadius, props, "round"),
+  borderRadius: (val, { props }) => transformBorderRadius(val || props.round, props, "borderRadius")
+};
+export {
+  BLOCK_PROPS
+};

package/dist/esm/props/defaults.js

@@ -0,0 +1,321 @@
+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"
+]);
+export {
+  DEFAULT_CSS_PROPERTIES_LIST
+};

package/dist/esm/props/flex.js

@@ -0,0 +1,25 @@
+import { isString } from "@domql/utils";
+const FLEX_PROPS = {
+  flow: (value, el) => {
+    const { props } = el;
+    const { reverse } = props;
+    if (!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 };
+  }
+};
+export {
+  FLEX_PROPS
+};

package/dist/esm/props/font.js

@@ -0,0 +1,16 @@
+import { getFontSizeByKey, getFontFamily } from "@symbo.ls/scratch";
+const FONT_PROPS = {
+  fontSize: (value) => {
+    return getFontSizeByKey(value) || value;
+  },
+  fontFamily: (value) => ({
+    fontFamily: getFontFamily(value) || value
+  }),
+  fontWeight: (value) => ({
+    fontWeight: value,
+    fontVariationSettings: '"wght" ' + value
+  })
+};
+export {
+  FONT_PROPS
+};

package/dist/esm/props/grid.js

@@ -0,0 +1,19 @@
+const GRID_PROPS = {
+  area: (value) => ({ gridArea: value }),
+  template: (value) => ({ gridTemplate: value }),
+  templateAreas: (value) => ({ gridTemplateAreas: value }),
+  column: (value) => ({ gridColumn: value }),
+  columns: (value) => ({ gridTemplateColumns: value }),
+  templateColumns: (value) => ({ gridTemplateColumns: value }),
+  autoColumns: (value) => ({ gridAutoColumns: value }),
+  columnStart: (value) => ({ gridColumnStart: value }),
+  row: (value) => ({ gridRow: value }),
+  rows: (value) => ({ gridTemplateRows: value }),
+  templateRows: (value) => ({ gridTemplateRows: value }),
+  autoRows: (value) => ({ gridAutoRows: value }),
+  rowStart: (value) => ({ gridRowStart: value }),
+  autoFlow: (value) => ({ gridAutoFlow: value })
+};
+export {
+  GRID_PROPS
+};

package/dist/esm/props/index.js

@@ -0,0 +1,35 @@
+import { ANIMATION_PROPS } from "./animation";
+import { BLOCK_PROPS } from "./block";
+import { FONT_PROPS } from "./font";
+import { MISC_PROPS } from "./misc";
+import { POSITION_PROPS } from "./position";
+import { THEME_PROPS } from "./theme";
+import { TIMING_PROPS } from "./timing";
+import { FLEX_PROPS } from "./flex";
+import { GRID_PROPS } from "./grid";
+export * from "./animation";
+export * from "./block";
+export * from "./font";
+export * from "./misc";
+export * from "./position";
+export * from "./theme";
+export * from "./timing";
+export * from "./flex";
+export * from "./grid";
+const CSS_PROPS_REGISTRY = {
+  ...ANIMATION_PROPS,
+  ...BLOCK_PROPS,
+  ...FONT_PROPS,
+  ...MISC_PROPS,
+  ...MISC_PROPS,
+  ...POSITION_PROPS,
+  ...THEME_PROPS,
+  ...TIMING_PROPS,
+  ...FLEX_PROPS,
+  ...GRID_PROPS
+};
+var props_default = CSS_PROPS_REGISTRY;
+export {
+  CSS_PROPS_REGISTRY,
+  props_default as default
+};