css-in-props 3.14.0 → 3.14.3

package/dist/esm/props/misc.js

@@ -1,22 +0,0 @@
-const MISC_PROPS = {
-  overflow: (value) => ({
-    overflow: value,
-    scrollBehavior: "smooth"
-  }),
-  cursor: (value, el, s, ctx) => {
-    if (!value) return;
-    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/position.js

@@ -1,31 +0,0 @@
-import { getSpacingByKey } from "@symbo.ls/scratch";
-const POSITION_PROPS = {
-  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: (val) => getSpacingByKey(val, "left"),
-  top: (val) => getSpacingByKey(val, "top"),
-  right: (val) => getSpacingByKey(val, "right"),
-  bottom: (val) => getSpacingByKey(val, "bottom"),
-  verticalInset: (val) => {
-    if (typeof val !== "string") return;
-    const vi = val.split(" ").map((v) => getSpacingByKey(v, "k").k);
-    return {
-      top: vi[0],
-      bottom: vi[1] || vi[0]
-    };
-  },
-  horizontalInset: (val) => {
-    if (typeof val !== "string") return;
-    const vi = val.split(" ").map((v) => getSpacingByKey(v, "k").k);
-    return {
-      left: vi[0],
-      right: vi[1] || vi[0]
-    };
-  }
-};
-export {
-  POSITION_PROPS
-};

package/dist/esm/props/theme.js

@@ -1,137 +0,0 @@
-import {
-  getMediaTheme,
-  getMediaColor,
-  transformTextStroke,
-  transformShadow,
-  transformBoxShadow,
-  transformBorder,
-  transformBackgroundImage,
-  resolveColorsInGradient,
-  transformSizeRatio
-} from "@symbo.ls/scratch";
-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) => {
-    if (!val) return;
-    if (element.themeModifier) {
-      return getMediaTheme(val, `@${element.themeModifier}`);
-    }
-    return getMediaTheme(val);
-  },
-  color: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      color: getMediaColor(val, globalTheme)
-    };
-  },
-  background: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    if (isString(val) && val.includes("gradient")) {
-      return { background: resolveColorsInGradient(val, globalTheme) };
-    }
-    return {
-      background: getMediaColor(val, globalTheme)
-    };
-  },
-  backgroundColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      backgroundColor: getMediaColor(val, globalTheme)
-    };
-  },
-  backgroundImage: (val, element, s, ctx) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    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;
-    }
-    return {
-      backgroundImage: transformBackgroundImage(val, globalTheme)
-    };
-  },
-  textStroke: (val) => ({
-    WebkitTextStroke: transformTextStroke(val)
-  }),
-  outline: (val) => ({
-    outline: transformBorder(val)
-  }),
-  outlineOffset: (val, el) => transformSizeRatio("outlineOffset", val, el),
-  border: (val) => ({
-    border: transformBorder(val)
-  }),
-  borderColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      borderColor: getMediaColor(val, globalTheme)
-    };
-  },
-  borderTopColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderTopColor: getMediaColor(val, globalTheme) };
-  },
-  borderBottomColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderBottomColor: getMediaColor(val, globalTheme) };
-  },
-  borderLeftColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderLeftColor: getMediaColor(val, globalTheme) };
-  },
-  borderRightColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderRightColor: getMediaColor(val, globalTheme) };
-  },
-  borderLeft: (val) => ({
-    borderLeft: transformBorder(val)
-  }),
-  borderTop: (val) => ({
-    borderTop: transformBorder(val)
-  }),
-  borderRight: (val) => ({
-    borderRight: transformBorder(val)
-  }),
-  borderBottom: (val) => ({
-    borderBottom: transformBorder(val)
-  }),
-  shadow: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      boxShadow: transformShadow(val, globalTheme)
-    };
-  },
-  boxShadow: (val, element) => {
-    if (!isString(val)) return;
-    const [value, hasImportant] = val.split("!importan");
-    const globalTheme = getSystemGlobalTheme(element);
-    const important = hasImportant ? " !important" : "";
-    return {
-      boxShadow: transformBoxShadow(value.trim(), globalTheme) + important
-    };
-  },
-  textShadow: (val, { context }) => ({
-    textShadow: transformBoxShadow(val, context.designSystem.globalTheme)
-  }),
-  columnRule: (val) => ({
-    columnRule: transformBorder(val)
-  })
-};
-export {
-  THEME_PROPS,
-  getSystemGlobalTheme
-};

package/dist/esm/props/timing.js

@@ -1,26 +0,0 @@
-import {
-  getTimingFunction,
-  splitTransition,
-  transformDuration
-} from "@symbo.ls/scratch";
-const TIMING_PROPS = {
-  transition: (val) => ({
-    transition: splitTransition(val)
-  }),
-  transitionDuration: (val) => ({
-    transitionDuration: transformDuration(val)
-  }),
-  transitionDelay: (val) => ({
-    transitionDelay: transformDuration(val)
-  }),
-  transitionTimingFunction: (val) => ({
-    transitionTimingFunction: getTimingFunction(val)
-  }),
-  transitionProperty: (val) => ({
-    transitionProperty: val,
-    willChange: val
-  })
-};
-export {
-  TIMING_PROPS
-};

package/dist/esm/set.js

@@ -1,16 +0,0 @@
-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);
-  if (typeof cssEngine === "function") return cssEngine(transform);
-  return css(transform);
-};
-export {
-  setClassname,
-  transformClassname
-};

package/dist/esm/transform/executors.js

@@ -1,111 +0,0 @@
-import { exec, isArray, isFunction, isObject, isProduction, merge, overwrite, overwriteDeep } from "@symbo.ls/utils";
-import { pushConfig, popConfig } from "@symbo.ls/scratch";
-import { CSS_PROPS_REGISTRY } from "../props/index.js";
-import { DEFAULT_CSS_PROPERTIES_LIST } from "../props/defaults.js";
-import { applyTrueProps, transformersByPrefix } from "./transformers.js";
-const isProd = isProduction();
-const usePropsAsCSS = (sourceObj, element, opts) => {
-  const ds = element?.context?.designSystem;
-  if (ds) 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) => merge(acc, CLASS[curr]), {});
-          obj.designSystemClass = result;
-        }
-      } else if (key === "true") {
-        const val = exec(value, element);
-        merge(obj, applyTrueProps(val, element));
-      } else if (element.classlist[key]) {
-        const originalFromClass = element.classlist[key];
-        const result = isFunction(originalFromClass) ? originalFromClass(element, element.state, element.context) : originalFromClass;
-        if (result) setToObj(key, result);
-        if (!isProd && isObject(obj[key])) obj[key].label = key;
-      } else if (CSS_PROPS_REGISTRY[key]) {
-        let val = exec(value, element);
-        if (isArray(val)) {
-          val = val.reduce((a, c) => merge(a, c), {});
-        }
-        let result = CSS_PROPS_REGISTRY[key](val, element, element.state, element.context);
-        if (isArray(result)) result = result.reduce((a, c) => merge(a, c), {});
-        if (result) setToObj(key, result);
-        if (!isProd && isObject(obj[key])) obj[key].label = key;
-      } else if (DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
-        let result = exec(value, element);
-        if (typeof result === "string" && result.charCodeAt(0) === 45 && result.charCodeAt(1) === 45) {
-          result = `var(${result})`;
-        }
-        setToObj(key, { [key]: result });
-        if (!isProd && isObject(obj[key])) obj[key].label = key;
-      } else {
-        rest[key] = value;
-      }
-    }
-    return [obj, rest];
-  } finally {
-    if (ds) popConfig();
-  }
-};
-const useSelectorsAsCSS = (sourceObj, element) => {
-  const obj = {};
-  for (const key in sourceObj) {
-    const selectroSetter = 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") {
-              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 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;
-};
-export {
-  exetuteClassPerComponent,
-  useCssInProps,
-  usePropsAsCSS,
-  useSelectorsAsCSS
-};

package/dist/esm/transform/index.js

@@ -1,2 +0,0 @@
-export * from "./executors.js";
-export * from "./transformers.js";

package/dist/esm/transform/transformers.js

@@ -1,136 +0,0 @@
-import { isFunction } from "@symbo.ls/utils";
-import { useCssInProps } from "./executors.js";
-const DATA_THEME_RE = /^\[data-theme=(?:"([^"]+)"|'([^']+)')\]$/;
-const applyMediaProps = (key, selectorProps, element) => {
-  const { context } = element;
-  if (!context.designSystem?.media) return;
-  const schemeKey = key.slice(1);
-  const mediaValue = context.designSystem.media[schemeKey];
-  const generatedClass = useCssInProps(selectorProps, element);
-  if (!mediaValue) {
-    return { [key]: 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]: useCssInProps(selectorProps, element) };
-};
-const applySelectorProps = (key, selectorProps, element) => {
-  const selectorKey = `&${key}`;
-  const resolved = 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];
-  if (caseFn === void 0) return void 0;
-  if (isFunction(caseFn)) return caseFn.call(element, element);
-  return !!caseFn;
-};
-const applyCaseProps = (key, selectorProps, element) => {
-  const caseKey = key.slice(1);
-  let isCaseTrue = resolveCase(caseKey, element);
-  if (isCaseTrue === void 0) {
-    isCaseTrue = !!element[caseKey];
-  }
-  if (!isCaseTrue) return;
-  return useCssInProps(selectorProps, element);
-};
-const applyVariableProps = (key, selectorVal, element) => {
-  return { [key]: selectorVal };
-};
-const applyConditionalCaseProps = (key, selectorProps, element) => {
-  const caseKey = key.slice(1);
-  let isCaseTrue = element[caseKey] === true || element.state?.[caseKey];
-  if (!isCaseTrue) {
-    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 useCssInProps(selectorProps, element);
-};
-const applyConditionalFalsyProps = (key, selectorProps, element) => {
-  const caseKey = key.slice(1);
-  let isCaseTrue = element[caseKey] === true || element.state?.[caseKey];
-  if (!isCaseTrue) {
-    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 useCssInProps(selectorProps, element);
-};
-const applyTrueProps = (selectorProps, element) => {
-  return useCssInProps(selectorProps, element);
-};
-const transformersByPrefix = {
-  "@": applyMediaProps,
-  // Selector handlers
-  ":": applySelectorProps,
-  "[": applySelectorProps,
-  "*": applySelectorProps,
-  "+": applySelectorProps,
-  "~": applySelectorProps,
-  "&": applyAndProps,
-  ">": applyAndProps,
-  // Conditional and variable handlers
-  $: applyCaseProps,
-  "-": applyVariableProps,
-  ".": applyConditionalCaseProps,
-  "!": applyConditionalFalsyProps
-};
-export {
-  applyTrueProps,
-  transformersByPrefix
-};