css-in-props 3.8.9 → 3.14.1

package/dist/esm/transform/executors.js

@@ -1,104 +0,0 @@
-import { exec, isArray, isFunction, isObject, isProduction, merge, overwrite, overwriteDeep } from "@domql/utils";
-import { CSS_PROPS_REGISTRY } from "../props";
-import { DEFAULT_CSS_PROPERTIES_LIST } from "../props/defaults";
-import { applyTrueProps, transformersByPrefix } from "./transformers";
-const isProd = 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) => 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];
-};
-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";
-export * from "./transformers";

package/dist/esm/transform/transformers.js

@@ -1,87 +0,0 @@
-import { isFunction } from "@domql/utils";
-import { useCssInProps } from "./executors";
-const applyMediaProps = (key, selectorProps, element) => {
-  const { context } = element;
-  if (!context.designSystem?.media) return;
-  const mediaValue = context.designSystem.media[key.slice(1)];
-  const generatedClass = 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 { [mediaKey]: generatedClass };
-};
-const applyAndProps = (key, selectorProps, element) => {
-  return { [key]: useCssInProps(selectorProps, element) };
-};
-const applySelectorProps = (key, selectorProps, element) => {
-  const selectorKey = `&${key}`;
-  return { [selectorKey]: useCssInProps(selectorProps, element) };
-};
-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.props?.[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.props[caseKey] === true || element.state[caseKey] || element[caseKey];
-  if (!isCaseTrue) {
-    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.props[caseKey] === true || element.state[caseKey] || element[caseKey];
-  if (!isCaseTrue) {
-    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
-};