css-in-props 3.8.8 → 3.14.0

package/README.md

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

package/dist/cjs/index.js

@@ -15,7 +15,7 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);
-__reExport(index_exports, require("./transform"), module.exports);
-__reExport(index_exports, require("./emotion"), module.exports);
-__reExport(index_exports, require("./props"), module.exports);
-__reExport(index_exports, require("./props/defaults"), module.exports);
+__reExport(index_exports, require("./transform/index.js"), module.exports);
+__reExport(index_exports, require("./set.js"), module.exports);
+__reExport(index_exports, require("./props/index.js"), module.exports);
+__reExport(index_exports, require("./props/defaults.js"), module.exports);

package/dist/cjs/props/animation.js

@@ -21,24 +21,29 @@ __export(animation_exports, {
   ANIMATION_PROPS: () => ANIMATION_PROPS
 });
 module.exports = __toCommonJS(animation_exports);
-var import_utils = require("@domql/utils");
-var import_emotion = require("@symbo.ls/emotion");
+var import_utils = require("@symbo.ls/utils");
+var import_css = require("@symbo.ls/css");
 var import_scratch = require("@symbo.ls/scratch");
 const TIMING_FUNCTIONS = ["ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end"];
 const FILL_MODES = ["none", "forwards", "backwards", "both"];
 const DIRECTIONS = ["normal", "reverse", "alternate", "alternate-reverse"];
 const PLAY_STATES = ["running", "paused"];
 const isDuration = (v) => /^[\d.]+m?s$/.test(v);
+let _animCounter = 0;
 const applyAnimationProps = (animation, element) => {
-  const { emotion: ctxEmotion } = element.context;
-  const { keyframes } = ctxEmotion || import_emotion.emotion;
-  if ((0, import_utils.isObject)(animation)) return { animationName: keyframes(animation) };
-  const { ANIMATION } = element.context && element.context.designSystem;
-  const record = ANIMATION[animation];
-  return keyframes(record);
+  const { animation: ANIMATION } = element.context && element.context.designSystem || {};
+  if ((0, import_utils.isObject)(animation)) {
+    const name = `smbls-anim-${_animCounter++}`;
+    return { animationName: (0, import_css.keyframes)(name, animation) };
+  }
+  const record = ANIMATION && ANIMATION[animation];
+  if ((0, import_utils.isObject)(record)) {
+    return (0, import_css.keyframes)(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 = [];
@@ -74,24 +79,24 @@ const ANIMATION_PROPS = {
       const parsed = parseAnimationShorthand(val, el);
       return {
         animationName: applyAnimationProps(parsed.name || val, el),
-        animationDuration: parsed.durations[0] || (0, import_scratch.getTimingByKey)(el.props.animationDuration || "A").timing,
-        animationDelay: parsed.durations[1] || (0, import_scratch.getTimingByKey)(el.props.animationDelay || "0s").timing,
-        animationTimingFunction: parsed.timingFunction || (0, import_scratch.getTimingFunction)(el.props.animationTimingFunction || "ease"),
-        animationFillMode: parsed.fillMode || el.props.animationFillMode || "both",
-        animationIterationCount: parsed.iterationCount != null ? parsed.iterationCount : el.props.animationIterationCount || 1,
-        animationPlayState: parsed.playState || el.props.animationPlayState,
-        animationDirection: parsed.direction || el.props.animationDirection
+        animationDuration: parsed.durations[0] || (0, import_scratch.getTimingByKey)(el.animationDuration || "A").timing,
+        animationDelay: parsed.durations[1] || (0, import_scratch.getTimingByKey)(el.animationDelay || "0s").timing,
+        animationTimingFunction: parsed.timingFunction || (0, import_scratch.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: (0, import_scratch.getTimingByKey)(el.props.animationDuration || "A").timing,
-      animationDelay: (0, import_scratch.getTimingByKey)(el.props.animationDelay || "0s").timing,
-      animationTimingFunction: (0, import_scratch.getTimingFunction)(el.props.animationTimingFunction || "ease"),
-      animationFillMode: el.props.animationFillMode || "both",
-      animationIterationCount: el.props.animationIterationCount || 1,
-      animationPlayState: el.props.animationPlayState,
-      animationDirection: el.props.animationDirection
+      animationDuration: (0, import_scratch.getTimingByKey)(el.animationDuration || "A").timing,
+      animationDelay: (0, import_scratch.getTimingByKey)(el.animationDelay || "0s").timing,
+      animationTimingFunction: (0, import_scratch.getTimingFunction)(el.animationTimingFunction || "ease"),
+      animationFillMode: el.animationFillMode || "both",
+      animationIterationCount: el.animationIterationCount || 1,
+      animationPlayState: el.animationPlayState,
+      animationDirection: el.animationDirection
     };
   },
   animationName: (val, el) => ({

package/dist/cjs/props/block.js

@@ -21,17 +21,13 @@ __export(block_exports, {
   BLOCK_PROPS: () => BLOCK_PROPS
 });
 module.exports = __toCommonJS(block_exports);
-var import_utils = require("@domql/utils");
+var import_utils = require("@symbo.ls/utils");
 var import_scratch = require("@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 }) => (0, import_scratch.transformSizeRatio)("height", val, props),
-  width: (val, { props }) => (0, import_scratch.transformSizeRatio)("width", val, props),
+  show: (val) => !val ? { display: "none !important" } : void 0,
+  hide: (val) => val ? { display: "none !important" } : void 0,
+  height: (val, el) => (0, import_scratch.transformSizeRatio)("height", val, el),
+  width: (val, el) => (0, import_scratch.transformSizeRatio)("width", val, el),
   boxSizing: (val) => !(0, import_utils.isUndefined)(val) ? { boxSizing: val } : { boxSizing: "border-box" },
   boxSize: (val) => {
     if (!(0, import_utils.isString)(val)) return;
@@ -41,10 +37,10 @@ const BLOCK_PROPS = {
       ...(0, import_scratch.transformSize)("width", width || height)
     };
   },
-  inlineSize: (val, { props }) => (0, import_scratch.transformSizeRatio)("inlineSize", val, props),
-  blockSize: (val, { props }) => (0, import_scratch.transformSizeRatio)("blockSize", val, props),
-  minWidth: (val, { props }) => (0, import_scratch.transformSizeRatio)("minWidth", val, props),
-  maxWidth: (val, { props }) => (0, import_scratch.transformSizeRatio)("maxWidth", val, props),
+  inlineSize: (val, el) => (0, import_scratch.transformSizeRatio)("inlineSize", val, el),
+  blockSize: (val, el) => (0, import_scratch.transformSizeRatio)("blockSize", val, el),
+  minWidth: (val, el) => (0, import_scratch.transformSizeRatio)("minWidth", val, el),
+  maxWidth: (val, el) => (0, import_scratch.transformSizeRatio)("maxWidth", val, el),
   widthRange: (val) => {
     if (!(0, import_utils.isString)(val)) return;
     const [minWidth, maxWidth] = val.split(" ");
@@ -53,8 +49,8 @@ const BLOCK_PROPS = {
       ...(0, import_scratch.transformSize)("maxWidth", maxWidth || minWidth)
     };
   },
-  minHeight: (val, { props }) => (0, import_scratch.transformSizeRatio)("minHeight", val, props),
-  maxHeight: (val, { props }) => (0, import_scratch.transformSizeRatio)("maxHeight", val, props),
+  minHeight: (val, el) => (0, import_scratch.transformSizeRatio)("minHeight", val, el),
+  maxHeight: (val, el) => (0, import_scratch.transformSizeRatio)("maxHeight", val, el),
   heightRange: (val) => {
     if (!(0, import_utils.isString)(val)) return;
     const [minHeight, maxHeight] = val.split(" ");
@@ -71,10 +67,10 @@ const BLOCK_PROPS = {
       ...(0, import_scratch.transformSizeRatio)("blockSize", blockSize || inlineSize)
     };
   },
-  minBlockSize: (val, { props }) => (0, import_scratch.transformSizeRatio)("minBlockSize", val, props),
-  minInlineSize: (val, { props }) => (0, import_scratch.transformSizeRatio)("minInlineSize", val, props),
-  maxBlockSize: (val, { props }) => (0, import_scratch.transformSizeRatio)("maxBlockSize", val, props),
-  maxInlineSize: (val, { props }) => (0, import_scratch.transformSizeRatio)("maxInlineSize", val, props),
+  minBlockSize: (val, el) => (0, import_scratch.transformSizeRatio)("minBlockSize", val, el),
+  minInlineSize: (val, el) => (0, import_scratch.transformSizeRatio)("minInlineSize", val, el),
+  maxBlockSize: (val, el) => (0, import_scratch.transformSizeRatio)("maxBlockSize", val, el),
+  maxInlineSize: (val, el) => (0, import_scratch.transformSizeRatio)("maxInlineSize", val, el),
   minSize: (val) => {
     if (!(0, import_utils.isString)(val)) return;
     const [minInlineSize, minBlockSize] = val.split(" ");
@@ -91,9 +87,9 @@ const BLOCK_PROPS = {
       ...(0, import_scratch.transformSize)("maxBlockSize", maxBlockSize || maxInlineSize)
     };
   },
-  borderWidth: (val, { props }) => (0, import_scratch.transformSizeRatio)("borderWidth", val, props),
-  padding: (val, { props }) => (0, import_scratch.transformSizeRatio)("padding", val, props),
-  scrollPadding: (val, { props }) => (0, import_scratch.transformSizeRatio)("scrollPadding", val, props),
+  borderWidth: (val, el) => (0, import_scratch.transformSizeRatio)("borderWidth", val, el),
+  padding: (val, el) => (0, import_scratch.transformSizeRatio)("padding", val, el),
+  scrollPadding: (val, el) => (0, import_scratch.transformSizeRatio)("scrollPadding", val, el),
   paddingInline: (val) => {
     if (!(0, import_utils.isString)(val)) return;
     const [paddingInlineStart, paddingInlineEnd] = val.split(" ");
@@ -110,21 +106,15 @@ const BLOCK_PROPS = {
       ...(0, import_scratch.transformSize)("paddingBlockEnd", paddingBlockEnd || paddingBlockStart)
     };
   },
-  // Traditional directional padding
-  paddingTop: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingBlockStart", val, props),
-  paddingBottom: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingBlockEnd", val, props),
-  paddingLeft: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingInlineStart", val, props),
-  paddingRight: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingInlineEnd", val, props),
-  // Logical properties (for reference)
-  paddingBlockStart: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingBlockStart", val, props),
-  // maps to top
-  paddingBlockEnd: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingBlockEnd", val, props),
-  // maps to bottom
-  paddingInlineStart: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingInlineStart", val, props),
-  // maps to left
-  paddingInlineEnd: (val, { props }) => (0, import_scratch.transformSizeRatio)("paddingInlineEnd", val, props),
-  // maps to right
-  margin: (val, { props }) => (0, import_scratch.transformSizeRatio)("margin", val, props),
+  paddingTop: (val, el) => (0, import_scratch.transformSizeRatio)("paddingBlockStart", val, el),
+  paddingBottom: (val, el) => (0, import_scratch.transformSizeRatio)("paddingBlockEnd", val, el),
+  paddingLeft: (val, el) => (0, import_scratch.transformSizeRatio)("paddingInlineStart", val, el),
+  paddingRight: (val, el) => (0, import_scratch.transformSizeRatio)("paddingInlineEnd", val, el),
+  paddingBlockStart: (val, el) => (0, import_scratch.transformSizeRatio)("paddingBlockStart", val, el),
+  paddingBlockEnd: (val, el) => (0, import_scratch.transformSizeRatio)("paddingBlockEnd", val, el),
+  paddingInlineStart: (val, el) => (0, import_scratch.transformSizeRatio)("paddingInlineStart", val, el),
+  paddingInlineEnd: (val, el) => (0, import_scratch.transformSizeRatio)("paddingInlineEnd", val, el),
+  margin: (val, el) => (0, import_scratch.transformSizeRatio)("margin", val, el),
   marginInline: (val) => {
     if (!(0, import_utils.isString)(val)) return;
     const [marginInlineStart, marginInlineEnd] = val.split(" ");
@@ -133,35 +123,33 @@ const BLOCK_PROPS = {
       ...(0, import_scratch.transformSize)("marginInlineEnd", marginInlineEnd || marginInlineStart)
     };
   },
-  marginBlock: (val, { props }) => {
-    if (!(0, import_utils.isString)(props.marginBlock)) return;
-    const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(" ");
+  marginBlock: (val, el) => {
+    if (!(0, import_utils.isString)(el.marginBlock)) return;
+    const [marginBlockStart, marginBlockEnd] = el.marginBlock.split(" ");
     return {
       ...(0, import_scratch.transformSize)("marginBlockStart", marginBlockStart),
       ...(0, import_scratch.transformSize)("marginBlockEnd", marginBlockEnd || marginBlockStart)
     };
   },
-  // Traditional directional margin
-  marginTop: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginBlockStart", val, props),
-  marginBottom: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginBlockEnd", val, props),
-  marginLeft: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginInlineStart", val, props),
-  marginRight: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginInlineEnd", val, props),
-  // Logical properties
-  marginInlineStart: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginInlineStart", val, props),
-  marginInlineEnd: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginInlineEnd", val, props),
-  marginBlockStart: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginBlockStart", val, props),
-  marginBlockEnd: (val, { props }) => (0, import_scratch.transformSizeRatio)("marginBlockEnd", val, props),
+  marginTop: (val, el) => (0, import_scratch.transformSizeRatio)("marginBlockStart", val, el),
+  marginBottom: (val, el) => (0, import_scratch.transformSizeRatio)("marginBlockEnd", val, el),
+  marginLeft: (val, el) => (0, import_scratch.transformSizeRatio)("marginInlineStart", val, el),
+  marginRight: (val, el) => (0, import_scratch.transformSizeRatio)("marginInlineEnd", val, el),
+  marginInlineStart: (val, el) => (0, import_scratch.transformSizeRatio)("marginInlineStart", val, el),
+  marginInlineEnd: (val, el) => (0, import_scratch.transformSizeRatio)("marginInlineEnd", val, el),
+  marginBlockStart: (val, el) => (0, import_scratch.transformSizeRatio)("marginBlockStart", val, el),
+  marginBlockEnd: (val, el) => (0, import_scratch.transformSizeRatio)("marginBlockEnd", val, el),
   gap: (val) => ({
     gap: (0, import_scratch.transfromGap)(val)
   }),
-  columnGap: (val, { props }) => (0, import_scratch.getSpacingBasedOnRatio)(props, "columnGap", val),
-  rowGap: (val, { props }) => (0, import_scratch.getSpacingBasedOnRatio)(props, "rowGap", val),
-  flexWrap: (val, { props }) => ({
+  columnGap: (val, el) => (0, import_scratch.getSpacingBasedOnRatio)(el, "columnGap", val),
+  rowGap: (val, el) => (0, import_scratch.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 (!(0, import_utils.isString)(val)) return;
     let [direction, wrap] = (val || "row").split(" ");
     if (val.startsWith("x") || val === "row") direction = "row";
@@ -180,6 +168,6 @@ const BLOCK_PROPS = {
       justifyContent
     };
   },
-  round: (val, { props }) => (0, import_scratch.transformBorderRadius)(val || props.borderRadius, props, "round"),
-  borderRadius: (val, { props }) => (0, import_scratch.transformBorderRadius)(val || props.round, props, "borderRadius")
+  round: (val, el) => (0, import_scratch.transformBorderRadius)(val ?? el.borderRadius, el, "round"),
+  borderRadius: (val, el) => (0, import_scratch.transformBorderRadius)(val ?? el.round, el, "borderRadius")
 };

package/dist/cjs/props/flex.js

@@ -21,11 +21,10 @@ __export(flex_exports, {
   FLEX_PROPS: () => FLEX_PROPS
 });
 module.exports = __toCommonJS(flex_exports);
-var import_utils = require("@domql/utils");
+var import_utils = require("@symbo.ls/utils");
 const FLEX_PROPS = {
   flow: (value, el) => {
-    const { props } = el;
-    const { reverse } = props;
+    const reverse = el.reverse;
     if (!(0, import_utils.isString)(value)) return;
     let [direction, wrap] = (value || "row").split(" ");
     if (value.startsWith("x") || value === "row") direction = "row";
@@ -35,10 +34,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/cjs/props/index.js

@@ -23,30 +23,29 @@ __export(props_exports, {
   default: () => props_default
 });
 module.exports = __toCommonJS(props_exports);
-var import_animation = require("./animation");
-var import_block = require("./block");
-var import_font = require("./font");
-var import_misc = require("./misc");
-var import_position = require("./position");
-var import_theme = require("./theme");
-var import_timing = require("./timing");
-var import_flex = require("./flex");
-var import_grid = require("./grid");
-__reExport(props_exports, require("./animation"), module.exports);
-__reExport(props_exports, require("./block"), module.exports);
-__reExport(props_exports, require("./font"), module.exports);
-__reExport(props_exports, require("./misc"), module.exports);
-__reExport(props_exports, require("./position"), module.exports);
-__reExport(props_exports, require("./theme"), module.exports);
-__reExport(props_exports, require("./timing"), module.exports);
-__reExport(props_exports, require("./flex"), module.exports);
-__reExport(props_exports, require("./grid"), module.exports);
+var import_animation = require("./animation.js");
+var import_block = require("./block.js");
+var import_font = require("./font.js");
+var import_misc = require("./misc.js");
+var import_position = require("./position.js");
+var import_theme = require("./theme.js");
+var import_timing = require("./timing.js");
+var import_flex = require("./flex.js");
+var import_grid = require("./grid.js");
+__reExport(props_exports, require("./animation.js"), module.exports);
+__reExport(props_exports, require("./block.js"), module.exports);
+__reExport(props_exports, require("./font.js"), module.exports);
+__reExport(props_exports, require("./misc.js"), module.exports);
+__reExport(props_exports, require("./position.js"), module.exports);
+__reExport(props_exports, require("./theme.js"), module.exports);
+__reExport(props_exports, require("./timing.js"), module.exports);
+__reExport(props_exports, require("./flex.js"), module.exports);
+__reExport(props_exports, require("./grid.js"), 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,

package/dist/cjs/props/misc.js

@@ -28,8 +28,15 @@ 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
 };

package/dist/cjs/props/theme.js

@@ -23,17 +23,16 @@ __export(theme_exports, {
 });
 module.exports = __toCommonJS(theme_exports);
 var import_scratch = require("@symbo.ls/scratch");
-var import_utils = require("@domql/utils");
+var import_utils = require("@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 (0, import_scratch.getMediaTheme)(val, `@${props.themeModifier}`);
+    if (element.themeModifier) {
+      return (0, import_scratch.getMediaTheme)(val, `@${element.themeModifier}`);
     }
     return (0, import_scratch.getMediaTheme)(val);
   },
@@ -64,8 +63,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: (0, import_scratch.transformBackgroundImage)(val, globalTheme)
     };
@@ -76,7 +79,7 @@ const THEME_PROPS = {
   outline: (val) => ({
     outline: (0, import_scratch.transformBorder)(val)
   }),
-  outlineOffset: (val, { props }) => (0, import_scratch.transformSizeRatio)("outlineOffset", val, props),
+  outlineOffset: (val, el) => (0, import_scratch.transformSizeRatio)("outlineOffset", val, el),
   border: (val) => ({
     border: (0, import_scratch.transformBorder)(val)
   }),

package/dist/cjs/set.js

@@ -18,12 +18,19 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var set_exports = {};
 __export(set_exports, {
-  setClassname: () => setClassname
+  setClassname: () => setClassname,
+  transformClassname: () => transformClassname
 });
 module.exports = __toCommonJS(set_exports);
-var import_transform = require("./_transform");
-var import_emotion = require("./emotion");
-const setClassname = (props, emotionCss) => {
-  const transform = (0, import_transform.transformClassname)(props);
-  return (0, import_emotion.transformEmotion)(transform, emotionCss);
+var import_utils = require("@symbo.ls/utils");
+var import_transform = require("./transform/index.js");
+var import_css = require("@symbo.ls/css");
+const transformClassname = (element) => {
+  if (!(0, import_utils.isObject)(element)) return;
+  return (0, import_transform.useCssInProps)(element, element);
+};
+const setClassname = (props, cssEngine) => {
+  const transform = transformClassname(props);
+  if (typeof cssEngine === "function") return cssEngine(transform);
+  return (0, import_css.css)(transform);
 };

package/dist/cjs/transform/executors.js

@@ -24,59 +24,66 @@ __export(executors_exports, {
   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");
+var import_utils = require("@symbo.ls/utils");
+var import_scratch = require("@symbo.ls/scratch");
+var import_props = require("../props/index.js");
+var import_defaults = require("../props/defaults.js");
+var import_transformers = require("./transformers.js");
 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), {});
+  const ds = element?.context?.designSystem;
+  if (ds) (0, import_scratch.pushConfig)(ds);
+  try {
+    let obj = {};
+    const rest = {};
+    const setToObj = (key, val) => {
+      if (opts.unpack) {
+        obj = { ...obj, ...val };
+        return;
       }
-      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})`;
+      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;
       }
-      setToObj(key, { [key]: result });
-      if (!isProd && (0, import_utils.isObject)(obj[key])) obj[key].label = key;
-    } else {
-      rest[key] = value;
     }
+    return [obj, rest];
+  } finally {
+    if (ds) (0, import_scratch.popConfig)();
   }
-  return [obj, rest];
 };
 const useSelectorsAsCSS = (sourceObj, element) => {
   const obj = {};

package/dist/cjs/transform/index.js

@@ -15,5 +15,5 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 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);
+__reExport(transform_exports, require("./executors.js"), module.exports);
+__reExport(transform_exports, require("./transformers.js"), module.exports);