css-in-props 3.14.0 → 3.14.3

package/src/props/index.js

@@ -1,35 +0,0 @@
-'use strict'
-
-import { ANIMATION_PROPS } from './animation.js'
-import { BLOCK_PROPS } from './block.js'
-import { FONT_PROPS } from './font.js'
-import { MISC_PROPS } from './misc.js'
-import { POSITION_PROPS } from './position.js'
-import { THEME_PROPS } from './theme.js'
-import { TIMING_PROPS } from './timing.js'
-import { FLEX_PROPS } from './flex.js'
-import { GRID_PROPS } from './grid.js'
-
-export * from './animation.js'
-export * from './block.js'
-export * from './font.js'
-export * from './misc.js'
-export * from './position.js'
-export * from './theme.js'
-export * from './timing.js'
-export * from './flex.js'
-export * from './grid.js'
-
-export const CSS_PROPS_REGISTRY = {
-  ...ANIMATION_PROPS,
-  ...BLOCK_PROPS,
-  ...FONT_PROPS,
-  ...MISC_PROPS,
-  ...POSITION_PROPS,
-  ...THEME_PROPS,
-  ...TIMING_PROPS,
-  ...FLEX_PROPS,
-  ...GRID_PROPS
-}
-
-export default CSS_PROPS_REGISTRY

package/src/props/misc.js

@@ -1,23 +0,0 @@
-'use strict'
-
-export const MISC_PROPS = {
-  overflow: (value) => ({
-    overflow: value,
-    scrollBehavior: 'smooth'
-  }),
-  cursor: (value, el, s, ctx) => {
-    if (!value) return
-
-    const asset = ctx.assets && ctx.assets[value]
-    if (asset && asset.content) value = `url(${asset.content.src})`
-    else {
-      const file = ctx.files && ctx.files[value]
-      if (file && file.content) value = `url(${file.content.src})`
-    }
-
-    return ({ cursor: value })
-  },
-  opacity: (value) => value != null ? ({ opacity: String(value) }) : undefined,
-  visibility: (value) => value != null ? ({ visibility: value }) : undefined,
-  pointerEvents: (value) => value != null ? ({ pointerEvents: value }) : undefined
-}

package/src/props/position.js

@@ -1,34 +0,0 @@
-'use strict'
-
-import { getSpacingByKey } from '@symbo.ls/scratch'
-
-export 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]
-    }
-  }
-}

package/src/props/theme.js

@@ -1,155 +0,0 @@
-'use strict'
-
-import {
-  getMediaTheme,
-  getMediaColor,
-  transformTextStroke,
-  transformShadow,
-  transformBoxShadow,
-  transformBorder,
-  transformBackgroundImage,
-  resolveColorsInGradient,
-  transformSizeRatio
-} from '@symbo.ls/scratch'
-
-import { isDefined, isString } from '@symbo.ls/utils'
-
-export const getSystemGlobalTheme = ({ context, state }) => {
-  const theme = state?.root?.globalTheme || context.designSystem?.globalTheme
-  return theme === 'auto' ? null : theme
-}
-
-export const THEME_PROPS = {
-  theme: (val, element) => {
-    if (!val) return
-
-    // themeModifier explicitly forces a scheme on this component
-    if (element.themeModifier) {
-      return getMediaTheme(val, `@${element.themeModifier}`)
-    }
-
-    // CSS vars handle dark/light switching — no modifier needed, no DOMQL re-render
-    return getMediaTheme(val)
-  },
-
-  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 asset = ctx.assets && ctx.assets[val]
-    if (asset && asset.content) val = asset.content.src
-    else {
-      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, el) => transformSizeRatio('outlineOffset', val, el),
-
-  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)
-  })
-}

package/src/props/timing.js

@@ -1,26 +0,0 @@
-'use strict'
-
-import {
-  getTimingFunction,
-  splitTransition,
-  transformDuration
-} from '@symbo.ls/scratch'
-
-export 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
-  })
-}

package/src/set.js

@@ -1,16 +0,0 @@
-'use strict'
-
-import { isObject } from '@symbo.ls/utils'
-import { useCssInProps } from './transform/index.js'
-import { css } from '@symbo.ls/css'
-
-export const transformClassname = (element) => {
-  if (!isObject(element)) return
-  return useCssInProps(element, element)
-}
-
-export const setClassname = (props, cssEngine) => {
-  const transform = transformClassname(props)
-  if (typeof cssEngine === 'function') return cssEngine(transform)
-  return css(transform)
-}

package/src/transform/executors.js

@@ -1,123 +0,0 @@
-'use strict'
-
-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'
-
-/**
- * CLASS ASSIGNMENT
- * Main handlers for processing and assigning classes
- */
-
-const isProd = isProduction()
-
-// Process non-setter properties and return remaining props
-export const usePropsAsCSS = (sourceObj, element, opts) => {
-  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
-      }
-      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)) {
-        // they can be grouped
-        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]
-  } finally {
-    if (ds) popConfig()
-  }
-}
-
-export 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
-}
-
-export 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 } // eslint-disable-line
-  if (hasSelectors) {
-    if (opts.unpack) return overwrite(cssObj, selectorsObj)
-    cssObj._selectors = selectorsObj
-  }
-  return cssObj
-}
-
-export const exetuteClassPerComponent = (component, element) => {
-  const classObj = {}
-  if (component.class) {
-    for (const classProp in component.class) {
-      classObj[classProp] = component.class[classProp](element)
-    }
-  }
-  return classObj
-}

package/src/transform/index.js

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

package/src/transform/transformers.js

@@ -1,178 +0,0 @@
-'use strict'
-
-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 schemeKey = key.slice(1)
-  const mediaValue = context.designSystem.media[schemeKey]
-  const generatedClass = useCssInProps(selectorProps, element)
-
-  if (!mediaValue) {
-    return { [key]: generatedClass }
-  }
-  if (mediaValue === 'print') {
-    return { '@media print': generatedClass }
-  }
-  if (mediaValue[0] === '(') {
-    return { [`@media screen and ${mediaValue}`]: 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
-const applyAndProps = (key, selectorProps, element) => {
-  return { [key]: useCssInProps(selectorProps, element) }
-}
-
-const applySelectorProps = (key, selectorProps, element) => {
-  const selectorKey = `&${key}`
-  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
-const resolveCase = (caseKey, element) => {
-  const caseFn = element.context?.cases?.[caseKey]
-  if (caseFn === undefined) return undefined
-  if (isFunction(caseFn)) return caseFn.call(element, element)
-  return !!caseFn
-}
-
-// $ prefix: Global cases from context.cases
-const applyCaseProps = (key, selectorProps, element) => {
-  const caseKey = key.slice(1)
-  let isCaseTrue = resolveCase(caseKey, element)
-  if (isCaseTrue === undefined) {
-    isCaseTrue = !!element[caseKey]
-  }
-  if (!isCaseTrue) return
-  return useCssInProps(selectorProps, element)
-}
-
-const applyVariableProps = (key, selectorVal, element) => {
-  return { [key]: selectorVal }
-}
-
-// . prefix: Truthy conditional (element/state first, then context.cases)
-const applyConditionalCaseProps = (key, selectorProps, element) => {
-  const caseKey = key.slice(1)
-  let isCaseTrue = element[caseKey] === true || element.state?.[caseKey]
-  if (!isCaseTrue) {
-    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 (element/state first, then context.cases)
-const applyConditionalFalsyProps = (key, selectorProps, element) => {
-  const caseKey = key.slice(1)
-  let isCaseTrue = element[caseKey] === true || element.state?.[caseKey]
-  if (!isCaseTrue) {
-    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)
-}
-
-export const applyTrueProps = (selectorProps, element) => {
-  return useCssInProps(selectorProps, element)
-}
-
-/**
- * REGISTRY
- * Mapping of key prefixes to their handler functions
- */
-export const transformersByPrefix = {
-  '@': applyMediaProps,
-
-  // Selector handlers
-  ':': applySelectorProps,
-  '[': applySelectorProps,
-  '*': applySelectorProps,
-  '+': applySelectorProps,
-  '~': applySelectorProps,
-  '&': applyAndProps,
-  '>': applyAndProps,
-
-  // Conditional and variable handlers
-  $: applyCaseProps,
-  '-': applyVariableProps,
-  '.': applyConditionalCaseProps,
-  '!': applyConditionalFalsyProps
-}