css-in-props 3.14.0 → 3.14.1

package/dist/cjs/props/theme.js

@@ -23,125 +23,125 @@ __export(theme_exports, {
 });
 module.exports = __toCommonJS(theme_exports);
 var import_scratch = require("@symbo.ls/scratch");
-var import_utils = require("@symbo.ls/utils");
+var import_utils = require("@domql/utils");
 const getSystemGlobalTheme = ({ context, state }) => {
-  const theme = state?.root?.globalTheme || context.designSystem?.globalTheme;
-  return theme === "auto" ? null : theme;
+  const rootState = state && state.root;
+  return rootState && rootState.globalTheme ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme;
 };
 const THEME_PROPS = {
-  theme: (val, element) => {
-    if (!val) return;
-    if (element.themeModifier) {
-      return (0, import_scratch.getMediaTheme)(val, `@${element.themeModifier}`);
-    }
-    return (0, import_scratch.getMediaTheme)(val);
+  theme: (element) => {
+    const { props } = element;
+    const globalTheme = getSystemGlobalTheme(element);
+    if (!props.theme) return;
+    const hasSubtheme = props.theme.includes(" ") && !props.theme.includes("@");
+    const globalThemeForced = `@${props.themeModifier || globalTheme}`;
+    if (hasSubtheme) {
+      const themeAppliedInVal = props.theme.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}`);
   },
-  color: (val, element) => {
+  color: (element) => {
+    const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
+    if (!props.color) return;
     return {
-      color: (0, import_scratch.getMediaColor)(val, globalTheme)
+      color: (0, import_scratch.getMediaColor)(props.color, globalTheme)
     };
   },
-  background: (val, element) => {
+  background: (element) => {
+    const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    if ((0, import_utils.isString)(val) && val.includes("gradient")) {
-      return { background: (0, import_scratch.resolveColorsInGradient)(val, globalTheme) };
-    }
+    if (!props.background) return;
     return {
-      background: (0, import_scratch.getMediaColor)(val, globalTheme)
+      background: (0, import_scratch.getMediaColor)(props.background, globalTheme)
     };
   },
-  backgroundColor: (val, element) => {
+  backgroundColor: (element) => {
+    const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
+    if (!props.backgroundColor) return;
     return {
-      backgroundColor: (0, import_scratch.getMediaColor)(val, globalTheme)
+      backgroundColor: (0, import_scratch.getMediaColor)(props.backgroundColor, globalTheme)
     };
   },
-  backgroundImage: (val, element, s, ctx) => {
+  backgroundImage: (element, s, ctx) => {
+    const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
+    let val = props.backgroundImage;
     if (!val) return;
-    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;
-    }
+    const file = ctx.files && ctx.files[val];
+    if (file && file.content) val = file.content.src;
     return {
       backgroundImage: (0, import_scratch.transformBackgroundImage)(val, globalTheme)
     };
   },
-  textStroke: (val) => ({
-    WebkitTextStroke: (0, import_scratch.transformTextStroke)(val)
+  backgroundSize: ({ props }) => ({
+    backgroundSize: props.backgroundSize
   }),
-  outline: (val) => ({
-    outline: (0, import_scratch.transformBorder)(val)
+  backgroundPosition: ({ props }) => ({
+    backgroundPosition: props.backgroundPosition
   }),
-  outlineOffset: (val, el) => (0, import_scratch.transformSizeRatio)("outlineOffset", val, el),
-  border: (val) => ({
-    border: (0, import_scratch.transformBorder)(val)
+  backgroundRepeat: ({ props }) => ({
+    backgroundRepeat: props.backgroundRepeat
   }),
-  borderColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      borderColor: (0, import_scratch.getMediaColor)(val, globalTheme)
-    };
-  },
-  borderTopColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderTopColor: (0, import_scratch.getMediaColor)(val, globalTheme) };
+  textStroke: ({ props }) => ({
+    WebkitTextStroke: (0, import_scratch.transformTextStroke)(props.textStroke)
+  }),
+  outline: ({ props }) => (0, import_utils.isDefined)(props.outline) && {
+    outline: (0, import_scratch.transformBorder)(props.outline)
   },
-  borderBottomColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderBottomColor: (0, import_scratch.getMediaColor)(val, globalTheme) };
+  outlineOffset: ({ props }) => (0, import_scratch.transformSizeRatio)("outlineOffset", props),
+  border: ({ props }) => (0, import_utils.isDefined)(props.border) && {
+    border: (0, import_scratch.transformBorder)(props.border)
   },
-  borderLeftColor: (val, element) => {
+  borderColor: (element) => {
+    const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderLeftColor: (0, import_scratch.getMediaColor)(val, globalTheme) };
-  },
-  borderRightColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderRightColor: (0, import_scratch.getMediaColor)(val, globalTheme) };
+    if (!props.borderColor) return;
+    return {
+      borderColor: (0, import_scratch.getMediaColor)(props.borderColor, globalTheme)
+    };
   },
-  borderLeft: (val) => ({
-    borderLeft: (0, import_scratch.transformBorder)(val)
+  borderLeft: ({ props }) => ({
+    borderLeft: (0, import_scratch.transformBorder)(props.borderLeft)
   }),
-  borderTop: (val) => ({
-    borderTop: (0, import_scratch.transformBorder)(val)
+  borderTop: ({ props }) => ({
+    borderTop: (0, import_scratch.transformBorder)(props.borderTop)
   }),
-  borderRight: (val) => ({
-    borderRight: (0, import_scratch.transformBorder)(val)
+  borderRight: ({ props }) => ({
+    borderRight: (0, import_scratch.transformBorder)(props.borderRight)
   }),
-  borderBottom: (val) => ({
-    borderBottom: (0, import_scratch.transformBorder)(val)
+  borderBottom: ({ props }) => ({
+    borderBottom: (0, import_scratch.transformBorder)(props.borderBottom)
   }),
-  shadow: (val, element) => {
+  shadow: (element) => {
+    const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
+    if (!props.backgroundImage) return;
     return {
-      boxShadow: (0, import_scratch.transformShadow)(val, globalTheme)
+      boxShadow: (0, import_scratch.transformShadow)(props.shadow, globalTheme)
     };
   },
-  boxShadow: (val, element) => {
-    if (!(0, import_utils.isString)(val)) return;
-    const [value, hasImportant] = val.split("!importan");
+  boxShadow: (element, state, context) => {
+    const { props } = element;
+    if (!(0, import_utils.isString)(props.boxShadow)) return;
+    const [val, hasImportant] = props.boxShadow.split("!importan");
     const globalTheme = getSystemGlobalTheme(element);
     const important = hasImportant ? " !important" : "";
     return {
-      boxShadow: (0, import_scratch.transformBoxShadow)(value.trim(), globalTheme) + important
+      boxShadow: (0, import_scratch.transformBoxShadow)(val.trim(), globalTheme) + important
     };
   },
-  textShadow: (val, { context }) => ({
-    textShadow: (0, import_scratch.transformBoxShadow)(val, context.designSystem.globalTheme)
+  textShadow: ({ props, context }) => ({
+    textShadow: (0, import_scratch.transformBoxShadow)(
+      props.textShadow,
+      context.designSystem.globalTheme
+    )
   }),
-  columnRule: (val) => ({
-    columnRule: (0, import_scratch.transformBorder)(val)
+  columnRule: ({ props }) => ({
+    columnRule: (0, import_scratch.transformBorder)(props.columnRule)
   })
 };

package/dist/cjs/props/timing.js

@@ -23,20 +23,20 @@ __export(timing_exports, {
 module.exports = __toCommonJS(timing_exports);
 var import_scratch = require("@symbo.ls/scratch");
 const TIMING_PROPS = {
-  transition: (val) => ({
-    transition: (0, import_scratch.splitTransition)(val)
+  transition: ({ props }) => ({
+    transition: (0, import_scratch.splitTransition)(props.transition)
   }),
-  transitionDuration: (val) => ({
-    transitionDuration: (0, import_scratch.transformDuration)(val)
+  transitionDuration: ({ props }) => ({
+    transitionDuration: (0, import_scratch.transformDuration)(props.transitionDuration)
   }),
-  transitionDelay: (val) => ({
-    transitionDelay: (0, import_scratch.transformDuration)(val)
+  transitionDelay: ({ props }) => ({
+    transitionDelay: (0, import_scratch.transformDuration)(props.transitionDelay)
   }),
-  transitionTimingFunction: (val) => ({
-    transitionTimingFunction: (0, import_scratch.getTimingFunction)(val)
+  transitionTimingFunction: ({ props }) => ({
+    transitionTimingFunction: (0, import_scratch.getTimingFunction)(props.transitionTimingFunction)
   }),
-  transitionProperty: (val) => ({
-    transitionProperty: val,
-    willChange: val
+  transitionProperty: ({ props }) => ({
+    transitionProperty: props.transitionProperty,
+    willChange: props.transitionProperty
   })
 };

package/dist/cjs/registry.js

@@ -0,0 +1,39 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var registry_exports = {};
+__export(registry_exports, {
+  CSS_PREPROCS_DEFAULTS: () => CSS_PREPROCS_DEFAULTS,
+  CSS_PROPS_REGISTRY: () => CSS_PROPS_REGISTRY
+});
+module.exports = __toCommonJS(registry_exports);
+var import_utils = require("@domql/utils");
+var preprocs = __toESM(require("./props"), 1);
+var import_atoms = require("@symbo.ls/atoms");
+const CSS_PROPS_REGISTRY = (0, import_utils.mergeArray)([import_atoms.Text]).class;
+const CSS_PREPROCS_DEFAULTS = (0, import_utils.mergeArray)(Object.values(preprocs));

package/dist/cjs/set.js

@@ -18,19 +18,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var set_exports = {};
 __export(set_exports, {
-  setClassname: () => setClassname,
-  transformClassname: () => transformClassname
+  setClassname: () => setClassname
 });
 module.exports = __toCommonJS(set_exports);
-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);
+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);
 };

package/dist/cjs/transform.js

@@ -0,0 +1,80 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var transform_exports = {};
+__export(transform_exports, {
+  extractCSSfromProps: () => extractCSSfromProps,
+  transformClassname: () => transformClassname
+});
+module.exports = __toCommonJS(transform_exports);
+var import_utils = require("@domql/utils");
+var import_atoms = require("@symbo.ls/atoms");
+var import_registry = require("./registry");
+var import_defaults = require("./defaults");
+const transformClassname = (element, restProps = {}) => {
+  const classCss = {};
+  const { props, class: elementClass } = element;
+  if (!(0, import_utils.isObject)(props)) return;
+  for (const key in props) {
+    const setter = import_atoms.keySetters[key.slice(0, 1)];
+    const hasCSS = elementClass[key];
+    if (setter) setter(key, props[key], classCss, element, true);
+    else if ((0, import_utils.isFunction)(hasCSS)) {
+      const stack = hasCSS(element, element.state, element.context);
+      const exec = (0, import_utils.isArray)(stack) ? stack.reduce((a, c) => {
+        return (0, import_utils.merge)(a, c);
+      }, {}) : stack;
+      (0, import_utils.deepMerge)(classCss, exec);
+    } else if (key === "style") {
+      (0, import_utils.deepMerge)(classCss, props[key]);
+    } else restProps[key] = props[key];
+  }
+  return classCss;
+};
+const extractCSSfromProps = (element) => {
+  const { props: defProps } = element;
+  const css = {};
+  const props = {};
+  for (const key in defProps) {
+    const val = defProps[key];
+    const mediaProp = import_atoms.keySetters[key.slice(0, 1)];
+    if (mediaProp) {
+      mediaProp(key, defProps[key], css, element, true);
+      continue;
+    }
+    const preprop = import_registry.CSS_PREPROCS_DEFAULTS[key];
+    if (preprop) {
+      const stack = preprop(element, element.state, element.context);
+      const exec = (0, import_utils.isArray)(stack) ? stack.reduce((a, c) => {
+        return (0, import_utils.merge)(a, c);
+      }, {}) : stack;
+      (0, import_utils.deepMerge)(css, exec);
+      continue;
+    }
+    if (key === "style") {
+      (0, import_utils.deepMerge)(css, defProps[key]);
+      continue;
+    }
+    if (import_defaults.DEFAULT_CSS_PROPERTIES_LIST.includes(key)) {
+      css[key] = val;
+      continue;
+    }
+    props[key] = val;
+  }
+  return { css, props };
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "css-in-props",
   "description": "Utilize props as CSS methods",
   "author": "symbo.ls",
-  "version": "3.14.0",
+  "version": "3.14.1",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
   "module": "./index.js",

package/dist/cjs/props/flex.js

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

package/dist/cjs/props/grid.js

@@ -1,39 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var grid_exports = {};
-__export(grid_exports, {
-  GRID_PROPS: () => GRID_PROPS
-});
-module.exports = __toCommonJS(grid_exports);
-const GRID_PROPS = {
-  area: (value) => ({ gridArea: value }),
-  template: (value) => ({ gridTemplate: value }),
-  templateAreas: (value) => ({ gridTemplateAreas: value }),
-  column: (value) => ({ gridColumn: value }),
-  columns: (value) => ({ gridTemplateColumns: value }),
-  templateColumns: (value) => ({ gridTemplateColumns: value }),
-  autoColumns: (value) => ({ gridAutoColumns: value }),
-  columnStart: (value) => ({ gridColumnStart: value }),
-  row: (value) => ({ gridRow: value }),
-  rows: (value) => ({ gridTemplateRows: value }),
-  templateRows: (value) => ({ gridTemplateRows: value }),
-  autoRows: (value) => ({ gridAutoRows: value }),
-  rowStart: (value) => ({ gridRowStart: value }),
-  autoFlow: (value) => ({ gridAutoFlow: value })
-};

package/dist/cjs/transform/executors.js

@@ -1,131 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var executors_exports = {};
-__export(executors_exports, {
-  exetuteClassPerComponent: () => exetuteClassPerComponent,
-  useCssInProps: () => useCssInProps,
-  usePropsAsCSS: () => usePropsAsCSS,
-  useSelectorsAsCSS: () => useSelectorsAsCSS
-});
-module.exports = __toCommonJS(executors_exports);
-var import_utils = require("@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) => {
-  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;
-      }
-      obj[key] = val;
-    };
-    for (const key in sourceObj) {
-      const value = sourceObj[key];
-      if (key === "class" && element.call("isString", sourceObj.class)) {
-        const val = value.split(" ");
-        if (val.length) {
-          const CLASS = element.context.designSystem.class;
-          const result = val.reduce((acc, curr) => (0, import_utils.merge)(acc, CLASS[curr]), {});
-          obj.designSystemClass = result;
-        }
-      } else if (key === "true") {
-        const val = (0, import_utils.exec)(value, element);
-        (0, import_utils.merge)(obj, (0, import_transformers.applyTrueProps)(val, element));
-      } else if (element.classlist[key]) {
-        const originalFromClass = element.classlist[key];
-        const result = (0, import_utils.isFunction)(originalFromClass) ? originalFromClass(element, element.state, element.context) : originalFromClass;
-        if (result) setToObj(key, result);
-        if (!isProd && (0, import_utils.isObject)(obj[key])) obj[key].label = key;
-      } else if (import_props.CSS_PROPS_REGISTRY[key]) {
-        let val = (0, import_utils.exec)(value, element);
-        if ((0, import_utils.isArray)(val)) {
-          val = val.reduce((a, c) => (0, import_utils.merge)(a, c), {});
-        }
-        let result = import_props.CSS_PROPS_REGISTRY[key](val, element, element.state, element.context);
-        if ((0, import_utils.isArray)(result)) result = result.reduce((a, c) => (0, import_utils.merge)(a, c), {});
-        if (result) setToObj(key, result);
-        if (!isProd && (0, import_utils.isObject)(obj[key])) obj[key].label = key;
-      } else if (import_defaults.DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
-        let result = (0, import_utils.exec)(value, element);
-        if (typeof result === "string" && result.charCodeAt(0) === 45 && result.charCodeAt(1) === 45) {
-          result = `var(${result})`;
-        }
-        setToObj(key, { [key]: result });
-        if (!isProd && (0, import_utils.isObject)(obj[key])) obj[key].label = key;
-      } else {
-        rest[key] = value;
-      }
-    }
-    return [obj, rest];
-  } finally {
-    if (ds) (0, import_scratch.popConfig)();
-  }
-};
-const useSelectorsAsCSS = (sourceObj, element) => {
-  const obj = {};
-  for (const key in sourceObj) {
-    const selectroSetter = import_transformers.transformersByPrefix[key.slice(0, 1)];
-    if (selectroSetter) {
-      const result = selectroSetter(key, sourceObj[key], element);
-      if (result) {
-        for (const k in result) {
-          if (Object.prototype.hasOwnProperty.call(result, k)) {
-            if (obj[k] && typeof obj[k] === "object" && typeof result[k] === "object") {
-              (0, import_utils.overwriteDeep)(obj[k], result[k]);
-            } else {
-              obj[k] = result[k];
-            }
-          }
-        }
-      }
-    }
-  }
-  return obj;
-};
-const useCssInProps = (selectorProps, element, opts = { unpack: true }) => {
-  const [cssObj, restProps] = usePropsAsCSS(selectorProps, element, opts);
-  const selectorsObj = useSelectorsAsCSS(restProps, element);
-  let hasSelectors = false;
-  for (const _k in selectorsObj) {
-    hasSelectors = true;
-    break;
-  }
-  if (hasSelectors) {
-    if (opts.unpack) return (0, import_utils.overwrite)(cssObj, selectorsObj);
-    cssObj._selectors = selectorsObj;
-  }
-  return cssObj;
-};
-const exetuteClassPerComponent = (component, element) => {
-  const classObj = {};
-  if (component.class) {
-    for (const classProp in component.class) {
-      classObj[classProp] = component.class[classProp](element);
-    }
-  }
-  return classObj;
-};