css-in-props 2.11.523 → 3.0.2

package/dist/cjs/{transform.js → _transform.js}

@@ -24,18 +24,16 @@ __export(transform_exports, {
 module.exports = __toCommonJS(transform_exports);
 var import_utils = require("@domql/utils");
 var import_atoms = require("@symbo.ls/atoms");
-var import_registry = require("./registry");
-var import_defaults = require("./defaults");
+var import_props = require("./props");
+var import_defaults = require("./props/defaults");
 const transformClassname = (element, restProps = {}) => {
   const classCss = {};
   const { props, class: elementClass } = element;
-  if (!(0, import_utils.isObject)(props))
-    return;
+  if (!(0, import_utils.isObject)(props)) return;
   for (const key in props) {
     const setter = import_atoms.keySetters[key.slice(0, 1)];
     const hasCSS = elementClass[key];
-    if (setter)
-      setter(key, props[key], classCss, element, true);
+    if (setter) setter(key, props[key], classCss, element, true);
     else if ((0, import_utils.isFunction)(hasCSS)) {
       const stack = hasCSS(element, element.state, element.context);
       const exec = (0, import_utils.isArray)(stack) ? stack.reduce((a, c) => {
@@ -44,8 +42,7 @@ const transformClassname = (element, restProps = {}) => {
       (0, import_utils.deepMerge)(classCss, exec);
     } else if (key === "style") {
       (0, import_utils.deepMerge)(classCss, props[key]);
-    } else
-      restProps[key] = props[key];
+    } else restProps[key] = props[key];
   }
   return classCss;
 };
@@ -60,7 +57,7 @@ const extractCSSfromProps = (element) => {
       mediaProp(key, defProps[key], css, element, true);
       continue;
     }
-    const preprop = import_registry.CSS_PREPROCS_DEFAULTS[key];
+    const preprop = import_props.CSS_PROPS_REGISTRY[key];
     if (preprop) {
       const stack = preprop(element, element.state, element.context);
       const exec = (0, import_utils.isArray)(stack) ? stack.reduce((a, c) => {

package/dist/cjs/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))
@@ -17,21 +13,10 @@ 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 src_exports = {};
-__export(src_exports, {
-  exetuteClassPerComponent: () => exetuteClassPerComponent
-});
-module.exports = __toCommonJS(src_exports);
-__reExport(src_exports, require("./transform"), module.exports);
-__reExport(src_exports, require("./set"), module.exports);
-__reExport(src_exports, require("./emotion"), module.exports);
-__reExport(src_exports, require("./registry"), 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;
-};
+var index_exports = {};
+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);

package/dist/cjs/props/animation.js

@@ -27,15 +27,14 @@ var import_scratch = require("@symbo.ls/scratch");
 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) };
+  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: (el) => ({
-    animationName: applyAnimationProps(el.props.animation, el),
+  animation: (val, el) => ({
+    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"),
@@ -43,16 +42,16 @@ const ANIMATION_PROPS = {
     animationPlayState: el.props.animationPlayState,
     animationDirection: el.props.animationDirection
   }),
-  animationName: (el) => ({
-    animationName: applyAnimationProps(el.props.animationName, el)
+  animationName: (val, el) => ({
+    animationName: applyAnimationProps(val, el)
   }),
-  animationDuration: ({ props, deps }) => ({
-    animationDuration: deps.getTimingByKey(props.animationDuration).timing
+  animationDuration: (val) => ({
+    animationDuration: (0, import_scratch.getTimingByKey)(val).timing
   }),
-  animationDelay: ({ props, deps }) => ({
-    animationDelay: deps.getTimingByKey(props.animationDelay).timing
+  animationDelay: (val) => ({
+    animationDelay: (0, import_scratch.getTimingByKey)(val).timing
   }),
-  animationTimingFunction: ({ props, deps }) => ({
-    animationTimingFunction: deps.getTimingFunction(props.animationTimingFunction)
+  animationTimingFunction: (val) => ({
+    animationTimingFunction: (0, import_scratch.getTimingFunction)(val)
   })
 };

package/dist/cjs/props/block.js

@@ -24,158 +24,156 @@ module.exports = __toCommonJS(block_exports);
 var import_utils = require("@domql/utils");
 var import_scratch = require("@symbo.ls/scratch");
 const BLOCK_PROPS = {
-  show: (el, s, ctx) => !!(ctx.utils.exec(el.props.show, el, s) === false) && {
+  show: (val, el, s, ctx) => !!(ctx.utils.exec(val, el, s) === false) && {
     display: "none !important"
   },
-  hide: (el, s, ctx) => !!ctx.utils.exec(el.props.hide, el, s) && {
+  hide: (val, el, s, ctx) => !!ctx.utils.exec(val, 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(" ");
+  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: ({ 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(" ");
+  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: ({ 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(" ");
+  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: ({ props }) => {
-    if (!(0, import_utils.isString)(props.size))
-      return;
-    const [inlineSize, blockSize] = props.size.split(" ");
+  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: ({ 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(" ");
+  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: ({ props }) => {
-    if (!(0, import_utils.isString)(props.maxSize))
-      return;
-    const [maxInlineSize, maxBlockSize] = props.maxSize.split(" ");
+  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: ({ 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(" ");
+  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: ({ props }) => {
-    if (!(0, import_utils.isString)(props.paddingBlock))
-      return;
-    const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(" ");
+  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)
     };
   },
-  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(" ");
+  // 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: ({ props }) => {
-    if (!(0, import_utils.isString)(props.marginBlock))
-      return;
+  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: ({ 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)
+  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: ({ props }) => (0, import_scratch.getSpacingBasedOnRatio)(props, "columnGap"),
-  rowGap: ({ props }) => (0, import_scratch.getSpacingBasedOnRatio)(props, "rowGap"),
-  flexWrap: ({ props }) => ({
+  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: (props.flexFlow || "row").split(" ")[0] + " " + props.flexWrap
+    flexFlow: (val || "row").split(" ")[0] + " " + props.flexWrap
   }),
-  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";
+  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: ({ props }) => {
-    if (!(0, import_utils.isString)(props.flexAlign))
-      return;
-    const [alignItems, justifyContent] = props.flexAlign.split(" ");
+  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/flex.js

@@ -0,0 +1,50 @@
+"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 DISPLAY_FLEX_ALLOWED = ["flex", "inline-flex"];
+    if (!DISPLAY_FLEX_ALLOWED.includes(props.display)) return;
+    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 {
+      flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
+    };
+  },
+  wrap: (value, { props }) => {
+    const DISPLAY_FLEX_ALLOWED = ["flex", "inline-flex"];
+    if (!DISPLAY_FLEX_ALLOWED.includes(props.display)) return;
+    return { flexWrap: value };
+  },
+  align: (value, { props }) => {
+    const DISPLAY_FLEX_ALLOWED = ["flex", "inline-flex"];
+    if (!DISPLAY_FLEX_ALLOWED.includes(props.display)) return;
+    const [alignItems, justifyContent] = value.split(" ");
+    return { alignItems, justifyContent };
+  }
+};

package/dist/cjs/props/font.js

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

package/dist/cjs/props/grid.js

@@ -0,0 +1,39 @@
+"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 grid_exports = {};
+__export(grid_exports, {
+  GRID_PROPS: () => GRID_PROPS
+});
+module.exports = __toCommonJS(grid_exports);
+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 })
+};

package/dist/cjs/props/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,7 +18,20 @@ 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);
@@ -22,3 +39,18 @@ __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,17 +22,14 @@ __export(misc_exports, {
 });
 module.exports = __toCommonJS(misc_exports);
 const MISC_PROPS = {
-  overflow: ({ props, deps }) => !deps.isUndefined(props.overflow) && {
-    overflow: props.overflow,
+  overflow: (value) => ({
+    overflow: value,
     scrollBehavior: "smooth"
-  },
-  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 };
+  }),
+  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 };
   }
 };

package/dist/cjs/props/position.js

@@ -23,33 +23,26 @@ __export(position_exports, {
 module.exports = __toCommonJS(position_exports);
 var import_scratch = require("@symbo.ls/scratch");
 const POSITION_PROPS = {
-  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(" ") };
+  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(" ") };
   },
-  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);
+  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);
     return {
       top: vi[0],
       bottom: vi[1] || vi[0]
     };
   },
-  horizontalInset: ({ props }) => {
-    const { horizontalInset } = props;
-    if (typeof horizontalInset !== "string")
-      return;
-    const vi = horizontalInset.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k);
+  horizontalInset: (val) => {
+    if (typeof val !== "string") return;
+    const vi = val.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k);
     return {
       left: vi[0],
       right: vi[1] || vi[0]