css-in-props 3.8.8 → 3.14.0

package/dist/cjs/transform/transformers.js

@@ -22,31 +22,66 @@ __export(transformers_exports, {
   transformersByPrefix: () => transformersByPrefix
 });
 module.exports = __toCommonJS(transformers_exports);
-var import_utils = require("@domql/utils");
-var import_executors = require("./executors");
+var import_utils = require("@symbo.ls/utils");
+var import_executors = require("./executors.js");
+const DATA_THEME_RE = /^\[data-theme=(?:"([^"]+)"|'([^']+)')\]$/;
 const applyMediaProps = (key, selectorProps, element) => {
   const { context } = element;
   if (!context.designSystem?.media) return;
-  const mediaValue = context.designSystem.media[key.slice(1)];
+  const schemeKey = key.slice(1);
+  const mediaValue = context.designSystem.media[schemeKey];
   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 { [key]: generatedClass };
   }
-  return { [mediaKey]: generatedClass };
+  if (mediaValue === "print") {
+    return { "@media print": generatedClass };
+  }
+  if (mediaValue[0] === "(") {
+    return { [`@media screen and ${mediaValue}`]: generatedClass };
+  }
+  const match = mediaValue.match(DATA_THEME_RE);
+  const scheme = match ? match[1] || match[2] : schemeKey;
+  const result = { [`${mediaValue} &`]: generatedClass };
+  if (scheme === "dark" || scheme === "light") {
+    const scopeSelector = context.designSystem?.scopeSelector || ":root";
+    const guard = scopeSelector === ":root" ? ":root:not([data-theme])" : `${scopeSelector}:not([data-theme])`;
+    result[`@media (prefers-color-scheme: ${scheme})`] = {
+      [`${guard} &`]: generatedClass
+    };
+  }
+  return result;
 };
 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 resolved = (0, import_executors.useCssInProps)(selectorProps, element);
+  if (key.includes(",") && resolved) {
+    const flat = {};
+    const nested = {};
+    for (const k in resolved) {
+      if (typeof resolved[k] === "object" && resolved[k] !== null) {
+        nested[k] = resolved[k];
+      } else {
+        flat[k] = resolved[k];
+      }
+    }
+    if (Object.keys(nested).length) {
+      const parts = selectorKey.split(",").map((p) => p.trim());
+      const result = {};
+      if (Object.keys(flat).length) {
+        result[selectorKey] = flat;
+      }
+      for (const nestedKey in nested) {
+        const distributed = parts.map((p) => `${p} ${nestedKey}`).join(", ");
+        result[distributed] = nested[nestedKey];
+      }
+      return result;
+    }
+  }
+  return { [selectorKey]: resolved };
 };
 const resolveCase = (caseKey, element) => {
   const caseFn = element.context?.cases?.[caseKey];
@@ -58,7 +93,7 @@ const applyCaseProps = (key, selectorProps, element) => {
   const caseKey = key.slice(1);
   let isCaseTrue = resolveCase(caseKey, element);
   if (isCaseTrue === void 0) {
-    isCaseTrue = !!element.props?.[caseKey];
+    isCaseTrue = !!element[caseKey];
   }
   if (!isCaseTrue) return;
   return (0, import_executors.useCssInProps)(selectorProps, element);
@@ -68,20 +103,34 @@ const applyVariableProps = (key, selectorVal, element) => {
 };
 const applyConditionalCaseProps = (key, selectorProps, element) => {
   const caseKey = key.slice(1);
-  let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  let isCaseTrue = element[caseKey] === true || element.state?.[caseKey];
   if (!isCaseTrue) {
-    const caseResult = resolveCase(caseKey, element);
-    if (caseResult !== void 0) isCaseTrue = caseResult;
+    if (typeof element[caseKey] === "function") {
+      try {
+        isCaseTrue = element[caseKey](element, element.state, element.context);
+      } catch (e) {
+      }
+    } else {
+      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];
+  let isCaseTrue = element[caseKey] === true || element.state?.[caseKey];
   if (!isCaseTrue) {
-    const caseResult = resolveCase(caseKey, element);
-    if (caseResult !== void 0) isCaseTrue = caseResult;
+    if (typeof element[caseKey] === "function") {
+      try {
+        isCaseTrue = element[caseKey](element, element.state, element.context);
+      } catch (e) {
+      }
+    } else {
+      const caseResult = resolveCase(caseKey, element);
+      if (caseResult !== void 0) isCaseTrue = caseResult;
+    }
   }
   if (isCaseTrue) return;
   return (0, import_executors.useCssInProps)(selectorProps, element);

package/dist/esm/index.js

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

package/dist/esm/props/animation.js

@@ -1,21 +1,26 @@
-import { isObject, isString } from "@domql/utils";
-import { emotion } from "@symbo.ls/emotion";
+import { isObject, isString } from "@symbo.ls/utils";
+import { keyframes as cssKeyframes } from "@symbo.ls/css";
 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);
+let _animCounter = 0;
 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 { animation: ANIMATION } = element.context && element.context.designSystem || {};
+  if (isObject(animation)) {
+    const name = `smbls-anim-${_animCounter++}`;
+    return { animationName: cssKeyframes(name, animation) };
+  }
+  const record = ANIMATION && ANIMATION[animation];
+  if (isObject(record)) {
+    return cssKeyframes(animation, record);
+  }
+  return animation;
 };
 const parseAnimationShorthand = (val, el) => {
-  const { ANIMATION } = el.context && el.context.designSystem || {};
+  const { animation: ANIMATION } = el.context && el.context.designSystem || {};
   const tokens = val.split(/\s+/);
   let name = null;
   const durations = [];
@@ -51,24 +56,24 @@ const ANIMATION_PROPS = {
       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
+        animationDuration: parsed.durations[0] || getTimingByKey(el.animationDuration || "A").timing,
+        animationDelay: parsed.durations[1] || getTimingByKey(el.animationDelay || "0s").timing,
+        animationTimingFunction: parsed.timingFunction || getTimingFunction(el.animationTimingFunction || "ease"),
+        animationFillMode: parsed.fillMode || el.animationFillMode || "both",
+        animationIterationCount: parsed.iterationCount != null ? parsed.iterationCount : el.animationIterationCount || 1,
+        animationPlayState: parsed.playState || el.animationPlayState,
+        animationDirection: parsed.direction || el.animationDirection
       };
     }
     return {
       animationName: applyAnimationProps(val, el),
-      animationDuration: 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
+      animationDuration: getTimingByKey(el.animationDuration || "A").timing,
+      animationDelay: getTimingByKey(el.animationDelay || "0s").timing,
+      animationTimingFunction: getTimingFunction(el.animationTimingFunction || "ease"),
+      animationFillMode: el.animationFillMode || "both",
+      animationIterationCount: el.animationIterationCount || 1,
+      animationPlayState: el.animationPlayState,
+      animationDirection: el.animationDirection
     };
   },
   animationName: (val, el) => ({

package/dist/esm/props/block.js

@@ -1,4 +1,4 @@
-import { isUndefined, isString } from "@domql/utils";
+import { isUndefined, isString } from "@symbo.ls/utils";
 import {
   getSpacingBasedOnRatio,
   transformSize,
@@ -7,14 +7,10 @@ import {
   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),
+  show: (val) => !val ? { display: "none !important" } : void 0,
+  hide: (val) => val ? { display: "none !important" } : void 0,
+  height: (val, el) => transformSizeRatio("height", val, el),
+  width: (val, el) => transformSizeRatio("width", val, el),
   boxSizing: (val) => !isUndefined(val) ? { boxSizing: val } : { boxSizing: "border-box" },
   boxSize: (val) => {
     if (!isString(val)) return;
@@ -24,10 +20,10 @@ const BLOCK_PROPS = {
       ...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),
+  inlineSize: (val, el) => transformSizeRatio("inlineSize", val, el),
+  blockSize: (val, el) => transformSizeRatio("blockSize", val, el),
+  minWidth: (val, el) => transformSizeRatio("minWidth", val, el),
+  maxWidth: (val, el) => transformSizeRatio("maxWidth", val, el),
   widthRange: (val) => {
     if (!isString(val)) return;
     const [minWidth, maxWidth] = val.split(" ");
@@ -36,8 +32,8 @@ const BLOCK_PROPS = {
       ...transformSize("maxWidth", maxWidth || minWidth)
     };
   },
-  minHeight: (val, { props }) => transformSizeRatio("minHeight", val, props),
-  maxHeight: (val, { props }) => transformSizeRatio("maxHeight", val, props),
+  minHeight: (val, el) => transformSizeRatio("minHeight", val, el),
+  maxHeight: (val, el) => transformSizeRatio("maxHeight", val, el),
   heightRange: (val) => {
     if (!isString(val)) return;
     const [minHeight, maxHeight] = val.split(" ");
@@ -54,10 +50,10 @@ const BLOCK_PROPS = {
       ...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),
+  minBlockSize: (val, el) => transformSizeRatio("minBlockSize", val, el),
+  minInlineSize: (val, el) => transformSizeRatio("minInlineSize", val, el),
+  maxBlockSize: (val, el) => transformSizeRatio("maxBlockSize", val, el),
+  maxInlineSize: (val, el) => transformSizeRatio("maxInlineSize", val, el),
   minSize: (val) => {
     if (!isString(val)) return;
     const [minInlineSize, minBlockSize] = val.split(" ");
@@ -74,9 +70,9 @@ const BLOCK_PROPS = {
       ...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),
+  borderWidth: (val, el) => transformSizeRatio("borderWidth", val, el),
+  padding: (val, el) => transformSizeRatio("padding", val, el),
+  scrollPadding: (val, el) => transformSizeRatio("scrollPadding", val, el),
   paddingInline: (val) => {
     if (!isString(val)) return;
     const [paddingInlineStart, paddingInlineEnd] = val.split(" ");
@@ -93,21 +89,15 @@ const BLOCK_PROPS = {
       ...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),
+  paddingTop: (val, el) => transformSizeRatio("paddingBlockStart", val, el),
+  paddingBottom: (val, el) => transformSizeRatio("paddingBlockEnd", val, el),
+  paddingLeft: (val, el) => transformSizeRatio("paddingInlineStart", val, el),
+  paddingRight: (val, el) => transformSizeRatio("paddingInlineEnd", val, el),
+  paddingBlockStart: (val, el) => transformSizeRatio("paddingBlockStart", val, el),
+  paddingBlockEnd: (val, el) => transformSizeRatio("paddingBlockEnd", val, el),
+  paddingInlineStart: (val, el) => transformSizeRatio("paddingInlineStart", val, el),
+  paddingInlineEnd: (val, el) => transformSizeRatio("paddingInlineEnd", val, el),
+  margin: (val, el) => transformSizeRatio("margin", val, el),
   marginInline: (val) => {
     if (!isString(val)) return;
     const [marginInlineStart, marginInlineEnd] = val.split(" ");
@@ -116,35 +106,33 @@ const BLOCK_PROPS = {
       ...transformSize("marginInlineEnd", marginInlineEnd || marginInlineStart)
     };
   },
-  marginBlock: (val, { props }) => {
-    if (!isString(props.marginBlock)) return;
-    const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(" ");
+  marginBlock: (val, el) => {
+    if (!isString(el.marginBlock)) return;
+    const [marginBlockStart, marginBlockEnd] = el.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),
+  marginTop: (val, el) => transformSizeRatio("marginBlockStart", val, el),
+  marginBottom: (val, el) => transformSizeRatio("marginBlockEnd", val, el),
+  marginLeft: (val, el) => transformSizeRatio("marginInlineStart", val, el),
+  marginRight: (val, el) => transformSizeRatio("marginInlineEnd", val, el),
+  marginInlineStart: (val, el) => transformSizeRatio("marginInlineStart", val, el),
+  marginInlineEnd: (val, el) => transformSizeRatio("marginInlineEnd", val, el),
+  marginBlockStart: (val, el) => transformSizeRatio("marginBlockStart", val, el),
+  marginBlockEnd: (val, el) => transformSizeRatio("marginBlockEnd", val, el),
   gap: (val) => ({
     gap: transfromGap(val)
   }),
-  columnGap: (val, { props }) => getSpacingBasedOnRatio(props, "columnGap", val),
-  rowGap: (val, { props }) => getSpacingBasedOnRatio(props, "rowGap", val),
-  flexWrap: (val, { props }) => ({
+  columnGap: (val, el) => getSpacingBasedOnRatio(el, "columnGap", val),
+  rowGap: (val, el) => getSpacingBasedOnRatio(el, "rowGap", val),
+  flexWrap: (val) => ({
     display: "flex",
-    flexFlow: (val || "row").split(" ")[0] + " " + props.flexWrap
+    flexWrap: val
   }),
-  flexFlow: (val, { props }) => {
-    const { reverse } = props;
+  flexFlow: (val, el) => {
+    const reverse = el.reverse;
     if (!isString(val)) return;
     let [direction, wrap] = (val || "row").split(" ");
     if (val.startsWith("x") || val === "row") direction = "row";
@@ -163,8 +151,8 @@ const BLOCK_PROPS = {
       justifyContent
     };
   },
-  round: (val, { props }) => transformBorderRadius(val || props.borderRadius, props, "round"),
-  borderRadius: (val, { props }) => transformBorderRadius(val || props.round, props, "borderRadius")
+  round: (val, el) => transformBorderRadius(val ?? el.borderRadius, el, "round"),
+  borderRadius: (val, el) => transformBorderRadius(val ?? el.round, el, "borderRadius")
 };
 export {
   BLOCK_PROPS

package/dist/esm/props/flex.js

@@ -1,8 +1,7 @@
-import { isString } from "@domql/utils";
+import { isString } from "@symbo.ls/utils";
 const FLEX_PROPS = {
   flow: (value, el) => {
-    const { props } = el;
-    const { reverse } = props;
+    const reverse = el.reverse;
     if (!isString(value)) return;
     let [direction, wrap] = (value || "row").split(" ");
     if (value.startsWith("x") || value === "row") direction = "row";
@@ -12,10 +11,10 @@ const FLEX_PROPS = {
       flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
     };
   },
-  wrap: (value, { props }) => {
+  wrap: (value, el) => {
     return { display: "flex", flexWrap: value };
   },
-  align: (value, { props }) => {
+  align: (value, el) => {
     const [alignItems, justifyContent] = value.split(" ");
     return { display: "flex", alignItems, justifyContent };
   }

package/dist/esm/props/index.js

@@ -1,27 +1,26 @@
-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";
-export * from "./block";
-export * from "./font";
-export * from "./misc";
-export * from "./position";
-export * from "./theme";
-export * from "./timing";
-export * from "./flex";
-export * from "./grid";
+import { ANIMATION_PROPS } from "./animation.js";
+import { BLOCK_PROPS } from "./block.js";
+import { FONT_PROPS } from "./font.js";
+import { MISC_PROPS } from "./misc.js";
+import { POSITION_PROPS } from "./position.js";
+import { THEME_PROPS } from "./theme.js";
+import { TIMING_PROPS } from "./timing.js";
+import { FLEX_PROPS } from "./flex.js";
+import { GRID_PROPS } from "./grid.js";
+export * from "./animation.js";
+export * from "./block.js";
+export * from "./font.js";
+export * from "./misc.js";
+export * from "./position.js";
+export * from "./theme.js";
+export * from "./timing.js";
+export * from "./flex.js";
+export * from "./grid.js";
 const CSS_PROPS_REGISTRY = {
   ...ANIMATION_PROPS,
   ...BLOCK_PROPS,
   ...FONT_PROPS,
   ...MISC_PROPS,
-  ...MISC_PROPS,
   ...POSITION_PROPS,
   ...THEME_PROPS,
   ...TIMING_PROPS,

package/dist/esm/props/misc.js

@@ -5,10 +5,17 @@ const MISC_PROPS = {
   }),
   cursor: (value, el, s, ctx) => {
     if (!value) return;
-    const file = ctx.files && ctx.files[value];
-    if (file && file.content) value = `url(${file.content.src})`;
+    const asset = ctx.assets && ctx.assets[value];
+    if (asset && asset.content) value = `url(${asset.content.src})`;
+    else {
+      const file = ctx.files && ctx.files[value];
+      if (file && file.content) value = `url(${file.content.src})`;
+    }
     return { cursor: value };
-  }
+  },
+  opacity: (value) => value != null ? { opacity: String(value) } : void 0,
+  visibility: (value) => value != null ? { visibility: value } : void 0,
+  pointerEvents: (value) => value != null ? { pointerEvents: value } : void 0
 };
 export {
   MISC_PROPS

package/dist/esm/props/theme.js

@@ -9,17 +9,16 @@ import {
   resolveColorsInGradient,
   transformSizeRatio
 } from "@symbo.ls/scratch";
-import { isDefined, isString } from "@domql/utils";
+import { isDefined, isString } from "@symbo.ls/utils";
 const getSystemGlobalTheme = ({ context, state }) => {
   const theme = state?.root?.globalTheme || context.designSystem?.globalTheme;
   return theme === "auto" ? null : theme;
 };
 const THEME_PROPS = {
   theme: (val, element) => {
-    const { props } = element;
     if (!val) return;
-    if (props.themeModifier) {
-      return getMediaTheme(val, `@${props.themeModifier}`);
+    if (element.themeModifier) {
+      return getMediaTheme(val, `@${element.themeModifier}`);
     }
     return getMediaTheme(val);
   },
@@ -50,8 +49,12 @@ const THEME_PROPS = {
   backgroundImage: (val, element, s, ctx) => {
     const globalTheme = getSystemGlobalTheme(element);
     if (!val) return;
-    const file = ctx.files && ctx.files[val];
-    if (file && file.content) val = file.content.src;
+    const asset = ctx.assets && ctx.assets[val];
+    if (asset && asset.content) val = asset.content.src;
+    else {
+      const file = ctx.files && ctx.files[val];
+      if (file && file.content) val = file.content.src;
+    }
     return {
       backgroundImage: transformBackgroundImage(val, globalTheme)
     };
@@ -62,7 +65,7 @@ const THEME_PROPS = {
   outline: (val) => ({
     outline: transformBorder(val)
   }),
-  outlineOffset: (val, { props }) => transformSizeRatio("outlineOffset", val, props),
+  outlineOffset: (val, el) => transformSizeRatio("outlineOffset", val, el),
   border: (val) => ({
     border: transformBorder(val)
   }),

package/dist/esm/set.js

@@ -1,9 +1,16 @@
-import { transformClassname } from "./_transform";
-import { transformEmotion } from "./emotion";
-const setClassname = (props, emotionCss) => {
+import { isObject } from "@symbo.ls/utils";
+import { useCssInProps } from "./transform/index.js";
+import { css } from "@symbo.ls/css";
+const transformClassname = (element) => {
+  if (!isObject(element)) return;
+  return useCssInProps(element, element);
+};
+const setClassname = (props, cssEngine) => {
   const transform = transformClassname(props);
-  return transformEmotion(transform, emotionCss);
+  if (typeof cssEngine === "function") return cssEngine(transform);
+  return css(transform);
 };
 export {
-  setClassname
+  setClassname,
+  transformClassname
 };