css-in-props 3.8.8 → 3.14.0

package/dist/esm/transform/executors.js

@@ -1,56 +1,63 @@
-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";
+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) => {
-  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), {});
+  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;
       }
-      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})`;
+      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;
       }
-      setToObj(key, { [key]: result });
-      if (!isProd && isObject(obj[key])) obj[key].label = key;
-    } else {
-      rest[key] = value;
     }
+    return [obj, rest];
+  } finally {
+    if (ds) popConfig();
   }
-  return [obj, rest];
 };
 const useSelectorsAsCSS = (sourceObj, element) => {
   const obj = {};

package/dist/esm/transform/index.js

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

package/dist/esm/transform/transformers.js

@@ -1,28 +1,63 @@
-import { isFunction } from "@domql/utils";
-import { useCssInProps } from "./executors";
+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 mediaValue = context.designSystem.media[key.slice(1)];
+  const schemeKey = key.slice(1);
+  const mediaValue = context.designSystem.media[schemeKey];
   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 { [key]: generatedClass };
   }
-  return { [mediaKey]: 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}`;
-  return { [selectorKey]: useCssInProps(selectorProps, element) };
+  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];
@@ -34,7 +69,7 @@ const applyCaseProps = (key, selectorProps, element) => {
   const caseKey = key.slice(1);
   let isCaseTrue = resolveCase(caseKey, element);
   if (isCaseTrue === void 0) {
-    isCaseTrue = !!element.props?.[caseKey];
+    isCaseTrue = !!element[caseKey];
   }
   if (!isCaseTrue) return;
   return useCssInProps(selectorProps, element);
@@ -44,20 +79,34 @@ const applyVariableProps = (key, selectorVal, element) => {
 };
 const applyConditionalCaseProps = (key, selectorProps, element) => {
   const caseKey = key.slice(1);
-  let isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  let isCaseTrue = element[caseKey] === true || element.state?.[caseKey];
   if (!isCaseTrue) {
-    const caseResult = resolveCase(caseKey, element);
-    if (caseResult !== void 0) isCaseTrue = caseResult;
+    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.props[caseKey] === true || element.state[caseKey] || element[caseKey];
+  let isCaseTrue = element[caseKey] === true || element.state?.[caseKey];
   if (!isCaseTrue) {
-    const caseResult = resolveCase(caseKey, element);
-    if (caseResult !== void 0) isCaseTrue = caseResult;
+    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);