css-in-props 3.8.9 → 3.14.1

package/README.md

@@ -1,13 +1,13 @@
 # css-in-props
 
-CSS properties as component props for DOMQL elements. Transforms design-system-aware props into CSS classes via Emotion.
+CSS properties as component props for DOMQL elements. Transforms design-system-aware props into CSS classes via the atomic CSS engine (`@symbo.ls/css`).
 
 ## What it does
 
 - Transforms component props (`theme`, `color`, `background`, `border`, `shadow`, etc.) into resolved CSS
 - Resolves design system tokens (colors, spacing, typography, themes) from `@symbo.ls/scratch`
 - Handles media queries (`@dark`, `@mobileS`, etc.) and pseudo selectors (`:hover`, `:focus`) as prop prefixes
-- Generates Emotion CSS classes for optimized rendering
+- Generates atomic CSS classes for optimized rendering (one class per property-value pair)
 
 ## Theme prop
 
@@ -69,25 +69,9 @@ import { transformersByPrefix } from 'css-in-props'
 
 ## Interaction with the define system
 
-The `$` prefix is used both by css-in-props (`$isActive` case conditional) and by the define system (e.g. `$router`, and deprecated v2 handlers like `$propsCollection`, `$collection`). The propertization layer in `@domql/utils/props.js` uses `CSS_SELECTOR_PREFIXES` to decide which keys to move into `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.
 
-**The `$` prefix requires special handling:**
-
-Keys starting with `$` that have a matching define handler (either `element.define[key]` or `context.define[key]`) must **stay at the element root** so that `throughInitialDefine` can process them. Only `$`-prefixed keys without define handlers should be moved into `props` for css-in-props processing. This matters for the built-in `$router` handler and for backwards compatibility with older v2 projects using deprecated collection handlers.
-
-```javascript
-// In props.js — check define handlers BEFORE checking CSS_SELECTOR_PREFIXES
-const defineValue = this.define?.[key]
-const globalDefineValue = this.context?.define?.[key]
-if (isFunction(defineValue) || isFunction(globalDefineValue)) continue
-
-// Only then check the prefix
-if (CSS_SELECTOR_PREFIXES.has(firstChar)) {
-  obj.props[key] = value  // move to props for css-in-props
-}
-```
-
-> **Lesson learned:** Without the define-awareness check, keys like `$propsCollection` were moved into `props` and became invisible to the define system, breaking collection-based rendering in projects like Rosi and BigBrother.
+> In v3.14, properties go directly on the element (no `props:` wrapper). The CSS engine processes design token properties internally.
 
 ## Global Cases
 
@@ -110,8 +94,8 @@ export default { cases, /* ...other context */ }
 
 ### Resolution order
 
-- **`$` prefix**: Checks `context.cases[key]` first (call if function, check truthiness if value). Falls back to `element.props[key]`.
-- **`.` prefix**: Checks `element.props[key]` / `element.state[key]` / `element[key]` first. Falls back to `context.cases[key]`.
+- **`$` prefix**: Checks `context.cases[key]` first (call if function, check truthiness if value). Falls back to `element[key]`.
+- **`.` prefix**: Checks `element[key]` / `element.state[key]` first. Falls back to `context.cases[key]`.
 - **`!` prefix**: Same as `.` but inverted — applies when condition is falsy.
 
 ```javascript

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/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"), module.exports);
+__reExport(index_exports, require("./set"), module.exports);
 __reExport(index_exports, require("./emotion"), module.exports);
-__reExport(index_exports, require("./props"), module.exports);
-__reExport(index_exports, require("./props/defaults"), 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

@@ -24,11 +24,6 @@ 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;
@@ -37,85 +32,26 @@ const applyAnimationProps = (animation, element) => {
   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)
+  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

@@ -24,116 +24,106 @@ 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) && {
+  show: (el, s, ctx) => !!(ctx.utils.exec(el.props.show, el, s) === false) && {
     display: "none !important"
   },
-  hide: (val, el, s, ctx) => !!ctx.utils.exec(val, el, s) && {
+  hide: (el, s, ctx) => !!ctx.utils.exec(el.props.hide, 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(" ");
+  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, { 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(" ");
+  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, { 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(" ");
+  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, { 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(" ");
+  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, { 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(" ");
+  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)
     };
   },
-  // 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(" ");
+  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, { props }) => {
+  marginBlock: ({ props }) => {
     if (!(0, import_utils.isString)(props.marginBlock)) return;
     const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(" ");
     return {
@@ -141,45 +131,37 @@ const BLOCK_PROPS = {
       ...(0, import_scratch.transformSize)("marginBlockEnd", marginBlockEnd || marginBlockStart)
     };
   },
-  // Traditional directional margin
-  marginTop: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginBlockStart", val, props),
-  marginBottom: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginBlockEnd", val, props),
-  marginLeft: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginInlineStart", val, props),
-  marginRight: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginInlineEnd", val, props),
-  // Logical properties
-  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)
+  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, { props }) => (0, import_scratch.getSpacingBasedOnRatio)(props, "columnGap", val),
-  rowGap: (val, { props }) => (0, import_scratch.getSpacingBasedOnRatio)(props, "rowGap", val),
-  flexWrap: (val, { props }) => ({
+  columnGap: ({ props }) => (0, import_scratch.getSpacingBasedOnRatio)(props, "columnGap"),
+  rowGap: ({ props }) => (0, import_scratch.getSpacingBasedOnRatio)(props, "rowGap"),
+  flexWrap: ({ props }) => ({
     display: "flex",
-    flexFlow: (val || "row").split(" ")[0] + " " + props.flexWrap
+    flexFlow: (props.flexFlow || "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";
+  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, { 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/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,20 +14,7 @@ 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");
-var import_block = require("./block");
-var import_font = require("./font");
-var import_misc = require("./misc");
-var import_position = require("./position");
-var import_theme = require("./theme");
-var import_timing = require("./timing");
-var import_flex = require("./flex");
-var import_grid = require("./grid");
 __reExport(props_exports, require("./animation"), module.exports);
 __reExport(props_exports, require("./block"), module.exports);
 __reExport(props_exports, require("./font"), module.exports);
@@ -39,18 +22,3 @@ __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);
-__reExport(props_exports, require("./flex"), module.exports);
-__reExport(props_exports, require("./grid"), module.exports);
-const CSS_PROPS_REGISTRY = {
-  ...import_animation.ANIMATION_PROPS,
-  ...import_block.BLOCK_PROPS,
-  ...import_font.FONT_PROPS,
-  ...import_misc.MISC_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;

package/dist/cjs/props/misc.js

@@ -22,14 +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 file = ctx.files && ctx.files[value];
-    if (file && file.content) value = `url(${file.content.src})`;
-    return { cursor: value };
+  },
+  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]