css-in-props - npm Package Compare versions

Comparing version 2.11.523 to 3.0.1

dist/cjs/index.js

@@ -6,6 +6,2 @@ "use strict";
 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) => {
@@ -21,19 +17,8 @@ if (from && typeof from === "object" || typeof from === "function") {
 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);

dist/cjs/props/animation.js

@@ -30,4 +30,3 @@ "use strict";
   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;
@@ -38,4 +37,4 @@ const record = ANIMATION[animation];
 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,
@@ -48,14 +47,14 @@ animationDelay: (0, import_scratch.getTimingByKey)(el.props.animationDelay || "0s").timing,
   }),
-  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)
   })
 };

dist/cjs/props/block.js

@@ -27,15 +27,14 @@ "use strict";
 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 {
@@ -46,10 +45,9 @@ ...(0, import_scratch.transformSize)("height", 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 {
@@ -60,8 +58,7 @@ ...(0, import_scratch.transformSize)("minWidth", 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 {
@@ -72,6 +69,5 @@ ...(0, import_scratch.transformSize)("minHeight", 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 {
@@ -82,10 +78,9 @@ ...(0, import_scratch.transformSizeRatio)("inlineSize", 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 {
@@ -96,6 +91,5 @@ ...(0, import_scratch.transformSize)("minInlineSize", 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 {
@@ -106,9 +100,8 @@ ...(0, import_scratch.transformSize)("maxInlineSize", 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 {
@@ -119,6 +112,5 @@ ...(0, import_scratch.transformSize)("paddingInlineStart", 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 {
@@ -129,11 +121,20 @@ ...(0, import_scratch.transformSize)("paddingBlockStart", 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 {
@@ -144,5 +145,4 @@ ...(0, import_scratch.transformSize)("marginInlineStart", 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(" ");
@@ -154,24 +154,21 @@ return {
   },
-  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 {
@@ -182,6 +179,5 @@ display: "flex",
   },
-  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 {
@@ -192,3 +188,5 @@ display: "flex",
     };
-  }
+  },
+  round: (val, { props }) => (0, import_scratch.transformBorderRadius)(val || props.borderRadius, props, "round"),
+  borderRadius: (val, { props }) => (0, import_scratch.transformBorderRadius)(val || props.round, props, "borderRadius")
 };

dist/cjs/props/font.js

@@ -26,13 +26,12 @@ "use strict";
 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
   })
 };

dist/cjs/props/index.js

@@ -6,2 +6,6 @@ "use strict";
 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) => {
@@ -18,3 +22,16 @@ if (from && typeof from === "object" || typeof from === "function") {
 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);
@@ -27,1 +44,16 @@ __reExport(props_exports, require("./block"), 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;

dist/cjs/props/misc.js

@@ -25,15 +25,12 @@ "use strict";
 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 };
   }
 };

dist/cjs/props/position.js

@@ -26,19 +26,14 @@ "use strict";
 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 {
@@ -49,7 +44,5 @@ top: 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 {
@@ -56,0 +49,0 @@ left: vi[0],

dist/cjs/props/theme.js

@@ -32,53 +32,41 @@ "use strict";
 const THEME_PROPS = {
-  theme: (element) => {
+  theme: (val, element) => {
     const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!props.theme)
-      return;
-    const hasSubtheme = props.theme.includes(" ") && !props.theme.includes("@");
+    if (!val) return;
+    const hasSubtheme = val.includes(" ") && !val.includes("@");
     const globalThemeForced = `@${props.themeModifier || globalTheme}`;
     if (hasSubtheme) {
-      const themeAppliedInVal = props.theme.split(" ");
+      const themeAppliedInVal = val.split(" ");
       themeAppliedInVal.splice(1, 0, globalThemeForced);
       return (0, import_scratch.getMediaTheme)(themeAppliedInVal);
-    } else if (props.theme.includes("@{globalTheme}"))
-      props.theme.replace("@{globalTheme}", globalThemeForced);
-    return (0, import_scratch.getMediaTheme)(props.theme, `@${props.themeModifier || globalTheme}`);
+    } else if (val.includes("@{globalTheme}")) val.replace("@{globalTheme}", globalThemeForced);
+    return (0, import_scratch.getMediaTheme)(val, `@${props.themeModifier || globalTheme}`);
   },
-  color: (element) => {
-    const { props } = element;
+  color: (val, element) => {
     const globalTheme = getSystemGlobalTheme(element);
-    if (!props.color)
-      return;
+    if (!val) return;
     return {
-      color: (0, import_scratch.getMediaColor)(props.color, globalTheme)
+      color: (0, import_scratch.getMediaColor)(val, globalTheme)
     };
   },
-  background: (element) => {
-    const { props } = element;
+  background: (val, element) => {
     const globalTheme = getSystemGlobalTheme(element);
-    if (!props.background)
-      return;
+    if (!val) return;
     return {
-      background: (0, import_scratch.getMediaColor)(props.background, globalTheme)
+      background: (0, import_scratch.getMediaColor)(val, globalTheme)
     };
   },
-  backgroundColor: (element) => {
-    const { props } = element;
+  backgroundColor: (val, element) => {
     const globalTheme = getSystemGlobalTheme(element);
-    if (!props.backgroundColor)
-      return;
+    if (!val) return;
     return {
-      backgroundColor: (0, import_scratch.getMediaColor)(props.backgroundColor, globalTheme)
+      backgroundColor: (0, import_scratch.getMediaColor)(val, globalTheme)
     };
   },
-  backgroundImage: (element, s, ctx) => {
-    const { props } = element;
+  backgroundImage: (val, element, s, ctx) => {
     const globalTheme = getSystemGlobalTheme(element);
-    let val = props.backgroundImage;
-    if (!val)
-      return;
+    if (!val) return;
     const file = ctx.files && ctx.files[val];
-    if (file && file.content)
-      val = file.content.src;
+    if (file && file.content) val = file.content.src;
     return {
@@ -88,68 +76,53 @@ backgroundImage: (0, import_scratch.transformBackgroundImage)(val, globalTheme)
   },
-  backgroundSize: ({ props }) => ({
-    backgroundSize: props.backgroundSize
+  textStroke: (val) => ({
+    WebkitTextStroke: (0, import_scratch.transformTextStroke)(val)
   }),
-  backgroundPosition: ({ props }) => ({
-    backgroundPosition: props.backgroundPosition
+  outline: (val) => ({
+    outline: (0, import_scratch.transformBorder)(val)
   }),
-  backgroundRepeat: ({ props }) => ({
-    backgroundRepeat: props.backgroundRepeat
+  outlineOffset: (val, { props }) => (0, import_scratch.transformSizeRatio)("outlineOffset", val, props),
+  border: (val) => ({
+    border: (0, import_scratch.transformBorder)(val)
   }),
-  textStroke: ({ props }) => ({
-    WebkitTextStroke: (0, import_scratch.transformTextStroke)(props.textStroke)
-  }),
-  outline: ({ props }) => ({
-    outline: (0, import_scratch.transformBorder)(props.outline)
-  }),
-  outlineOffset: ({ props }) => (0, import_scratch.transformSizeRatio)("outlineOffset", props),
-  border: ({ props }) => ({
-    border: (0, import_scratch.transformBorder)(props.border)
-  }),
-  borderColor: (element) => {
-    const { props } = element;
+  borderColor: (val, element) => {
     const globalTheme = getSystemGlobalTheme(element);
-    if (!props.borderColor)
-      return;
+    if (!val) return;
     return {
-      borderColor: (0, import_scratch.getMediaColor)(props.borderColor, globalTheme)
+      borderColor: (0, import_scratch.getMediaColor)(val, globalTheme)
     };
   },
-  borderLeft: ({ props }) => ({
-    borderLeft: (0, import_scratch.transformBorder)(props.borderLeft)
+  borderLeft: (val) => ({
+    borderLeft: (0, import_scratch.transformBorder)(val)
   }),
-  borderTop: ({ props }) => ({
-    borderTop: (0, import_scratch.transformBorder)(props.borderTop)
+  borderTop: (val) => ({
+    borderTop: (0, import_scratch.transformBorder)(val)
   }),
-  borderRight: ({ props }) => ({
-    borderRight: (0, import_scratch.transformBorder)(props.borderRight)
+  borderRight: (val) => ({
+    borderRight: (0, import_scratch.transformBorder)(val)
   }),
-  borderBottom: ({ props }) => ({
-    borderBottom: (0, import_scratch.transformBorder)(props.borderBottom)
+  borderBottom: (val) => ({
+    borderBottom: (0, import_scratch.transformBorder)(val)
   }),
-  shadow: (element) => {
-    const { props } = element;
+  shadow: (val, element) => {
     const globalTheme = getSystemGlobalTheme(element);
-    if (!props.backgroundImage)
-      return;
+    if (!val) return;
     return {
-      boxShadow: (0, import_scratch.transformShadow)(props.shadow, globalTheme)
+      boxShadow: (0, import_scratch.transformShadow)(val, globalTheme)
     };
   },
-  boxShadow: (element, state, context) => {
-    const { props } = element;
-    if (!(0, import_utils.isString)(props.boxShadow))
-      return;
-    const [val, hasImportant] = props.boxShadow.split("!importan");
+  boxShadow: (val, element) => {
+    if (!(0, import_utils.isString)(val)) return;
+    const [value, hasImportant] = val.split("!importan");
     const globalTheme = getSystemGlobalTheme(element);
     const important = hasImportant ? " !important" : "";
     return {
-      boxShadow: (0, import_scratch.transformBoxShadow)(val.trim(), globalTheme) + important
+      boxShadow: (0, import_scratch.transformBoxShadow)(value.trim(), globalTheme) + important
     };
   },
-  textShadow: ({ props, context }) => ({
-    textShadow: (0, import_scratch.transformBoxShadow)(props.textShadow, context.designSystem.globalTheme)
+  textShadow: (val, { context }) => ({
+    textShadow: (0, import_scratch.transformBoxShadow)(val, context.designSystem.globalTheme)
   }),
-  columnRule: ({ props }) => ({
-    columnRule: (0, import_scratch.transformBorder)(props.columnRule)
+  columnRule: (val) => ({
+    columnRule: (0, import_scratch.transformBorder)(val)
   })
 };

dist/cjs/props/timing.js

@@ -26,18 +26,18 @@ "use strict";
 const TIMING_PROPS = {
-  transition: ({ props }) => ({
-    transition: (0, import_scratch.splitTransition)(props.transition)
+  transition: (val) => ({
+    transition: (0, import_scratch.splitTransition)(val)
   }),
-  transitionDuration: ({ props }) => ({
-    transitionDuration: (0, import_scratch.transformDuration)(props.transitionDuration)
+  transitionDuration: (val) => ({
+    transitionDuration: (0, import_scratch.transformDuration)(val)
   }),
-  transitionDelay: ({ props }) => ({
-    transitionDelay: (0, import_scratch.transformDuration)(props.transitionDelay)
+  transitionDelay: (val) => ({
+    transitionDelay: (0, import_scratch.transformDuration)(val)
   }),
-  transitionTimingFunction: ({ props }) => ({
-    transitionTimingFunction: (0, import_scratch.getTimingFunction)(props.transitionTimingFunction)
+  transitionTimingFunction: (val) => ({
+    transitionTimingFunction: (0, import_scratch.getTimingFunction)(val)
   }),
-  transitionProperty: ({ props }) => ({
-    transitionProperty: props.transitionProperty,
-    willChange: props.transitionProperty
+  transitionProperty: (val) => ({
+    transitionProperty: val,
+    willChange: val
   })
 };

dist/cjs/set.js

@@ -24,3 +24,3 @@ "use strict";
 module.exports = __toCommonJS(set_exports);
-var import_transform = require("./transform");
+var import_transform = require("./_transform");
 var import_emotion = require("./emotion");
@@ -27,0 +27,0 @@ const setClassname = (props, emotionCss) => {

package.json

@@ -5,3 +5,3 @@ {
   "author": "symbo.ls",
-  "version": "2.11.523",
+  "version": "3.0.1",
   "repository": "https://github.com/symbo-ls/smbls",
@@ -30,7 +30,7 @@ "type": "module",
     "@domql/utils": "^2.5.0",
-    "@symbo.ls/atoms": "^2.11.523",
-    "@symbo.ls/emotion": "^2.11.515",
-    "@symbo.ls/scratch": "^2.11.523"
+    "@symbo.ls/atoms": "^3.0.1",
+    "@symbo.ls/emotion": "^3.0.1",
+    "@symbo.ls/scratch": "^3.0.1"
   },
-  "gitHead": "08e5b257605d1475f4628529f8e35373d87eb369"
+  "gitHead": "a4e7f586f7e4f60bd7b6a8388bdacc3ae1879433"
 }

src/index.js

@@ -6,12 +6,3 @@ 'use strict'
 export * from './emotion'
-export * from './registry'
-
-export const exetuteClassPerComponent = (component, element) => {
-  const classObj = {}
-  if (component.class) {
-    for (const classProp in component.class) {
-      classObj[classProp] = component.class[classProp](element)
-    }
-  }
-  return classObj
-}
+export * from './props'
+export * from './props/defaults'

src/props/animation.js

@@ -17,4 +17,4 @@ 'use strict'
 export const ANIMATION_PROPS = {
-  animation: (el) => ({
-    animationName: applyAnimationProps(el.props.animation, el),
+  animation: (val, el) => ({
+    animationName: applyAnimationProps(val, el),
     animationDuration: getTimingByKey(el.props.animationDuration || 'A').timing,
@@ -27,14 +27,14 @@ animationDelay: getTimingByKey(el.props.animationDelay || '0s').timing,
   }),
-  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: getTimingByKey(val).timing
   }),
-  animationDelay: ({ props, deps }) => ({
-    animationDelay: deps.getTimingByKey(props.animationDelay).timing
+  animationDelay: (val) => ({
+    animationDelay: getTimingByKey(val).timing
   }),
-  animationTimingFunction: ({ props, deps }) => ({
-    animationTimingFunction: deps.getTimingFunction(props.animationTimingFunction)
+  animationTimingFunction: (val) => ({
+    animationTimingFunction: getTimingFunction(val)
   })
 }

src/props/block.js

@@ -8,2 +8,3 @@ 'use strict'
   transformSize,
+  transformBorderRadius,
   transformSizeRatio,
@@ -14,20 +15,20 @@ transfromGap
 export 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 }) => transformSizeRatio('height', props),
-  width: ({ props }) => transformSizeRatio('width', props),
+  height: (val, { props }) => transformSizeRatio('height', val, props),
+  width: (val, { props }) => transformSizeRatio('width', val, props),
 
-  boxSizing: ({ props }) => !isUndefined(props.boxSizing)
-    ? ({ boxSizing: props.boxSizing })
+  boxSizing: (val) => !isUndefined(val)
+    ? ({ boxSizing: val })
     : { boxSizing: 'border-box' },
 
-  boxSize: ({ props }) => {
-    if (!isString(props.boxSize)) return
-    const [height, width] = props.boxSize.split(' ')
+  boxSize: (val) => {
+    if (!isString(val)) return
+    const [height, width] = val.split(' ')
     return {
@@ -39,10 +40,10 @@ ...transformSize('height', height),
 
-  inlineSize: ({ props }) => transformSizeRatio('inlineSize', props),
-  blockSize: ({ props }) => transformSizeRatio('blockSize', props),
+  inlineSize: (val, { props }) => transformSizeRatio('inlineSize', val, props),
+  blockSize: (val, { props }) => transformSizeRatio('blockSize', val, props),
 
-  minWidth: ({ props }) => transformSizeRatio('minWidth', props),
-  maxWidth: ({ props }) => transformSizeRatio('maxWidth', props),
-  widthRange: ({ props }) => {
-    if (!isString(props.widthRange)) return
-    const [minWidth, maxWidth] = props.widthRange.split(' ')
+  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 {
@@ -54,7 +55,7 @@ ...transformSize('minWidth', minWidth),
 
-  minHeight: ({ props }) => transformSizeRatio('minHeight', props),
-  maxHeight: ({ props }) => transformSizeRatio('maxHeight', props),
-  heightRange: ({ props }) => {
-    if (!isString(props.heightRange)) return
-    const [minHeight, maxHeight] = props.heightRange.split(' ')
+  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 {
@@ -66,5 +67,5 @@ ...transformSize('minHeight', minHeight),
 
-  size: ({ props }) => {
-    if (!isString(props.size)) return
-    const [inlineSize, blockSize] = props.size.split(' ')
+  size: (val) => {
+    if (!isString(val)) return
+    const [inlineSize, blockSize] = val.split(' ')
     return {
@@ -76,11 +77,11 @@ ...transformSizeRatio('inlineSize', inlineSize),
 
-  minBlockSize: ({ props }) => transformSizeRatio('minBlockSize', props),
-  minInlineSize: ({ props }) => transformSizeRatio('minInlineSize', props),
+  minBlockSize: (val, { props }) => transformSizeRatio('minBlockSize', val, props),
+  minInlineSize: (val, { props }) => transformSizeRatio('minInlineSize', val, props),
 
-  maxBlockSize: ({ props }) => transformSizeRatio('maxBlockSize', props),
-  maxInlineSize: ({ props }) => transformSizeRatio('maxInlineSize', props),
+  maxBlockSize: (val, { props }) => transformSizeRatio('maxBlockSize', val, props),
+  maxInlineSize: (val, { props }) => transformSizeRatio('maxInlineSize', val, props),
 
-  minSize: ({ props }) => {
-    if (!isString(props.minSize)) return
-    const [minInlineSize, minBlockSize] = props.minSize.split(' ')
+  minSize: (val) => {
+    if (!isString(val)) return
+    const [minInlineSize, minBlockSize] = val.split(' ')
     return {
@@ -92,5 +93,5 @@ ...transformSize('minInlineSize', minInlineSize),
 
-  maxSize: ({ props }) => {
-    if (!isString(props.maxSize)) return
-    const [maxInlineSize, maxBlockSize] = props.maxSize.split(' ')
+  maxSize: (val) => {
+    if (!isString(val)) return
+    const [maxInlineSize, maxBlockSize] = val.split(' ')
     return {
@@ -102,9 +103,9 @@ ...transformSize('maxInlineSize', maxInlineSize),
 
-  borderWidth: ({ props }) => transformSizeRatio('borderWidth', props),
+  borderWidth: (val, { props }) => transformSizeRatio('borderWidth', val, props),
 
-  padding: ({ props }) => transformSizeRatio('padding', props),
-  scrollPadding: ({ props }) => transformSizeRatio('scrollPadding', props),
-  paddingInline: ({ props }) => {
-    if (!isString(props.paddingInline)) return
-    const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ')
+  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 {
@@ -115,5 +116,5 @@ ...transformSize('paddingInlineStart', paddingInlineStart),
   },
-  paddingBlock: ({ props }) => {
-    if (!isString(props.paddingBlock)) return
-    const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ')
+  paddingBlock: (val) => {
+    if (!isString(val)) return
+    const [paddingBlockStart, paddingBlockEnd] = val.split(' ')
     return {
@@ -124,11 +125,18 @@ ...transformSize('paddingBlockStart', paddingBlockStart),
   },
-  paddingInlineStart: ({ props }) => transformSizeRatio('paddingInlineStart', props),
-  paddingInlineEnd: ({ props }) => transformSizeRatio('paddingInlineEnd', props),
-  paddingBlockStart: ({ props }) => transformSizeRatio('paddingBlockStart', props),
-  paddingBlockEnd: ({ props }) => transformSizeRatio('paddingBlockEnd', props),
+  // 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),
 
-  margin: ({ props }) => transformSizeRatio('margin', props),
-  marginInline: ({ props }) => {
-    if (!isString(props.marginInline)) return
-    const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ')
+  // 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 {
@@ -139,3 +147,3 @@ ...transformSize('marginInlineStart', marginInlineStart),
   },
-  marginBlock: ({ props }) => {
+  marginBlock: (val, { props }) => {
     if (!isString(props.marginBlock)) return
@@ -148,24 +156,24 @@ const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
   },
-  marginInlineStart: ({ props }) => transformSizeRatio('marginInlineStart', props),
-  marginInlineEnd: ({ props }) => transformSizeRatio('marginInlineEnd', props),
-  marginBlockStart: ({ props }) => transformSizeRatio('marginBlockStart', props),
-  marginBlockEnd: ({ props }) => transformSizeRatio('marginBlockEnd', props),
+  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: ({ props }) => ({
-    gap: transfromGap(props.gap)
+  gap: (val) => ({
+    gap: transfromGap(val)
   }),
 
-  columnGap: ({ props }) => getSpacingBasedOnRatio(props, 'columnGap'),
-  rowGap: ({ props }) => getSpacingBasedOnRatio(props, 'rowGap'),
+  columnGap: (val, { props }) => getSpacingBasedOnRatio(props, 'columnGap', val),
+  rowGap: (val, { props }) => getSpacingBasedOnRatio(props, 'rowGap', val),
 
-  flexWrap: ({ props }) => ({
+  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 (!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 (!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 {
@@ -176,5 +184,5 @@ display: 'flex',
   },
-  flexAlign: ({ props }) => {
-    if (!isString(props.flexAlign)) return
-    const [alignItems, justifyContent] = props.flexAlign.split(' ')
+  flexAlign: (val) => {
+    if (!isString(val)) return
+    const [alignItems, justifyContent] = val.split(' ')
     return {
@@ -185,4 +193,6 @@ display: 'flex',
     }
-  }
+  },
 
+  round: (val, { props }) => transformBorderRadius(val || props.borderRadius, props, 'round'),
+  borderRadius: (val, { props }) => transformBorderRadius(val || props.round, props, 'borderRadius')
 }

src/props/font.js

@@ -6,13 +6,12 @@ 'use strict'
 export const FONT_PROPS = {
-  fontSize: (el) => {
-    const { props } = el
-    return props.fontSize ? getFontSizeByKey(props.fontSize) : null
+  fontSize: (value) => {
+    return getFontSizeByKey(value) || value
   },
-  fontFamily: ({ props }) => ({
-    fontFamily: getFontFamily(props.fontFamily) || props.fontFamily
+  fontFamily: (value) => ({
+    fontFamily: getFontFamily(value) || value
   }),
-  fontWeight: ({ props }) => ({
-    fontWeight: props.fontWeight,
-    fontVariationSettings: '"wght" ' + props.fontWeight
+  fontWeight: (value) => ({
+    fontWeight: value,
+    fontVariationSettings: '"wght" ' + value
   })
 }

src/props/index.js

 'use strict'
 
+import { ANIMATION_PROPS } from './animation'
+import { BLOCK_PROPS } from './block'
+import { FONT_PROPS } from './font'
+import { MISC_PROPS } from './misc'
+import { POSITION_PROPS } from './position'
+import { THEME_PROPS } from './theme'
+import { TIMING_PROPS } from './timing'
+import { FLEX_PROPS } from './flex'
+import { GRID_PROPS } from './grid'
+
 export * from './animation'
@@ -10,1 +20,18 @@ export * from './block'
 export * from './timing'
+export * from './flex'
+export * from './grid'
+
+export const CSS_PROPS_REGISTRY = {
+  ...ANIMATION_PROPS,
+  ...BLOCK_PROPS,
+  ...FONT_PROPS,
+  ...MISC_PROPS,
+  ...MISC_PROPS,
+  ...POSITION_PROPS,
+  ...THEME_PROPS,
+  ...TIMING_PROPS,
+  ...FLEX_PROPS,
+  ...GRID_PROPS
+}
+
+export default CSS_PROPS_REGISTRY

src/props/misc.js

 'use strict'
 
 export 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
+  cursor: (value, el, s, ctx) => {
+    if (!value) return
 
-    const file = ctx.files && ctx.files[val]
-    if (file && file.content) val = `url(${file.content.src})`
+    const file = ctx.files && ctx.files[value]
+    if (file && file.content) value = `url(${file.content.src})`
 
-    return ({ cursor: val })
+    return ({ cursor: value })
   }
 }

src/props/position.js

@@ -6,18 +6,16 @@ 'use strict'
 export 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 => 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 => getSpacingByKey(v, 'k').k).join(' ') }
   },
 
-  left: ({ props }) => getSpacingByKey(props.left, 'left'),
-  top: ({ props }) => getSpacingByKey(props.top, 'top'),
-  right: ({ props }) => getSpacingByKey(props.right, 'right'),
-  bottom: ({ props }) => getSpacingByKey(props.bottom, 'bottom'),
+  left: (val) => getSpacingByKey(val, 'left'),
+  top: (val) => getSpacingByKey(val, 'top'),
+  right: (val) => getSpacingByKey(val, 'right'),
+  bottom: (val) => getSpacingByKey(val, 'bottom'),
 
-  verticalInset: ({ props }) => {
-    const { verticalInset } = props
-    if (typeof verticalInset !== 'string') return
-    const vi = verticalInset.split(' ').map(v => getSpacingByKey(v, 'k').k)
+  verticalInset: (val) => {
+    if (typeof val !== 'string') return
+    const vi = val.split(' ').map(v => getSpacingByKey(v, 'k').k)
     return {
@@ -29,6 +27,5 @@ top: vi[0],
 
-  horizontalInset: ({ props }) => {
-    const { horizontalInset } = props
-    if (typeof horizontalInset !== 'string') return
-    const vi = horizontalInset.split(' ').map(v => getSpacingByKey(v, 'k').k)
+  horizontalInset: (val) => {
+    if (typeof val !== 'string') return
+    const vi = val.split(' ').map(v => getSpacingByKey(v, 'k').k)
     return {
@@ -35,0 +32,0 @@ left: vi[0],

src/props/theme.js

@@ -22,47 +22,42 @@ 'use strict'
 export const THEME_PROPS = {
-  theme: (element) => {
+  theme: (val, element) => {
     const { props } = element
     const globalTheme = getSystemGlobalTheme(element)
-    if (!props.theme) return
-    const hasSubtheme = props.theme.includes(' ') && !props.theme.includes('@')
+    if (!val) return
+    const hasSubtheme = val.includes(' ') && !val.includes('@')
     const globalThemeForced = `@${props.themeModifier || globalTheme}`
     if (hasSubtheme) {
-      const themeAppliedInVal = props.theme.split(' ')
+      const themeAppliedInVal = val.split(' ')
       themeAppliedInVal.splice(1, 0, globalThemeForced)
       return getMediaTheme(themeAppliedInVal)
-    } else if (props.theme.includes('@{globalTheme}')) props.theme.replace('@{globalTheme}', globalThemeForced)
-    return getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
+    } else if (val.includes('@{globalTheme}')) val.replace('@{globalTheme}', globalThemeForced)
+    return getMediaTheme(val, `@${props.themeModifier || globalTheme}`)
   },
 
-  color: (element) => {
-    const { props } = element
+  color: (val, element) => {
     const globalTheme = getSystemGlobalTheme(element)
-    if (!props.color) return
+    if (!val) return
     return {
-      color: getMediaColor(props.color, globalTheme)
+      color: getMediaColor(val, globalTheme)
     }
   },
 
-  background: (element) => {
-    const { props } = element
+  background: (val, element) => {
     const globalTheme = getSystemGlobalTheme(element)
-    if (!props.background) return
+    if (!val) return
     return {
-      background: getMediaColor(props.background, globalTheme)
+      background: getMediaColor(val, globalTheme)
     }
   },
 
-  backgroundColor: (element) => {
-    const { props } = element
+  backgroundColor: (val, element) => {
     const globalTheme = getSystemGlobalTheme(element)
-    if (!props.backgroundColor) return
+    if (!val) return
     return {
-      backgroundColor: getMediaColor(props.backgroundColor, globalTheme)
+      backgroundColor: getMediaColor(val, globalTheme)
     }
   },
 
-  backgroundImage: (element, s, ctx) => {
-    const { props } = element
+  backgroundImage: (val, element, s, ctx) => {
     const globalTheme = getSystemGlobalTheme(element)
-    let val = props.backgroundImage
     if (!val) return
@@ -76,76 +71,61 @@ const file = ctx.files && ctx.files[val]
 
-  backgroundSize: ({ props }) => ({
-    backgroundSize: props.backgroundSize
+  textStroke: (val) => ({
+    WebkitTextStroke: transformTextStroke(val)
   }),
 
-  backgroundPosition: ({ props }) => ({
-    backgroundPosition: props.backgroundPosition
+  outline: (val) => ({
+    outline: transformBorder(val)
   }),
 
-  backgroundRepeat: ({ props }) => ({
-    backgroundRepeat: props.backgroundRepeat
-  }),
+  outlineOffset: (val, { props }) => transformSizeRatio('outlineOffset', val, props),
 
-  textStroke: ({ props }) => ({
-    WebkitTextStroke: transformTextStroke(props.textStroke)
+  border: (val) => ({
+    border: transformBorder(val)
   }),
 
-  outline: ({ props }) => ({
-    outline: transformBorder(props.outline)
-  }),
-
-  outlineOffset: ({ props }) => transformSizeRatio('outlineOffset', props),
-
-  border: ({ props }) => ({
-    border: transformBorder(props.border)
-  }),
-
-  borderColor: (element) => {
-    const { props } = element
+  borderColor: (val, element) => {
     const globalTheme = getSystemGlobalTheme(element)
-    if (!props.borderColor) return
+    if (!val) return
     return {
-      borderColor: getMediaColor(props.borderColor, globalTheme)
+      borderColor: getMediaColor(val, globalTheme)
     }
   },
-  borderLeft: ({ props }) => ({
-    borderLeft: transformBorder(props.borderLeft)
+  borderLeft: (val) => ({
+    borderLeft: transformBorder(val)
   }),
-  borderTop: ({ props }) => ({
-    borderTop: transformBorder(props.borderTop)
+  borderTop: (val) => ({
+    borderTop: transformBorder(val)
   }),
-  borderRight: ({ props }) => ({
-    borderRight: transformBorder(props.borderRight)
+  borderRight: (val) => ({
+    borderRight: transformBorder(val)
   }),
-  borderBottom: ({ props }) => ({
-    borderBottom: transformBorder(props.borderBottom)
+  borderBottom: (val) => ({
+    borderBottom: transformBorder(val)
   }),
 
-  shadow: (element) => {
-    const { props } = element
+  shadow: (val, element) => {
     const globalTheme = getSystemGlobalTheme(element)
-    if (!props.backgroundImage) return
+    if (!val) return
     return ({
-      boxShadow: transformShadow(props.shadow, globalTheme)
+      boxShadow: transformShadow(val, globalTheme)
     })
   },
 
-  boxShadow: (element, state, context) => {
-    const { props } = element
-    if (!isString(props.boxShadow)) return
-    const [val, hasImportant] = props.boxShadow.split('!importan')
+  boxShadow: (val, element) => {
+    if (!isString(val)) return
+    const [value, hasImportant] = val.split('!importan')
     const globalTheme = getSystemGlobalTheme(element)
     const important = hasImportant ? ' !important' : ''
     return {
-      boxShadow: transformBoxShadow(val.trim(), globalTheme) + important
+      boxShadow: transformBoxShadow(value.trim(), globalTheme) + important
     }
   },
 
-  textShadow: ({ props, context }) => ({
-    textShadow: transformBoxShadow(props.textShadow, context.designSystem.globalTheme)
+  textShadow: (val, { context }) => ({
+    textShadow: transformBoxShadow(val, context.designSystem.globalTheme)
   }),
 
-  columnRule: ({ props }) => ({
-    columnRule: transformBorder(props.columnRule)
+  columnRule: (val) => ({
+    columnRule: transformBorder(val)
   })
 }

src/props/timing.js

@@ -10,18 +10,18 @@ 'use strict'
 export const TIMING_PROPS = {
-  transition: ({ props }) => ({
-    transition: splitTransition(props.transition)
+  transition: val => ({
+    transition: splitTransition(val)
   }),
-  transitionDuration: ({ props }) => ({
-    transitionDuration: transformDuration(props.transitionDuration)
+  transitionDuration: val => ({
+    transitionDuration: transformDuration(val)
   }),
-  transitionDelay: ({ props }) => ({
-    transitionDelay: transformDuration(props.transitionDelay)
+  transitionDelay: val => ({
+    transitionDelay: transformDuration(val)
   }),
-  transitionTimingFunction: ({ props }) => ({
-    transitionTimingFunction: getTimingFunction(props.transitionTimingFunction)
+  transitionTimingFunction: val => ({
+    transitionTimingFunction: getTimingFunction(val)
   }),
-  transitionProperty: ({ props }) => ({
-    transitionProperty: props.transitionProperty,
-    willChange: props.transitionProperty
+  transitionProperty: val => ({
+    transitionProperty: val,
+    willChange: val
   })
 }

src/set.js

 'use strict'
 
-import { transformClassname } from './transform'
+import { transformClassname } from './_transform'
 import { transformEmotion } from './emotion'
@@ -5,0 +5,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84717

25.59%

Number of package files

39

25.81%

Lines of code

2432

20.52%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @domql/event@3.0.7
  (transitive)

• + Added

  @domql/report@3.0.0
  (transitive)

• + Added

  @domql/state@3.0.7
  (transitive)

• + Added

  @domql/utils@3.0.7
  (transitive)

• + Added

  @symbo.ls/atoms@3.0.100
  (transitive)

• + Added

  @symbo.ls/emotion@3.0.1
  (transitive)

• + Added

  @symbo.ls/scratch@3.0.2
  (transitive)

• + Added

  @symbo.ls/utils@3.0.2
  (transitive)

• - Removed

  @domql/event@2.5.203
  (transitive)

• - Removed

  @domql/report@2.5.203
  (transitive)

• - Removed

  @domql/state@2.5.206
  (transitive)

• - Removed

  @symbo.ls/atoms@2.11.525
  (transitive)

• - Removed

  @symbo.ls/emotion@2.11.515
  (transitive)

• - Removed

  @symbo.ls/scratch@2.11.525
  (transitive)

• - Removed

  @symbo.ls/utils@2.11.512
  (transitive)

• Updated

  @symbo.ls/atoms@^3.0.1

• Updated

  @symbo.ls/emotion@^3.0.1

• Updated

  @symbo.ls/scratch@^3.0.1