css-in-props 3.8.9 → 3.14.0

package/src/transform/index.js

@@ -1,4 +1,4 @@
 'use strict'
 
-export * from './executors'
-export * from './transformers'
+export * from './executors.js'
+export * from './transformers.js'

package/src/transform/transformers.js

@@ -1,34 +1,58 @@
 'use strict'
 
-import { isFunction } from '@domql/utils'
-import { useCssInProps } from './executors'
+import { isFunction } from '@symbo.ls/utils'
+import { useCssInProps } from './executors.js'
 
 /**
  * PROP APPLICATORS
  * Functions that handle different types of property applications
  */
 
+// Match `[data-theme="dark"]` / `[data-theme='light']` with either quote
+// style, grabbing the scheme name (`dark` / `light` / custom) for pairing
+// with `prefers-color-scheme`.
+const DATA_THEME_RE = /^\[data-theme=(?:"([^"]+)"|'([^']+)')\]$/
+
 // Media query handler
 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 {
-    // CSS selector (e.g. [data-theme="dark"]) — use as parent selector
-    mediaKey = `${mediaValue} &`
+    return { [key]: generatedClass }
+  }
+  if (mediaValue === 'print') {
+    return { '@media print': generatedClass }
+  }
+  if (mediaValue[0] === '(') {
+    return { [`@media screen and ${mediaValue}`]: generatedClass }
   }
 
-  return { [mediaKey]: generatedClass }
+  // CSS selector (e.g. `[data-theme="dark"]`). Always emit the selector
+  // rule so explicit `data-theme="dark"` wins. For the standard `dark` /
+  // `light` schemes, ALSO emit a `@media (prefers-color-scheme: X)`
+  // fallback so the component adopts the OS scheme when `data-theme` is
+  // absent (i.e. `globalTheme: 'auto'`). Guard the fallback with
+  // `:not([data-theme])` on the app scope root so an explicit
+  // `data-theme="light"` (stamped on the app root) forces light even when
+  // the OS prefers dark. Other schemes (`sepia`, custom) are opt-in only.
+  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
 }
 
 // Simple applicators
@@ -38,7 +62,37 @@ const applyAndProps = (key, selectorProps, element) => {
 
 const applySelectorProps = (key, selectorProps, element) => {
   const selectorKey = `&${key}`
-  return { [selectorKey]: useCssInProps(selectorProps, element) }
+  const resolved = useCssInProps(selectorProps, element)
+
+  // When the selector has commas and the resolved value contains nested selectors
+  // (e.g. '> h1'), distribute each nested selector across all comma parts
+  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 = {}
+      // Flat styles apply to the combined selector
+      if (Object.keys(flat).length) {
+        result[selectorKey] = flat
+      }
+      // Each nested selector is distributed across all comma parts
+      for (const nestedKey in nested) {
+        const distributed = parts.map(p => `${p} ${nestedKey}`).join(', ')
+        result[distributed] = nested[nestedKey]
+      }
+      return result
+    }
+  }
+
+  return { [selectorKey]: resolved }
 }
 
 // Resolve a case value from context.cases
@@ -54,7 +108,7 @@ const applyCaseProps = (key, selectorProps, element) => {
   const caseKey = key.slice(1)
   let isCaseTrue = resolveCase(caseKey, element)
   if (isCaseTrue === undefined) {
-    isCaseTrue = !!element.props?.[caseKey]
+    isCaseTrue = !!element[caseKey]
   }
   if (!isCaseTrue) return
   return useCssInProps(selectorProps, element)
@@ -64,25 +118,33 @@ const applyVariableProps = (key, selectorVal, element) => {
   return { [key]: selectorVal }
 }
 
-// . prefix: Truthy conditional (props/state first, then context.cases)
+// . prefix: Truthy conditional (element/state first, then context.cases)
 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 !== undefined) 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 !== undefined) isCaseTrue = caseResult
+    }
   }
   if (!isCaseTrue) return
   return useCssInProps(selectorProps, element)
 }
 
-// ! prefix: Falsy conditional (props/state first, then context.cases)
+// ! prefix: Falsy conditional (element/state first, then context.cases)
 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 !== undefined) 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 !== undefined) isCaseTrue = caseResult
+    }
   }
   if (isCaseTrue) return
   return useCssInProps(selectorProps, element)

package/dist/cjs/_transform.js

@@ -1,30 +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 transform_exports = {};
-__export(transform_exports, {
-  transformClassname: () => transformClassname
-});
-module.exports = __toCommonJS(transform_exports);
-var import_utils = require("@domql/utils");
-var import_transform = require("./transform");
-const transformClassname = (element) => {
-  const { props } = element;
-  if (!(0, import_utils.isObject)(props)) return;
-  return (0, import_transform.useCssInProps)(props, element);
-};

package/dist/cjs/emotion.js

@@ -1,29 +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 emotion_exports = {};
-__export(emotion_exports, {
-  transformEmotion: () => transformEmotion
-});
-module.exports = __toCommonJS(emotion_exports);
-var import_utils = require("@domql/utils");
-var import_emotion = require("@symbo.ls/emotion");
-const { css } = import_emotion.emotion;
-const transformEmotion = (props, callback) => {
-  return (0, import_utils.isFunction)(callback) ? callback(props) : css(props);
-};

package/dist/esm/_transform.js

@@ -1,10 +0,0 @@
-import { isObject } from "@domql/utils";
-import { useCssInProps } from "./transform";
-const transformClassname = (element) => {
-  const { props } = element;
-  if (!isObject(props)) return;
-  return useCssInProps(props, element);
-};
-export {
-  transformClassname
-};

package/dist/esm/emotion.js

@@ -1,9 +0,0 @@
-import { isFunction } from "@domql/utils";
-import { emotion } from "@symbo.ls/emotion";
-const { css } = emotion;
-const transformEmotion = (props, callback) => {
-  return isFunction(callback) ? callback(props) : css(props);
-};
-export {
-  transformEmotion
-};

package/src/_transform.js

@@ -1,10 +0,0 @@
-'use strict'
-
-import { isObject } from '@domql/utils'
-import { useCssInProps } from './transform'
-
-export const transformClassname = (element) => {
-  const { props } = element
-  if (!isObject(props)) return
-  return useCssInProps(props, element)
-}

package/src/emotion.js

@@ -1,9 +0,0 @@
-'use strict'
-
-import { isFunction } from '@domql/utils'
-import { emotion } from '@symbo.ls/emotion'
-const { css } = emotion
-
-export const transformEmotion = (props, callback) => {
-  return isFunction(callback) ? callback(props) : css(props)
-}