css-in-props 3.4.4 → 3.4.6

package/dist/esm/props/misc.js

@@ -0,0 +1,15 @@
+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 };
+  }
+};
+export {
+  MISC_PROPS
+};

package/dist/esm/props/position.js

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,139 @@
+import {
+  getMediaTheme,
+  getMediaColor,
+  transformTextStroke,
+  transformShadow,
+  transformBoxShadow,
+  transformBorder,
+  transformBackgroundImage,
+  resolveColorsInGradient,
+  transformSizeRatio
+} from "@symbo.ls/scratch";
+import { isDefined, isString } from "@domql/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;
+    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 getMediaTheme(themeAppliedInVal);
+    } else if (val.includes("@{globalTheme}")) val.replace("@{globalTheme}", globalThemeForced);
+    return getMediaTheme(val, `@${props.themeModifier || globalTheme}`);
+  },
+  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 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, { props }) => transformSizeRatio("outlineOffset", val, props),
+  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

@@ -0,0 +1,26 @@
+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/transform/executors.js

@@ -0,0 +1,91 @@
+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)) {
+      const result = exec(value, element);
+      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) overwriteDeep(obj, result);
+    }
+  }
+  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

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

package/dist/esm/transform/transformers.js

@@ -0,0 +1,61 @@
+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);
+  const mediaKey = mediaValue ? "@media " + (mediaValue === "print" ? mediaValue : `screen and ${mediaValue}`) : key;
+  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 applyCaseProps = (key, selectorProps, element) => {
+  const { CASES } = element.context?.designSystem || {};
+  const caseKey = key.slice(1);
+  const isCaseTrue = !CASES?.[caseKey] && !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);
+  const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  if (!isCaseTrue) return;
+  return 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 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
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "css-in-props",
   "description": "Utilize props as CSS methods",
   "author": "symbo.ls",
-  "version": "3.4.4",
+  "version": "3.4.6",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -13,7 +13,7 @@
     ".": {
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js",
-      "browser": "./dist/iife/index.js",
+      "browser": "./dist/esm/index.js",
       "default": "./dist/esm/index.js"
     }
   },
@@ -21,8 +21,8 @@
   "publishConfig": {},
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild src/*.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
-    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild src/*.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
     "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild src/index.js --bundle --target=es2020 --format=iife --global-name=CssInProps --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV --external:@symbo.ls/* --external:@domql/* --external:smbls",
     "build": "node ../../build/build.js",
     "prepublish": "npm run build && npm run copy:package:cjs"
@@ -33,14 +33,14 @@
     "src"
   ],
   "dependencies": {
-    "@domql/utils": "^3.4.4",
-    "@symbo.ls/atoms": "^3.4.4",
-    "@symbo.ls/emotion": "^3.4.4",
-    "@symbo.ls/scratch": "^3.4.4",
-    "smbls": "^3.4.4"
+    "@domql/utils": "^3.4.6",
+    "@symbo.ls/atoms": "^3.4.6",
+    "@symbo.ls/emotion": "^3.4.6",
+    "@symbo.ls/scratch": "^3.4.6",
+    "smbls": "^3.4.6"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
-  "browser": "./dist/iife/index.js",
+  "browser": "./dist/esm/index.js",
   "sideEffects": false,
   "devDependencies": {
     "@babel/core": "^7.29.0"