css-in-props 3.2.3 → 3.2.7

package/dist/cjs/props/misc.js

@@ -1,35 +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 misc_exports = {};
-__export(misc_exports, {
-  MISC_PROPS: () => MISC_PROPS
-});
-module.exports = __toCommonJS(misc_exports);
-const MISC_PROPS = {
-  overflow: (value) => ({
-    overflow: value,
-    scrollBehavior: "smooth"
-  }),
-  cursor: (value, el, s, ctx) => {
-    if (!value) return;
-    const file = ctx.files && ctx.files[value];
-    if (file && file.content) value = `url(${file.content.src})`;
-    return { cursor: value };
-  }
-};

package/dist/cjs/props/position.js

@@ -1,51 +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 position_exports = {};
-__export(position_exports, {
-  POSITION_PROPS: () => POSITION_PROPS
-});
-module.exports = __toCommonJS(position_exports);
-var import_scratch = require("@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) => (0, import_scratch.getSpacingByKey)(v, "k").k).join(" ") };
-  },
-  left: (val) => (0, import_scratch.getSpacingByKey)(val, "left"),
-  top: (val) => (0, import_scratch.getSpacingByKey)(val, "top"),
-  right: (val) => (0, import_scratch.getSpacingByKey)(val, "right"),
-  bottom: (val) => (0, import_scratch.getSpacingByKey)(val, "bottom"),
-  verticalInset: (val) => {
-    if (typeof val !== "string") return;
-    const vi = val.split(" ").map((v) => (0, import_scratch.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) => (0, import_scratch.getSpacingByKey)(v, "k").k);
-    return {
-      left: vi[0],
-      right: vi[1] || vi[0]
-    };
-  }
-};

package/dist/cjs/props/theme.js

@@ -1,126 +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 theme_exports = {};
-__export(theme_exports, {
-  THEME_PROPS: () => THEME_PROPS,
-  getSystemGlobalTheme: () => getSystemGlobalTheme
-});
-module.exports = __toCommonJS(theme_exports);
-var import_scratch = require("@symbo.ls/scratch");
-var import_utils = require("@domql/utils");
-const getSystemGlobalTheme = ({ context, state }) => {
-  const rootState = state && state.root;
-  return rootState && rootState.globalTheme ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme;
-};
-const THEME_PROPS = {
-  theme: (val, element) => {
-    const { props } = element;
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    const hasSubtheme = val.includes(" ") && !val.includes("@");
-    const globalThemeForced = `@${props.themeModifier || globalTheme}`;
-    if (hasSubtheme) {
-      const themeAppliedInVal = val.split(" ");
-      themeAppliedInVal.splice(1, 0, globalThemeForced);
-      return (0, import_scratch.getMediaTheme)(themeAppliedInVal);
-    } else if (val.includes("@{globalTheme}")) val.replace("@{globalTheme}", globalThemeForced);
-    return (0, import_scratch.getMediaTheme)(val, `@${props.themeModifier || globalTheme}`);
-  },
-  color: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      color: (0, import_scratch.getMediaColor)(val, globalTheme)
-    };
-  },
-  background: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      background: (0, import_scratch.getMediaColor)(val, globalTheme)
-    };
-  },
-  backgroundColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      backgroundColor: (0, import_scratch.getMediaColor)(val, globalTheme)
-    };
-  },
-  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;
-    return {
-      backgroundImage: (0, import_scratch.transformBackgroundImage)(val, globalTheme)
-    };
-  },
-  textStroke: (val) => ({
-    WebkitTextStroke: (0, import_scratch.transformTextStroke)(val)
-  }),
-  outline: (val) => ({
-    outline: (0, import_scratch.transformBorder)(val)
-  }),
-  outlineOffset: (val, { props }) => (0, import_scratch.transformSizeRatio)("outlineOffset", val, props),
-  border: (val) => ({
-    border: (0, import_scratch.transformBorder)(val)
-  }),
-  borderColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      borderColor: (0, import_scratch.getMediaColor)(val, globalTheme)
-    };
-  },
-  borderLeft: (val) => ({
-    borderLeft: (0, import_scratch.transformBorder)(val)
-  }),
-  borderTop: (val) => ({
-    borderTop: (0, import_scratch.transformBorder)(val)
-  }),
-  borderRight: (val) => ({
-    borderRight: (0, import_scratch.transformBorder)(val)
-  }),
-  borderBottom: (val) => ({
-    borderBottom: (0, import_scratch.transformBorder)(val)
-  }),
-  shadow: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      boxShadow: (0, import_scratch.transformShadow)(val, globalTheme)
-    };
-  },
-  boxShadow: (val, element) => {
-    if (!(0, import_utils.isString)(val)) return;
-    const [value, hasImportant] = val.split("!importan");
-    const globalTheme = getSystemGlobalTheme(element);
-    const important = hasImportant ? " !important" : "";
-    return {
-      boxShadow: (0, import_scratch.transformBoxShadow)(value.trim(), globalTheme) + important
-    };
-  },
-  textShadow: (val, { context }) => ({
-    textShadow: (0, import_scratch.transformBoxShadow)(val, context.designSystem.globalTheme)
-  }),
-  columnRule: (val) => ({
-    columnRule: (0, import_scratch.transformBorder)(val)
-  })
-};

package/dist/cjs/props/timing.js

@@ -1,42 +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 timing_exports = {};
-__export(timing_exports, {
-  TIMING_PROPS: () => TIMING_PROPS
-});
-module.exports = __toCommonJS(timing_exports);
-var import_scratch = require("@symbo.ls/scratch");
-const TIMING_PROPS = {
-  transition: (val) => ({
-    transition: (0, import_scratch.splitTransition)(val)
-  }),
-  transitionDuration: (val) => ({
-    transitionDuration: (0, import_scratch.transformDuration)(val)
-  }),
-  transitionDelay: (val) => ({
-    transitionDelay: (0, import_scratch.transformDuration)(val)
-  }),
-  transitionTimingFunction: (val) => ({
-    transitionTimingFunction: (0, import_scratch.getTimingFunction)(val)
-  }),
-  transitionProperty: (val) => ({
-    transitionProperty: val,
-    willChange: val
-  })
-};

package/dist/cjs/transform/executors.js

@@ -1,105 +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("@domql/utils");
-var import_props = require("../props");
-var import_defaults = require("../props/defaults");
-var import_transformers = require("./transformers");
-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 result = import_props.CSS_PROPS_REGISTRY[key](val, element, element.state, element.context);
-      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.includes(key)) {
-      const result = (0, import_utils.exec)(value, element);
-      setToObj(key, { [key]: result });
-      if (!isProd && (0, import_utils.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 = import_transformers.transformersByPrefix[key.slice(0, 1)];
-    if (selectroSetter) {
-      const result = selectroSetter(key, sourceObj[key], element);
-      if (result) (0, import_utils.overwriteDeep)(obj, result);
-    }
-  }
-  return obj;
-};
-const useCssInProps = (selectorProps, element, opts = { unpack: true }) => {
-  const [cssObj, restProps] = usePropsAsCSS(selectorProps, element, opts);
-  const selectorsObj = useSelectorsAsCSS(restProps, element);
-  if (Object.keys(selectorsObj).length) {
-    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;
-};

package/dist/cjs/transform/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var transform_exports = {};
-module.exports = __toCommonJS(transform_exports);
-__reExport(transform_exports, require("./executors"), module.exports);

package/dist/cjs/transform/transformers.js

@@ -1,85 +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 transformers_exports = {};
-__export(transformers_exports, {
-  applyTrueProps: () => applyTrueProps,
-  transformersByPrefix: () => transformersByPrefix
-});
-module.exports = __toCommonJS(transformers_exports);
-var import_executors = require("./executors");
-const applyMediaProps = (key, selectorProps, element) => {
-  var _a;
-  const { context } = element;
-  if (!((_a = context.designSystem) == null ? void 0 : _a.MEDIA)) return;
-  const mediaValue = context.designSystem.MEDIA[key.slice(1)];
-  const generatedClass = (0, import_executors.useCssInProps)(selectorProps, element);
-  const mediaKey = mediaValue ? "@media " + (mediaValue === "print" ? mediaValue : `screen and ${mediaValue}`) : key;
-  return { [mediaKey]: generatedClass };
-};
-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 applyCaseProps = (key, selectorProps, element) => {
-  var _a;
-  const { CASES } = ((_a = element.context) == null ? void 0 : _a.designSystem) || {};
-  const caseKey = key.slice(1);
-  const isCaseTrue = !(CASES == null ? void 0 : CASES[caseKey]) && !element.props[caseKey];
-  if (!isCaseTrue) return;
-  return (0, import_executors.useCssInProps)(selectorProps, element);
-};
-const applyVariableProps = (key, selectorVal, element) => {
-  return { [key]: selectorVal };
-};
-const applyConditionalCaseProps = (key, selectorProps, element) => {
-  const caseKey = key.slice(1);
-  const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
-  if (!isCaseTrue) return;
-  return (0, import_executors.useCssInProps)(selectorProps, element);
-};
-const applyConditionalFalsyProps = (key, selectorProps, element) => {
-  const caseKey = key.slice(1);
-  const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
-  if (isCaseTrue) return;
-  return (0, import_executors.useCssInProps)(selectorProps, element);
-};
-const applyTrueProps = (selectorProps, element) => {
-  return (0, import_executors.useCssInProps)(selectorProps, element);
-};
-const transformersByPrefix = {
-  // Media and theme handlers
-  // key, props, result, element, isSubtree
-  "@": applyMediaProps,
-  // Selector handlers
-  ":": applySelectorProps,
-  "[": applySelectorProps,
-  "*": applySelectorProps,
-  "+": applySelectorProps,
-  "~": applySelectorProps,
-  "&": applyAndProps,
-  ">": applyAndProps,
-  // Conditional and variable handlers
-  $: applyCaseProps,
-  "-": applyVariableProps,
-  ".": applyConditionalCaseProps,
-  "!": applyConditionalFalsyProps
-};