css-in-props 3.14.0 → 3.14.1

package/README.md

@@ -71,7 +71,7 @@ import { transformersByPrefix } from 'css-in-props'
 
 The `$` prefix is used both by css-in-props (`$isActive` case conditional) and by the define system (e.g. `$router`). The framework resolves this by checking for define handlers before applying prefix rules. Keys with matching define handlers stay at the element root; only `$`-prefixed keys without define handlers are processed by css-in-props.
 
-> In v4, properties go directly on the element (no `props:` wrapper). The CSS engine processes design token properties internally.
+> In v3.14, properties go directly on the element (no `props:` wrapper). The CSS engine processes design token properties internally.
 
 ## Global Cases
 

package/dist/cjs/{props/defaults.js → defaults.js}

@@ -20,7 +20,7 @@ __export(defaults_exports, {
   DEFAULT_CSS_PROPERTIES_LIST: () => DEFAULT_CSS_PROPERTIES_LIST
 });
 module.exports = __toCommonJS(defaults_exports);
-const DEFAULT_CSS_PROPERTIES_LIST = /* @__PURE__ */ new Set([
+const DEFAULT_CSS_PROPERTIES_LIST = [
   "accentColor",
   "alignContent",
   "alignItems",
@@ -337,4 +337,4 @@ const DEFAULT_CSS_PROPERTIES_LIST = /* @__PURE__ */ new Set([
   "wordWrap",
   "writingMode",
   "zIndex"
-]);
+];

package/dist/cjs/{transform/index.js → emotion.js}

@@ -3,6 +3,10 @@ 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))
@@ -11,9 +15,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var transform_exports = {};
-module.exports = __toCommonJS(transform_exports);
-__reExport(transform_exports, require("./executors.js"), module.exports);
-__reExport(transform_exports, require("./transformers.js"), module.exports);
+var emotion_exports = {};
+__export(emotion_exports, {
+  transformEmotion: () => transformEmotion
+});
+module.exports = __toCommonJS(emotion_exports);
+var import_utils = require("@domql/utils");
+var import_emotion = require("@symbo.ls/emotion");
+const { css } = import_emotion.emotion;
+const transformEmotion = (props, callback) => {
+  return (0, import_utils.isFunction)(callback) ? callback(props) : css(props);
+};

package/dist/cjs/index.js

@@ -3,6 +3,10 @@ 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))
@@ -14,8 +18,21 @@ var __copyProps = (to, from, except, desc) => {
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
+__export(index_exports, {
+  exetuteClassPerComponent: () => exetuteClassPerComponent
+});
 module.exports = __toCommonJS(index_exports);
-__reExport(index_exports, require("./transform/index.js"), module.exports);
-__reExport(index_exports, require("./set.js"), module.exports);
-__reExport(index_exports, require("./props/index.js"), module.exports);
-__reExport(index_exports, require("./props/defaults.js"), module.exports);
+__reExport(index_exports, require("./transform"), module.exports);
+__reExport(index_exports, require("./set"), module.exports);
+__reExport(index_exports, require("./emotion"), module.exports);
+__reExport(index_exports, require("./registry"), module.exports);
+__reExport(index_exports, require("./defaults"), module.exports);
+const exetuteClassPerComponent = (component, element) => {
+  const classObj = {};
+  if (component.class) {
+    for (const classProp in component.class) {
+      classObj[classProp] = component.class[classProp](element);
+    }
+  }
+  return classObj;
+};

package/dist/cjs/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "commonjs",
+  "main": "index.js"
+}

package/dist/cjs/props/animation.js

@@ -21,106 +21,37 @@ __export(animation_exports, {
   ANIMATION_PROPS: () => ANIMATION_PROPS
 });
 module.exports = __toCommonJS(animation_exports);
-var import_utils = require("@symbo.ls/utils");
-var import_css = require("@symbo.ls/css");
+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);
-let _animCounter = 0;
 const applyAnimationProps = (animation, element) => {
-  const { animation: ANIMATION } = element.context && element.context.designSystem || {};
-  if ((0, import_utils.isObject)(animation)) {
-    const name = `smbls-anim-${_animCounter++}`;
-    return { animationName: (0, import_css.keyframes)(name, animation) };
-  }
-  const record = ANIMATION && ANIMATION[animation];
-  if ((0, import_utils.isObject)(record)) {
-    return (0, import_css.keyframes)(animation, record);
-  }
-  return animation;
-};
-const parseAnimationShorthand = (val, el) => {
-  const { animation: 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 { 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 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.animationDuration || "A").timing,
-        animationDelay: parsed.durations[1] || (0, import_scratch.getTimingByKey)(el.animationDelay || "0s").timing,
-        animationTimingFunction: parsed.timingFunction || (0, import_scratch.getTimingFunction)(el.animationTimingFunction || "ease"),
-        animationFillMode: parsed.fillMode || el.animationFillMode || "both",
-        animationIterationCount: parsed.iterationCount != null ? parsed.iterationCount : el.animationIterationCount || 1,
-        animationPlayState: parsed.playState || el.animationPlayState,
-        animationDirection: parsed.direction || el.animationDirection
-      };
-    }
-    return {
-      animationName: applyAnimationProps(val, el),
-      animationDuration: (0, import_scratch.getTimingByKey)(el.animationDuration || "A").timing,
-      animationDelay: (0, import_scratch.getTimingByKey)(el.animationDelay || "0s").timing,
-      animationTimingFunction: (0, import_scratch.getTimingFunction)(el.animationTimingFunction || "ease"),
-      animationFillMode: el.animationFillMode || "both",
-      animationIterationCount: el.animationIterationCount || 1,
-      animationPlayState: el.animationPlayState,
-      animationDirection: el.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)
+  animation: (el) => ({
+    animationName: applyAnimationProps(el.props.animation, 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",
+    animationPlayState: el.props.animationPlayState,
+    animationDirection: el.props.animationDirection
   }),
-  animationIterationCount: (val) => ({
-    animationIterationCount: val
+  animationName: (el) => ({
+    animationName: applyAnimationProps(el.props.animationName, el)
   }),
-  animationFillMode: (val) => ({
-    animationFillMode: val
+  animationDuration: ({ props, deps }) => ({
+    animationDuration: deps.getTimingByKey(props.animationDuration).timing
   }),
-  animationPlayState: (val) => ({
-    animationPlayState: val
+  animationDelay: ({ props, deps }) => ({
+    animationDelay: deps.getTimingByKey(props.animationDelay).timing
   }),
-  animationDirection: (val) => ({
-    animationDirection: val
+  animationTimingFunction: ({ props, deps }) => ({
+    animationTimingFunction: deps.getTimingFunction(props.animationTimingFunction)
   })
 };

package/dist/cjs/props/block.js

@@ -21,153 +21,147 @@ __export(block_exports, {
   BLOCK_PROPS: () => BLOCK_PROPS
 });
 module.exports = __toCommonJS(block_exports);
-var import_utils = require("@symbo.ls/utils");
+var import_utils = require("@domql/utils");
 var import_scratch = require("@symbo.ls/scratch");
 const BLOCK_PROPS = {
-  show: (val) => !val ? { display: "none !important" } : void 0,
-  hide: (val) => val ? { display: "none !important" } : void 0,
-  height: (val, el) => (0, import_scratch.transformSizeRatio)("height", val, el),
-  width: (val, el) => (0, import_scratch.transformSizeRatio)("width", val, el),
-  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(" ");
+  show: (el, s, ctx) => !!(ctx.utils.exec(el.props.show, el, s) === false) && {
+    display: "none !important"
+  },
+  hide: (el, s, ctx) => !!ctx.utils.exec(el.props.hide, el, s) && {
+    display: "none !important"
+  },
+  height: ({ props }) => (0, import_scratch.transformSizeRatio)("height", props),
+  width: ({ props }) => (0, import_scratch.transformSizeRatio)("width", props),
+  boxSizing: ({ props }) => !(0, import_utils.isUndefined)(props.boxSizing) ? { boxSizing: props.boxSizing } : { boxSizing: "border-box" },
+  boxSize: ({ props }) => {
+    if (!(0, import_utils.isString)(props.boxSize)) return;
+    const [height, width] = props.boxSize.split(" ");
     return {
       ...(0, import_scratch.transformSize)("height", height),
       ...(0, import_scratch.transformSize)("width", width || height)
     };
   },
-  inlineSize: (val, el) => (0, import_scratch.transformSizeRatio)("inlineSize", val, el),
-  blockSize: (val, el) => (0, import_scratch.transformSizeRatio)("blockSize", val, el),
-  minWidth: (val, el) => (0, import_scratch.transformSizeRatio)("minWidth", val, el),
-  maxWidth: (val, el) => (0, import_scratch.transformSizeRatio)("maxWidth", val, el),
-  widthRange: (val) => {
-    if (!(0, import_utils.isString)(val)) return;
-    const [minWidth, maxWidth] = val.split(" ");
+  inlineSize: ({ props }) => (0, import_scratch.transformSizeRatio)("inlineSize", props),
+  blockSize: ({ props }) => (0, import_scratch.transformSizeRatio)("blockSize", props),
+  minWidth: ({ props }) => (0, import_scratch.transformSizeRatio)("minWidth", props),
+  maxWidth: ({ props }) => (0, import_scratch.transformSizeRatio)("maxWidth", props),
+  widthRange: ({ props }) => {
+    if (!(0, import_utils.isString)(props.widthRange)) return;
+    const [minWidth, maxWidth] = props.widthRange.split(" ");
     return {
       ...(0, import_scratch.transformSize)("minWidth", minWidth),
       ...(0, import_scratch.transformSize)("maxWidth", maxWidth || minWidth)
     };
   },
-  minHeight: (val, el) => (0, import_scratch.transformSizeRatio)("minHeight", val, el),
-  maxHeight: (val, el) => (0, import_scratch.transformSizeRatio)("maxHeight", val, el),
-  heightRange: (val) => {
-    if (!(0, import_utils.isString)(val)) return;
-    const [minHeight, maxHeight] = val.split(" ");
+  minHeight: ({ props }) => (0, import_scratch.transformSizeRatio)("minHeight", props),
+  maxHeight: ({ props }) => (0, import_scratch.transformSizeRatio)("maxHeight", props),
+  heightRange: ({ props }) => {
+    if (!(0, import_utils.isString)(props.heightRange)) return;
+    const [minHeight, maxHeight] = props.heightRange.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(" ");
+  size: ({ props }) => {
+    if (!(0, import_utils.isString)(props.size)) return;
+    const [inlineSize, blockSize] = props.size.split(" ");
     return {
       ...(0, import_scratch.transformSizeRatio)("inlineSize", inlineSize),
       ...(0, import_scratch.transformSizeRatio)("blockSize", blockSize || inlineSize)
     };
   },
-  minBlockSize: (val, el) => (0, import_scratch.transformSizeRatio)("minBlockSize", val, el),
-  minInlineSize: (val, el) => (0, import_scratch.transformSizeRatio)("minInlineSize", val, el),
-  maxBlockSize: (val, el) => (0, import_scratch.transformSizeRatio)("maxBlockSize", val, el),
-  maxInlineSize: (val, el) => (0, import_scratch.transformSizeRatio)("maxInlineSize", val, el),
-  minSize: (val) => {
-    if (!(0, import_utils.isString)(val)) return;
-    const [minInlineSize, minBlockSize] = val.split(" ");
+  minBlockSize: ({ props }) => (0, import_scratch.transformSizeRatio)("minBlockSize", props),
+  minInlineSize: ({ props }) => (0, import_scratch.transformSizeRatio)("minInlineSize", props),
+  maxBlockSize: ({ props }) => (0, import_scratch.transformSizeRatio)("maxBlockSize", props),
+  maxInlineSize: ({ props }) => (0, import_scratch.transformSizeRatio)("maxInlineSize", props),
+  minSize: ({ props }) => {
+    if (!(0, import_utils.isString)(props.minSize)) return;
+    const [minInlineSize, minBlockSize] = props.minSize.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(" ");
+  maxSize: ({ props }) => {
+    if (!(0, import_utils.isString)(props.maxSize)) return;
+    const [maxInlineSize, maxBlockSize] = props.maxSize.split(" ");
     return {
       ...(0, import_scratch.transformSize)("maxInlineSize", maxInlineSize),
       ...(0, import_scratch.transformSize)("maxBlockSize", maxBlockSize || maxInlineSize)
     };
   },
-  borderWidth: (val, el) => (0, import_scratch.transformSizeRatio)("borderWidth", val, el),
-  padding: (val, el) => (0, import_scratch.transformSizeRatio)("padding", val, el),
-  scrollPadding: (val, el) => (0, import_scratch.transformSizeRatio)("scrollPadding", val, el),
-  paddingInline: (val) => {
-    if (!(0, import_utils.isString)(val)) return;
-    const [paddingInlineStart, paddingInlineEnd] = val.split(" ");
+  borderWidth: ({ props }) => (0, import_scratch.transformSizeRatio)("borderWidth", props),
+  padding: ({ props }) => (0, import_scratch.transformSizeRatio)("padding", props),
+  scrollPadding: ({ props }) => (0, import_scratch.transformSizeRatio)("scrollPadding", props),
+  paddingInline: ({ props }) => {
+    if (!(0, import_utils.isString)(props.paddingInline)) return;
+    const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.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(" ");
+  paddingBlock: ({ props }) => {
+    if (!(0, import_utils.isString)(props.paddingBlock)) return;
+    const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(" ");
     return {
       ...(0, import_scratch.transformSize)("paddingBlockStart", paddingBlockStart),
       ...(0, import_scratch.transformSize)("paddingBlockEnd", paddingBlockEnd || paddingBlockStart)
     };
   },
-  paddingTop: (val, el) => (0, import_scratch.transformSizeRatio)("paddingBlockStart", val, el),
-  paddingBottom: (val, el) => (0, import_scratch.transformSizeRatio)("paddingBlockEnd", val, el),
-  paddingLeft: (val, el) => (0, import_scratch.transformSizeRatio)("paddingInlineStart", val, el),
-  paddingRight: (val, el) => (0, import_scratch.transformSizeRatio)("paddingInlineEnd", val, el),
-  paddingBlockStart: (val, el) => (0, import_scratch.transformSizeRatio)("paddingBlockStart", val, el),
-  paddingBlockEnd: (val, el) => (0, import_scratch.transformSizeRatio)("paddingBlockEnd", val, el),
-  paddingInlineStart: (val, el) => (0, import_scratch.transformSizeRatio)("paddingInlineStart", val, el),
-  paddingInlineEnd: (val, el) => (0, import_scratch.transformSizeRatio)("paddingInlineEnd", val, el),
-  margin: (val, el) => (0, import_scratch.transformSizeRatio)("margin", val, el),
-  marginInline: (val) => {
-    if (!(0, import_utils.isString)(val)) return;
-    const [marginInlineStart, marginInlineEnd] = val.split(" ");
+  paddingInlineStart: ({ props }) => (0, import_scratch.transformSizeRatio)("paddingInlineStart", props),
+  paddingInlineEnd: ({ props }) => (0, import_scratch.transformSizeRatio)("paddingInlineEnd", props),
+  paddingBlockStart: ({ props }) => (0, import_scratch.transformSizeRatio)("paddingBlockStart", props),
+  paddingBlockEnd: ({ props }) => (0, import_scratch.transformSizeRatio)("paddingBlockEnd", props),
+  margin: ({ props }) => (0, import_scratch.transformSizeRatio)("margin", props),
+  marginInline: ({ props }) => {
+    if (!(0, import_utils.isString)(props.marginInline)) return;
+    const [marginInlineStart, marginInlineEnd] = props.marginInline.split(" ");
     return {
       ...(0, import_scratch.transformSize)("marginInlineStart", marginInlineStart),
       ...(0, import_scratch.transformSize)("marginInlineEnd", marginInlineEnd || marginInlineStart)
     };
   },
-  marginBlock: (val, el) => {
-    if (!(0, import_utils.isString)(el.marginBlock)) return;
-    const [marginBlockStart, marginBlockEnd] = el.marginBlock.split(" ");
+  marginBlock: ({ 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)
     };
   },
-  marginTop: (val, el) => (0, import_scratch.transformSizeRatio)("marginBlockStart", val, el),
-  marginBottom: (val, el) => (0, import_scratch.transformSizeRatio)("marginBlockEnd", val, el),
-  marginLeft: (val, el) => (0, import_scratch.transformSizeRatio)("marginInlineStart", val, el),
-  marginRight: (val, el) => (0, import_scratch.transformSizeRatio)("marginInlineEnd", val, el),
-  marginInlineStart: (val, el) => (0, import_scratch.transformSizeRatio)("marginInlineStart", val, el),
-  marginInlineEnd: (val, el) => (0, import_scratch.transformSizeRatio)("marginInlineEnd", val, el),
-  marginBlockStart: (val, el) => (0, import_scratch.transformSizeRatio)("marginBlockStart", val, el),
-  marginBlockEnd: (val, el) => (0, import_scratch.transformSizeRatio)("marginBlockEnd", val, el),
-  gap: (val) => ({
-    gap: (0, import_scratch.transfromGap)(val)
+  marginInlineStart: ({ props }) => (0, import_scratch.transformSizeRatio)("marginInlineStart", props),
+  marginInlineEnd: ({ props }) => (0, import_scratch.transformSizeRatio)("marginInlineEnd", props),
+  marginBlockStart: ({ props }) => (0, import_scratch.transformSizeRatio)("marginBlockStart", props),
+  marginBlockEnd: ({ props }) => (0, import_scratch.transformSizeRatio)("marginBlockEnd", props),
+  gap: ({ props }) => ({
+    gap: (0, import_scratch.transfromGap)(props.gap)
   }),
-  columnGap: (val, el) => (0, import_scratch.getSpacingBasedOnRatio)(el, "columnGap", val),
-  rowGap: (val, el) => (0, import_scratch.getSpacingBasedOnRatio)(el, "rowGap", val),
-  flexWrap: (val) => ({
+  columnGap: ({ props }) => (0, import_scratch.getSpacingBasedOnRatio)(props, "columnGap"),
+  rowGap: ({ props }) => (0, import_scratch.getSpacingBasedOnRatio)(props, "rowGap"),
+  flexWrap: ({ props }) => ({
     display: "flex",
-    flexWrap: val
+    flexFlow: (props.flexFlow || "row").split(" ")[0] + " " + props.flexWrap
   }),
-  flexFlow: (val, el) => {
-    const reverse = el.reverse;
-    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";
+  flexFlow: ({ props }) => {
+    const { flexFlow, reverse } = props;
+    if (!(0, import_utils.isString)(flexFlow)) return;
+    let [direction, wrap] = (flexFlow || "row").split(" ");
+    if (flexFlow.startsWith("x") || flexFlow === "row") direction = "row";
+    if (flexFlow.startsWith("y") || flexFlow === "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(" ");
+  flexAlign: ({ props }) => {
+    if (!(0, import_utils.isString)(props.flexAlign)) return;
+    const [alignItems, justifyContent] = props.flexAlign.split(" ");
     return {
       display: "flex",
       alignItems,
       justifyContent
     };
-  },
-  round: (val, el) => (0, import_scratch.transformBorderRadius)(val ?? el.borderRadius, el, "round"),
-  borderRadius: (val, el) => (0, import_scratch.transformBorderRadius)(val ?? el.round, el, "borderRadius")
+  }
 };

package/dist/cjs/props/font.js

@@ -23,14 +23,15 @@ __export(font_exports, {
 module.exports = __toCommonJS(font_exports);
 var import_scratch = require("@symbo.ls/scratch");
 const FONT_PROPS = {
-  fontSize: (value) => {
-    return (0, import_scratch.getFontSizeByKey)(value) || value;
+  fontSize: (el) => {
+    const { props } = el;
+    return props.fontSize ? (0, import_scratch.getFontSizeByKey)(props.fontSize) : null;
   },
-  fontFamily: (value) => ({
-    fontFamily: (0, import_scratch.getFontFamily)(value) || value
+  fontFamily: ({ props }) => ({
+    fontFamily: (0, import_scratch.getFontFamily)(props.fontFamily) || props.fontFamily
   }),
-  fontWeight: (value) => ({
-    fontWeight: value,
-    fontVariationSettings: '"wght" ' + value
+  fontWeight: ({ props }) => ({
+    fontWeight: props.fontWeight,
+    fontVariationSettings: '"wght" ' + props.fontWeight
   })
 };

package/dist/cjs/props/index.js

@@ -3,10 +3,6 @@ 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))
@@ -18,38 +14,11 @@ var __copyProps = (to, from, except, desc) => {
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var props_exports = {};
-__export(props_exports, {
-  CSS_PROPS_REGISTRY: () => CSS_PROPS_REGISTRY,
-  default: () => props_default
-});
 module.exports = __toCommonJS(props_exports);
-var import_animation = require("./animation.js");
-var import_block = require("./block.js");
-var import_font = require("./font.js");
-var import_misc = require("./misc.js");
-var import_position = require("./position.js");
-var import_theme = require("./theme.js");
-var import_timing = require("./timing.js");
-var import_flex = require("./flex.js");
-var import_grid = require("./grid.js");
-__reExport(props_exports, require("./animation.js"), module.exports);
-__reExport(props_exports, require("./block.js"), module.exports);
-__reExport(props_exports, require("./font.js"), module.exports);
-__reExport(props_exports, require("./misc.js"), module.exports);
-__reExport(props_exports, require("./position.js"), module.exports);
-__reExport(props_exports, require("./theme.js"), module.exports);
-__reExport(props_exports, require("./timing.js"), module.exports);
-__reExport(props_exports, require("./flex.js"), module.exports);
-__reExport(props_exports, require("./grid.js"), module.exports);
-const CSS_PROPS_REGISTRY = {
-  ...import_animation.ANIMATION_PROPS,
-  ...import_block.BLOCK_PROPS,
-  ...import_font.FONT_PROPS,
-  ...import_misc.MISC_PROPS,
-  ...import_position.POSITION_PROPS,
-  ...import_theme.THEME_PROPS,
-  ...import_timing.TIMING_PROPS,
-  ...import_flex.FLEX_PROPS,
-  ...import_grid.GRID_PROPS
-};
-var props_default = CSS_PROPS_REGISTRY;
+__reExport(props_exports, require("./animation"), module.exports);
+__reExport(props_exports, require("./block"), module.exports);
+__reExport(props_exports, require("./font"), module.exports);
+__reExport(props_exports, require("./misc"), module.exports);
+__reExport(props_exports, require("./position"), module.exports);
+__reExport(props_exports, require("./theme"), module.exports);
+__reExport(props_exports, require("./timing"), module.exports);

package/dist/cjs/props/misc.js

@@ -22,21 +22,15 @@ __export(misc_exports, {
 });
 module.exports = __toCommonJS(misc_exports);
 const MISC_PROPS = {
-  overflow: (value) => ({
-    overflow: value,
+  overflow: ({ props, deps }) => !deps.isUndefined(props.overflow) && {
+    overflow: props.overflow,
     scrollBehavior: "smooth"
-  }),
-  cursor: (value, el, s, ctx) => {
-    if (!value) return;
-    const asset = ctx.assets && ctx.assets[value];
-    if (asset && asset.content) value = `url(${asset.content.src})`;
-    else {
-      const file = ctx.files && ctx.files[value];
-      if (file && file.content) value = `url(${file.content.src})`;
-    }
-    return { cursor: value };
   },
-  opacity: (value) => value != null ? { opacity: String(value) } : void 0,
-  visibility: (value) => value != null ? { visibility: value } : void 0,
-  pointerEvents: (value) => value != null ? { pointerEvents: value } : void 0
+  cursor: (el, s, ctx) => {
+    let val = el.props.cursor;
+    if (!val) return;
+    const file = ctx.files && ctx.files[val];
+    if (file && file.content) val = `url(${file.content.src})`;
+    return { cursor: val };
+  }
 };

package/dist/cjs/props/position.js

@@ -23,26 +23,29 @@ __export(position_exports, {
 module.exports = __toCommonJS(position_exports);
 var import_scratch = require("@symbo.ls/scratch");
 const POSITION_PROPS = {
-  inset: (val, el) => {
-    if (el.call("isNumber", val)) return { inset: val };
-    if (!el.call("isString", val)) return;
-    return { inset: val.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k).join(" ") };
+  inset: ({ props, context }) => {
+    const { inset } = props;
+    if (context.utils.isNumber(inset)) return { inset };
+    if (!context.utils.isString(inset)) return;
+    return { inset: inset.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k).join(" ") };
   },
-  left: (val) => (0, import_scratch.getSpacingByKey)(val, "left"),
-  top: (val) => (0, import_scratch.getSpacingByKey)(val, "top"),
-  right: (val) => (0, import_scratch.getSpacingByKey)(val, "right"),
-  bottom: (val) => (0, import_scratch.getSpacingByKey)(val, "bottom"),
-  verticalInset: (val) => {
-    if (typeof val !== "string") return;
-    const vi = val.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k);
+  left: ({ props }) => (0, import_scratch.getSpacingByKey)(props.left, "left"),
+  top: ({ props }) => (0, import_scratch.getSpacingByKey)(props.top, "top"),
+  right: ({ props }) => (0, import_scratch.getSpacingByKey)(props.right, "right"),
+  bottom: ({ props }) => (0, import_scratch.getSpacingByKey)(props.bottom, "bottom"),
+  verticalInset: ({ props }) => {
+    const { verticalInset } = props;
+    if (typeof verticalInset !== "string") return;
+    const vi = verticalInset.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k);
     return {
       top: vi[0],
       bottom: vi[1] || vi[0]
     };
   },
-  horizontalInset: (val) => {
-    if (typeof val !== "string") return;
-    const vi = val.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k);
+  horizontalInset: ({ props }) => {
+    const { horizontalInset } = props;
+    if (typeof horizontalInset !== "string") return;
+    const vi = horizontalInset.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k);
     return {
       left: vi[0],
       right: vi[1] || vi[0]