css-in-props 3.8.9 → 3.14.1

package/dist/cjs/_transform.js

@@ -1,30 +0,0 @@
-"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 transform_exports = {};
-__export(transform_exports, {
-  transformClassname: () => transformClassname
-});
-module.exports = __toCommonJS(transform_exports);
-var import_utils = require("@domql/utils");
-var import_transform = require("./transform");
-const transformClassname = (element) => {
-  const { props } = element;
-  if (!(0, import_utils.isObject)(props)) return;
-  return (0, import_transform.useCssInProps)(props, element);
-};

package/dist/cjs/props/flex.js

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

package/dist/cjs/props/grid.js

@@ -1,39 +0,0 @@
-"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/transform/executors.js

@@ -1,124 +0,0 @@
-"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 executors_exports = {};
-__export(executors_exports, {
-  exetuteClassPerComponent: () => exetuteClassPerComponent,
-  useCssInProps: () => useCssInProps,
-  usePropsAsCSS: () => usePropsAsCSS,
-  useSelectorsAsCSS: () => useSelectorsAsCSS
-});
-module.exports = __toCommonJS(executors_exports);
-var import_utils = require("@domql/utils");
-var import_props = require("../props");
-var import_defaults = require("../props/defaults");
-var import_transformers = require("./transformers");
-const isProd = (0, import_utils.isProduction)();
-const usePropsAsCSS = (sourceObj, element, opts) => {
-  let obj = {};
-  const rest = {};
-  const setToObj = (key, val) => {
-    if (opts.unpack) {
-      obj = { ...obj, ...val };
-      return;
-    }
-    obj[key] = val;
-  };
-  for (const key in sourceObj) {
-    const value = sourceObj[key];
-    if (key === "class" && element.call("isString", sourceObj.class)) {
-      const val = value.split(" ");
-      if (val.length) {
-        const CLASS = element.context.designSystem.class;
-        const result = val.reduce((acc, curr) => (0, import_utils.merge)(acc, CLASS[curr]), {});
-        obj.designSystemClass = result;
-      }
-    } else if (key === "true") {
-      const val = (0, import_utils.exec)(value, element);
-      (0, import_utils.merge)(obj, (0, import_transformers.applyTrueProps)(val, element));
-    } else if (element.classlist[key]) {
-      const originalFromClass = element.classlist[key];
-      const result = (0, import_utils.isFunction)(originalFromClass) ? originalFromClass(element, element.state, element.context) : originalFromClass;
-      if (result) setToObj(key, result);
-      if (!isProd && (0, import_utils.isObject)(obj[key])) obj[key].label = key;
-    } else if (import_props.CSS_PROPS_REGISTRY[key]) {
-      let val = (0, import_utils.exec)(value, element);
-      if ((0, import_utils.isArray)(val)) {
-        val = val.reduce((a, c) => (0, import_utils.merge)(a, c), {});
-      }
-      let result = import_props.CSS_PROPS_REGISTRY[key](val, element, element.state, element.context);
-      if ((0, import_utils.isArray)(result)) result = result.reduce((a, c) => (0, import_utils.merge)(a, c), {});
-      if (result) setToObj(key, result);
-      if (!isProd && (0, import_utils.isObject)(obj[key])) obj[key].label = key;
-    } else if (import_defaults.DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
-      let result = (0, import_utils.exec)(value, element);
-      if (typeof result === "string" && result.charCodeAt(0) === 45 && result.charCodeAt(1) === 45) {
-        result = `var(${result})`;
-      }
-      setToObj(key, { [key]: result });
-      if (!isProd && (0, import_utils.isObject)(obj[key])) obj[key].label = key;
-    } else {
-      rest[key] = value;
-    }
-  }
-  return [obj, rest];
-};
-const useSelectorsAsCSS = (sourceObj, element) => {
-  const obj = {};
-  for (const key in sourceObj) {
-    const selectroSetter = import_transformers.transformersByPrefix[key.slice(0, 1)];
-    if (selectroSetter) {
-      const result = selectroSetter(key, sourceObj[key], element);
-      if (result) {
-        for (const k in result) {
-          if (Object.prototype.hasOwnProperty.call(result, k)) {
-            if (obj[k] && typeof obj[k] === "object" && typeof result[k] === "object") {
-              (0, import_utils.overwriteDeep)(obj[k], result[k]);
-            } else {
-              obj[k] = result[k];
-            }
-          }
-        }
-      }
-    }
-  }
-  return obj;
-};
-const useCssInProps = (selectorProps, element, opts = { unpack: true }) => {
-  const [cssObj, restProps] = usePropsAsCSS(selectorProps, element, opts);
-  const selectorsObj = useSelectorsAsCSS(restProps, element);
-  let hasSelectors = false;
-  for (const _k in selectorsObj) {
-    hasSelectors = true;
-    break;
-  }
-  if (hasSelectors) {
-    if (opts.unpack) return (0, import_utils.overwrite)(cssObj, selectorsObj);
-    cssObj._selectors = selectorsObj;
-  }
-  return cssObj;
-};
-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/transform/index.js

@@ -1,19 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __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"), module.exports);
-__reExport(transform_exports, require("./transformers"), module.exports);

package/dist/cjs/transform/transformers.js

@@ -1,107 +0,0 @@
-"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 transformers_exports = {};
-__export(transformers_exports, {
-  applyTrueProps: () => applyTrueProps,
-  transformersByPrefix: () => transformersByPrefix
-});
-module.exports = __toCommonJS(transformers_exports);
-var import_utils = require("@domql/utils");
-var import_executors = require("./executors");
-const applyMediaProps = (key, selectorProps, element) => {
-  const { context } = element;
-  if (!context.designSystem?.media) return;
-  const mediaValue = context.designSystem.media[key.slice(1)];
-  const generatedClass = (0, import_executors.useCssInProps)(selectorProps, element);
-  let mediaKey;
-  if (!mediaValue) {
-    mediaKey = key;
-  } else if (mediaValue === "print") {
-    mediaKey = "@media print";
-  } else if (mediaValue[0] === "(") {
-    mediaKey = `@media screen and ${mediaValue}`;
-  } else {
-    mediaKey = `${mediaValue} &`;
-  }
-  return { [mediaKey]: generatedClass };
-};
-const applyAndProps = (key, selectorProps, element) => {
-  return { [key]: (0, import_executors.useCssInProps)(selectorProps, element) };
-};
-const applySelectorProps = (key, selectorProps, element) => {
-  const selectorKey = `&${key}`;
-  return { [selectorKey]: (0, import_executors.useCssInProps)(selectorProps, element) };
-};
-const resolveCase = (caseKey, element) => {
-  const caseFn = element.context?.cases?.[caseKey];
-  if (caseFn === void 0) return void 0;
-  if ((0, import_utils.isFunction)(caseFn)) return caseFn.call(element, element);
-  return !!caseFn;
-};
-const applyCaseProps = (key, selectorProps, element) => {
-  const caseKey = key.slice(1);
-  let isCaseTrue = resolveCase(caseKey, element);
-  if (isCaseTrue === void 0) {
-    isCaseTrue = !!element.props?.[caseKey];
-  }
-  if (!isCaseTrue) return;
-  return (0, import_executors.useCssInProps)(selectorProps, element);
-};
-const applyVariableProps = (key, selectorVal, element) => {
-  return { [key]: selectorVal };
-};
-const applyConditionalCaseProps = (key, selectorProps, element) => {
-  const caseKey = key.slice(1);
-  let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
-  if (!isCaseTrue) {
-    const caseResult = resolveCase(caseKey, element);
-    if (caseResult !== void 0) isCaseTrue = caseResult;
-  }
-  if (!isCaseTrue) return;
-  return (0, import_executors.useCssInProps)(selectorProps, element);
-};
-const applyConditionalFalsyProps = (key, selectorProps, element) => {
-  const caseKey = key.slice(1);
-  let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
-  if (!isCaseTrue) {
-    const caseResult = resolveCase(caseKey, element);
-    if (caseResult !== void 0) isCaseTrue = caseResult;
-  }
-  if (isCaseTrue) return;
-  return (0, import_executors.useCssInProps)(selectorProps, element);
-};
-const applyTrueProps = (selectorProps, element) => {
-  return (0, import_executors.useCssInProps)(selectorProps, element);
-};
-const transformersByPrefix = {
-  "@": applyMediaProps,
-  // Selector handlers
-  ":": applySelectorProps,
-  "[": applySelectorProps,
-  "*": applySelectorProps,
-  "+": applySelectorProps,
-  "~": applySelectorProps,
-  "&": applyAndProps,
-  ">": applyAndProps,
-  // Conditional and variable handlers
-  $: applyCaseProps,
-  "-": applyVariableProps,
-  ".": applyConditionalCaseProps,
-  "!": applyConditionalFalsyProps
-};

package/dist/esm/_transform.js

@@ -1,10 +0,0 @@
-import { isObject } from "@domql/utils";
-import { useCssInProps } from "./transform";
-const transformClassname = (element) => {
-  const { props } = element;
-  if (!isObject(props)) return;
-  return useCssInProps(props, element);
-};
-export {
-  transformClassname
-};

package/dist/esm/emotion.js

@@ -1,9 +0,0 @@
-import { isFunction } from "@domql/utils";
-import { emotion } from "@symbo.ls/emotion";
-const { css } = emotion;
-const transformEmotion = (props, callback) => {
-  return isFunction(callback) ? callback(props) : css(props);
-};
-export {
-  transformEmotion
-};

package/dist/esm/index.js

@@ -1,4 +0,0 @@
-export * from "./transform";
-export * from "./emotion";
-export * from "./props";
-export * from "./props/defaults";

package/dist/esm/props/animation.js

@@ -1,101 +0,0 @@
-import { isObject, isString } from "@domql/utils";
-import { emotion } from "@symbo.ls/emotion";
-import { getTimingByKey, getTimingFunction } from "@symbo.ls/scratch";
-const TIMING_FUNCTIONS = ["ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end"];
-const FILL_MODES = ["none", "forwards", "backwards", "both"];
-const DIRECTIONS = ["normal", "reverse", "alternate", "alternate-reverse"];
-const PLAY_STATES = ["running", "paused"];
-const isDuration = (v) => /^[\d.]+m?s$/.test(v);
-const applyAnimationProps = (animation, element) => {
-  const { emotion: ctxEmotion } = element.context;
-  const { keyframes } = ctxEmotion || emotion;
-  if (isObject(animation)) return { animationName: keyframes(animation) };
-  const { ANIMATION } = element.context && element.context.designSystem;
-  const record = ANIMATION[animation];
-  return keyframes(record);
-};
-const parseAnimationShorthand = (val, el) => {
-  const { ANIMATION } = el.context && el.context.designSystem || {};
-  const tokens = val.split(/\s+/);
-  let name = null;
-  const durations = [];
-  let timingFunction = null;
-  let iterationCount = null;
-  let direction = null;
-  let fillMode = null;
-  let playState = null;
-  for (const token of tokens) {
-    if (ANIMATION && ANIMATION[token]) {
-      name = token;
-    } else if (isDuration(token)) {
-      durations.push(token);
-    } else if (TIMING_FUNCTIONS.includes(token) || token.startsWith("cubic-bezier") || token.startsWith("steps(")) {
-      timingFunction = token;
-    } else if (token === "infinite" || /^\d+$/.test(token)) {
-      iterationCount = token === "infinite" ? token : Number(token);
-    } else if (DIRECTIONS.includes(token)) {
-      direction = token;
-    } else if (FILL_MODES.includes(token)) {
-      fillMode = token;
-    } else if (PLAY_STATES.includes(token)) {
-      playState = token;
-    } else if (!name) {
-      name = token;
-    }
-  }
-  return { name, durations, timingFunction, iterationCount, direction, fillMode, playState };
-};
-const ANIMATION_PROPS = {
-  animation: (val, el) => {
-    if (isString(val) && val.includes(" ")) {
-      const parsed = parseAnimationShorthand(val, el);
-      return {
-        animationName: applyAnimationProps(parsed.name || val, el),
-        animationDuration: parsed.durations[0] || getTimingByKey(el.props.animationDuration || "A").timing,
-        animationDelay: parsed.durations[1] || getTimingByKey(el.props.animationDelay || "0s").timing,
-        animationTimingFunction: parsed.timingFunction || getTimingFunction(el.props.animationTimingFunction || "ease"),
-        animationFillMode: parsed.fillMode || el.props.animationFillMode || "both",
-        animationIterationCount: parsed.iterationCount != null ? parsed.iterationCount : el.props.animationIterationCount || 1,
-        animationPlayState: parsed.playState || el.props.animationPlayState,
-        animationDirection: parsed.direction || el.props.animationDirection
-      };
-    }
-    return {
-      animationName: applyAnimationProps(val, el),
-      animationDuration: getTimingByKey(el.props.animationDuration || "A").timing,
-      animationDelay: getTimingByKey(el.props.animationDelay || "0s").timing,
-      animationTimingFunction: getTimingFunction(el.props.animationTimingFunction || "ease"),
-      animationFillMode: el.props.animationFillMode || "both",
-      animationIterationCount: el.props.animationIterationCount || 1,
-      animationPlayState: el.props.animationPlayState,
-      animationDirection: el.props.animationDirection
-    };
-  },
-  animationName: (val, el) => ({
-    animationName: applyAnimationProps(val, el)
-  }),
-  animationDuration: (val) => ({
-    animationDuration: getTimingByKey(val).timing
-  }),
-  animationDelay: (val) => ({
-    animationDelay: getTimingByKey(val).timing
-  }),
-  animationTimingFunction: (val) => ({
-    animationTimingFunction: getTimingFunction(val)
-  }),
-  animationIterationCount: (val) => ({
-    animationIterationCount: val
-  }),
-  animationFillMode: (val) => ({
-    animationFillMode: val
-  }),
-  animationPlayState: (val) => ({
-    animationPlayState: val
-  }),
-  animationDirection: (val) => ({
-    animationDirection: val
-  })
-};
-export {
-  ANIMATION_PROPS
-};

package/dist/esm/props/block.js

@@ -1,171 +0,0 @@
-import { isUndefined, isString } from "@domql/utils";
-import {
-  getSpacingBasedOnRatio,
-  transformSize,
-  transformBorderRadius,
-  transformSizeRatio,
-  transfromGap
-} from "@symbo.ls/scratch";
-const BLOCK_PROPS = {
-  show: (val, el, s, ctx) => !!(ctx.utils.exec(val, el, s) === false) && {
-    display: "none !important"
-  },
-  hide: (val, el, s, ctx) => !!ctx.utils.exec(val, el, s) && {
-    display: "none !important"
-  },
-  height: (val, { props }) => transformSizeRatio("height", val, props),
-  width: (val, { props }) => transformSizeRatio("width", val, props),
-  boxSizing: (val) => !isUndefined(val) ? { boxSizing: val } : { boxSizing: "border-box" },
-  boxSize: (val) => {
-    if (!isString(val)) return;
-    const [height, width] = val.split(" ");
-    return {
-      ...transformSize("height", height),
-      ...transformSize("width", width || height)
-    };
-  },
-  inlineSize: (val, { props }) => transformSizeRatio("inlineSize", val, props),
-  blockSize: (val, { props }) => transformSizeRatio("blockSize", val, props),
-  minWidth: (val, { props }) => transformSizeRatio("minWidth", val, props),
-  maxWidth: (val, { props }) => transformSizeRatio("maxWidth", val, props),
-  widthRange: (val) => {
-    if (!isString(val)) return;
-    const [minWidth, maxWidth] = val.split(" ");
-    return {
-      ...transformSize("minWidth", minWidth),
-      ...transformSize("maxWidth", maxWidth || minWidth)
-    };
-  },
-  minHeight: (val, { props }) => transformSizeRatio("minHeight", val, props),
-  maxHeight: (val, { props }) => transformSizeRatio("maxHeight", val, props),
-  heightRange: (val) => {
-    if (!isString(val)) return;
-    const [minHeight, maxHeight] = val.split(" ");
-    return {
-      ...transformSize("minHeight", minHeight),
-      ...transformSize("maxHeight", maxHeight || minHeight)
-    };
-  },
-  size: (val) => {
-    if (!isString(val)) return;
-    const [inlineSize, blockSize] = val.split(" ");
-    return {
-      ...transformSizeRatio("inlineSize", inlineSize),
-      ...transformSizeRatio("blockSize", blockSize || inlineSize)
-    };
-  },
-  minBlockSize: (val, { props }) => transformSizeRatio("minBlockSize", val, props),
-  minInlineSize: (val, { props }) => transformSizeRatio("minInlineSize", val, props),
-  maxBlockSize: (val, { props }) => transformSizeRatio("maxBlockSize", val, props),
-  maxInlineSize: (val, { props }) => transformSizeRatio("maxInlineSize", val, props),
-  minSize: (val) => {
-    if (!isString(val)) return;
-    const [minInlineSize, minBlockSize] = val.split(" ");
-    return {
-      ...transformSize("minInlineSize", minInlineSize),
-      ...transformSize("minBlockSize", minBlockSize || minInlineSize)
-    };
-  },
-  maxSize: (val) => {
-    if (!isString(val)) return;
-    const [maxInlineSize, maxBlockSize] = val.split(" ");
-    return {
-      ...transformSize("maxInlineSize", maxInlineSize),
-      ...transformSize("maxBlockSize", maxBlockSize || maxInlineSize)
-    };
-  },
-  borderWidth: (val, { props }) => transformSizeRatio("borderWidth", val, props),
-  padding: (val, { props }) => transformSizeRatio("padding", val, props),
-  scrollPadding: (val, { props }) => transformSizeRatio("scrollPadding", val, props),
-  paddingInline: (val) => {
-    if (!isString(val)) return;
-    const [paddingInlineStart, paddingInlineEnd] = val.split(" ");
-    return {
-      ...transformSize("paddingInlineStart", paddingInlineStart),
-      ...transformSize("paddingInlineEnd", paddingInlineEnd || paddingInlineStart)
-    };
-  },
-  paddingBlock: (val) => {
-    if (!isString(val)) return;
-    const [paddingBlockStart, paddingBlockEnd] = val.split(" ");
-    return {
-      ...transformSize("paddingBlockStart", paddingBlockStart),
-      ...transformSize("paddingBlockEnd", paddingBlockEnd || paddingBlockStart)
-    };
-  },
-  // Traditional directional padding
-  paddingTop: (val, { props }) => transformSizeRatio("paddingBlockStart", val, props),
-  paddingBottom: (val, { props }) => transformSizeRatio("paddingBlockEnd", val, props),
-  paddingLeft: (val, { props }) => transformSizeRatio("paddingInlineStart", val, props),
-  paddingRight: (val, { props }) => transformSizeRatio("paddingInlineEnd", val, props),
-  // Logical properties (for reference)
-  paddingBlockStart: (val, { props }) => transformSizeRatio("paddingBlockStart", val, props),
-  // maps to top
-  paddingBlockEnd: (val, { props }) => transformSizeRatio("paddingBlockEnd", val, props),
-  // maps to bottom
-  paddingInlineStart: (val, { props }) => transformSizeRatio("paddingInlineStart", val, props),
-  // maps to left
-  paddingInlineEnd: (val, { props }) => transformSizeRatio("paddingInlineEnd", val, props),
-  // maps to right
-  margin: (val, { props }) => transformSizeRatio("margin", val, props),
-  marginInline: (val) => {
-    if (!isString(val)) return;
-    const [marginInlineStart, marginInlineEnd] = val.split(" ");
-    return {
-      ...transformSize("marginInlineStart", marginInlineStart),
-      ...transformSize("marginInlineEnd", marginInlineEnd || marginInlineStart)
-    };
-  },
-  marginBlock: (val, { props }) => {
-    if (!isString(props.marginBlock)) return;
-    const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(" ");
-    return {
-      ...transformSize("marginBlockStart", marginBlockStart),
-      ...transformSize("marginBlockEnd", marginBlockEnd || marginBlockStart)
-    };
-  },
-  // Traditional directional margin
-  marginTop: (val, { props }) => transformSizeRatio("marginBlockStart", val, props),
-  marginBottom: (val, { props }) => transformSizeRatio("marginBlockEnd", val, props),
-  marginLeft: (val, { props }) => transformSizeRatio("marginInlineStart", val, props),
-  marginRight: (val, { props }) => transformSizeRatio("marginInlineEnd", val, props),
-  // Logical properties
-  marginInlineStart: (val, { props }) => transformSizeRatio("marginInlineStart", val, props),
-  marginInlineEnd: (val, { props }) => transformSizeRatio("marginInlineEnd", val, props),
-  marginBlockStart: (val, { props }) => transformSizeRatio("marginBlockStart", val, props),
-  marginBlockEnd: (val, { props }) => transformSizeRatio("marginBlockEnd", val, props),
-  gap: (val) => ({
-    gap: transfromGap(val)
-  }),
-  columnGap: (val, { props }) => getSpacingBasedOnRatio(props, "columnGap", val),
-  rowGap: (val, { props }) => getSpacingBasedOnRatio(props, "rowGap", val),
-  flexWrap: (val, { props }) => ({
-    display: "flex",
-    flexFlow: (val || "row").split(" ")[0] + " " + props.flexWrap
-  }),
-  flexFlow: (val, { props }) => {
-    const { reverse } = props;
-    if (!isString(val)) return;
-    let [direction, wrap] = (val || "row").split(" ");
-    if (val.startsWith("x") || val === "row") direction = "row";
-    if (val.startsWith("y") || val === "column") direction = "column";
-    return {
-      display: "flex",
-      flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
-    };
-  },
-  flexAlign: (val) => {
-    if (!isString(val)) return;
-    const [alignItems, justifyContent] = val.split(" ");
-    return {
-      display: "flex",
-      alignItems,
-      justifyContent
-    };
-  },
-  round: (val, { props }) => transformBorderRadius(val || props.borderRadius, props, "round"),
-  borderRadius: (val, { props }) => transformBorderRadius(val || props.round, props, "borderRadius")
-};
-export {
-  BLOCK_PROPS
-};