css-in-props 3.8.9 → 3.14.0

package/package.json

@@ -2,20 +2,18 @@
   "name": "css-in-props",
   "description": "Utilize props as CSS methods",
   "author": "symbo.ls",
-  "version": "3.8.9",
+  "version": "3.14.0",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
-  "module": "./dist/esm/index.js",
+  "module": "./index.js",
   "unpkg": "./dist/iife/index.js",
   "jsdelivr": "./dist/iife/index.js",
-  "main": "./dist/cjs/index.js",
+  "main": "./index.js",
   "exports": {
-    ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    },
+    ".": "./index.js",
     "./src/*": "./src/*.js",
-    "./src/props": "./src/props/index.js"
+    "./src/props": "./src/props/index.js",
+    "./package.json": "./package.json"
   },
   "source": "src/index.js",
   "publishConfig": {
@@ -23,9 +21,9 @@
   },
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "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:esm": "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": "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": "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:@symbo.ls/* --external:smbls",
     "build": "node ../../build/build.js",
     "prepublish": "npm run build && npm run copy:package:cjs"
   },
@@ -35,12 +33,12 @@
     "src"
   ],
   "dependencies": {
-    "@domql/utils": "^3.8.9",
-    "@symbo.ls/emotion": "^3.8.9",
-    "@symbo.ls/scratch": "^3.8.9"
+    "@symbo.ls/css": "^3.14.0",
+    "@symbo.ls/utils": "^3.14.0",
+    "@symbo.ls/scratch": "^3.14.0"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
-  "browser": "./dist/esm/index.js",
+  "browser": "./index.js",
   "sideEffects": false,
   "devDependencies": {
     "@babel/core": "^7.29.0"

package/src/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-export * from './transform'
-export * from './emotion'
-export * from './props'
-export * from './props/defaults'
+export * from './transform/index.js'
+export * from './set.js'
+export * from './props/index.js'
+export * from './props/defaults.js'

package/src/props/animation.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { isObject, isString } from '@domql/utils'
-import { emotion } from '@symbo.ls/emotion'
+import { isObject, isString } from '@symbo.ls/utils'
+import { keyframes as cssKeyframes } from '@symbo.ls/css'
 import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
 
 const TIMING_FUNCTIONS = ['ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out', 'step-start', 'step-end']
@@ -10,13 +10,18 @@ const DIRECTIONS = ['normal', 'reverse', 'alternate', 'alternate-reverse']
 const PLAY_STATES = ['running', 'paused']
 const isDuration = v => /^[\d.]+m?s$/.test(v)
 
+let _animCounter = 0
 const applyAnimationProps = (animation, element) => {
-  const { emotion: ctxEmotion } = element.context
-  const { keyframes } = ctxEmotion || emotion
-  if (isObject(animation)) return { animationName: keyframes(animation) }
-  const { ANIMATION } = element.context && element.context.designSystem
-  const record = ANIMATION[animation]
-  return keyframes(record)
+  const { animation: ANIMATION } = (element.context && element.context.designSystem) || {}
+  if (isObject(animation)) {
+    const name = `smbls-anim-${_animCounter++}`
+    return { animationName: cssKeyframes(name, animation) }
+  }
+  const record = ANIMATION && ANIMATION[animation]
+  if (isObject(record)) {
+    return cssKeyframes(animation, record)
+  }
+  return animation
 }
 
 /**
@@ -25,7 +30,7 @@ const applyAnimationProps = (animation, element) => {
  * Other tokens are classified by type: duration, timing-function, iteration-count, etc.
  */
 const parseAnimationShorthand = (val, el) => {
-  const { ANIMATION } = el.context && el.context.designSystem || {}
+  const { animation: ANIMATION } = el.context && el.context.designSystem || {}
   const tokens = val.split(/\s+/)
   let name = null
   const durations = []
@@ -66,25 +71,25 @@ export const ANIMATION_PROPS = {
       const parsed = parseAnimationShorthand(val, el)
       return {
         animationName: applyAnimationProps(parsed.name || val, el),
-        animationDuration: parsed.durations[0] || getTimingByKey(el.props.animationDuration || 'A').timing,
-        animationDelay: parsed.durations[1] || getTimingByKey(el.props.animationDelay || '0s').timing,
-        animationTimingFunction: parsed.timingFunction || getTimingFunction(el.props.animationTimingFunction || 'ease'),
-        animationFillMode: parsed.fillMode || el.props.animationFillMode || 'both',
-        animationIterationCount: parsed.iterationCount != null ? parsed.iterationCount : (el.props.animationIterationCount || 1),
-        animationPlayState: parsed.playState || el.props.animationPlayState,
-        animationDirection: parsed.direction || el.props.animationDirection
+        animationDuration: parsed.durations[0] || getTimingByKey(el.animationDuration || 'A').timing,
+        animationDelay: parsed.durations[1] || getTimingByKey(el.animationDelay || '0s').timing,
+        animationTimingFunction: parsed.timingFunction || getTimingFunction(el.animationTimingFunction || 'ease'),
+        animationFillMode: parsed.fillMode || el.animationFillMode || 'both',
+        animationIterationCount: parsed.iterationCount != null ? parsed.iterationCount : (el.animationIterationCount || 1),
+        animationPlayState: parsed.playState || el.animationPlayState,
+        animationDirection: parsed.direction || el.animationDirection
       }
     }
     // Single name (no spaces) — original behavior
     return {
       animationName: applyAnimationProps(val, el),
-      animationDuration: getTimingByKey(el.props.animationDuration || 'A').timing,
-      animationDelay: getTimingByKey(el.props.animationDelay || '0s').timing,
-      animationTimingFunction: getTimingFunction(el.props.animationTimingFunction || 'ease'),
-      animationFillMode: el.props.animationFillMode || 'both',
-      animationIterationCount: el.props.animationIterationCount || 1,
-      animationPlayState: el.props.animationPlayState,
-      animationDirection: el.props.animationDirection
+      animationDuration: getTimingByKey(el.animationDuration || 'A').timing,
+      animationDelay: getTimingByKey(el.animationDelay || '0s').timing,
+      animationTimingFunction: getTimingFunction(el.animationTimingFunction || 'ease'),
+      animationFillMode: el.animationFillMode || 'both',
+      animationIterationCount: el.animationIterationCount || 1,
+      animationPlayState: el.animationPlayState,
+      animationDirection: el.animationDirection
     }
   },
   animationName: (val, el) => ({

package/src/props/block.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isUndefined, isString } from '@domql/utils'
+import { isUndefined, isString } from '@symbo.ls/utils'
 
 import {
   getSpacingBasedOnRatio,
@@ -11,16 +11,12 @@ import {
 } from '@symbo.ls/scratch'
 
 export const BLOCK_PROPS = {
-  show: (val, el, s, ctx) => !!(ctx.utils.exec(val, el, s) === false) && ({
-    display: 'none !important'
-  }),
+  show: (val) => !val ? ({ display: 'none !important' }) : undefined,
 
-  hide: (val, el, s, ctx) => !!ctx.utils.exec(val, el, s) && ({
-    display: 'none !important'
-  }),
+  hide: (val) => val ? ({ display: 'none !important' }) : undefined,
 
-  height: (val, { props }) => transformSizeRatio('height', val, props),
-  width: (val, { props }) => transformSizeRatio('width', val, props),
+  height: (val, el) => transformSizeRatio('height', val, el),
+  width: (val, el) => transformSizeRatio('width', val, el),
 
   boxSizing: (val) => !isUndefined(val)
     ? ({ boxSizing: val })
@@ -35,11 +31,11 @@ export const BLOCK_PROPS = {
     }
   },
 
-  inlineSize: (val, { props }) => transformSizeRatio('inlineSize', val, props),
-  blockSize: (val, { props }) => transformSizeRatio('blockSize', val, props),
+  inlineSize: (val, el) => transformSizeRatio('inlineSize', val, el),
+  blockSize: (val, el) => transformSizeRatio('blockSize', val, el),
 
-  minWidth: (val, { props }) => transformSizeRatio('minWidth', val, props),
-  maxWidth: (val, { props }) => transformSizeRatio('maxWidth', val, props),
+  minWidth: (val, el) => transformSizeRatio('minWidth', val, el),
+  maxWidth: (val, el) => transformSizeRatio('maxWidth', val, el),
   widthRange: (val) => {
     if (!isString(val)) return
     const [minWidth, maxWidth] = val.split(' ')
@@ -49,8 +45,8 @@ export const BLOCK_PROPS = {
     }
   },
 
-  minHeight: (val, { props }) => transformSizeRatio('minHeight', val, props),
-  maxHeight: (val, { props }) => transformSizeRatio('maxHeight', val, props),
+  minHeight: (val, el) => transformSizeRatio('minHeight', val, el),
+  maxHeight: (val, el) => transformSizeRatio('maxHeight', val, el),
   heightRange: (val) => {
     if (!isString(val)) return
     const [minHeight, maxHeight] = val.split(' ')
@@ -69,11 +65,11 @@ export const BLOCK_PROPS = {
     }
   },
 
-  minBlockSize: (val, { props }) => transformSizeRatio('minBlockSize', val, props),
-  minInlineSize: (val, { props }) => transformSizeRatio('minInlineSize', val, props),
+  minBlockSize: (val, el) => transformSizeRatio('minBlockSize', val, el),
+  minInlineSize: (val, el) => transformSizeRatio('minInlineSize', val, el),
 
-  maxBlockSize: (val, { props }) => transformSizeRatio('maxBlockSize', val, props),
-  maxInlineSize: (val, { props }) => transformSizeRatio('maxInlineSize', val, props),
+  maxBlockSize: (val, el) => transformSizeRatio('maxBlockSize', val, el),
+  maxInlineSize: (val, el) => transformSizeRatio('maxInlineSize', val, el),
 
   minSize: (val) => {
     if (!isString(val)) return
@@ -93,10 +89,10 @@ export const BLOCK_PROPS = {
     }
   },
 
-  borderWidth: (val, { props }) => transformSizeRatio('borderWidth', val, props),
+  borderWidth: (val, el) => transformSizeRatio('borderWidth', val, el),
 
-  padding: (val, { props }) => transformSizeRatio('padding', val, props),
-  scrollPadding: (val, { props }) => transformSizeRatio('scrollPadding', val, props),
+  padding: (val, el) => transformSizeRatio('padding', val, el),
+  scrollPadding: (val, el) => transformSizeRatio('scrollPadding', val, el),
   paddingInline: (val) => {
     if (!isString(val)) return
     const [paddingInlineStart, paddingInlineEnd] = val.split(' ')
@@ -113,19 +109,17 @@ export const BLOCK_PROPS = {
       ...transformSize('paddingBlockEnd', paddingBlockEnd || paddingBlockStart)
     }
   },
-  // Traditional directional padding
-  paddingTop: (val, { props }) => transformSizeRatio('paddingBlockStart', val, props),
-  paddingBottom: (val, { props }) => transformSizeRatio('paddingBlockEnd', val, props),
-  paddingLeft: (val, { props }) => transformSizeRatio('paddingInlineStart', val, props),
-  paddingRight: (val, { props }) => transformSizeRatio('paddingInlineEnd', val, props),
-
-  // Logical properties (for reference)
-  paddingBlockStart: (val, { props }) => transformSizeRatio('paddingBlockStart', val, props), // maps to top
-  paddingBlockEnd: (val, { props }) => transformSizeRatio('paddingBlockEnd', val, props), // maps to bottom
-  paddingInlineStart: (val, { props }) => transformSizeRatio('paddingInlineStart', val, props), // maps to left
-  paddingInlineEnd: (val, { props }) => transformSizeRatio('paddingInlineEnd', val, props), // maps to right
-
-  margin: (val, { props }) => transformSizeRatio('margin', val, props),
+  paddingTop: (val, el) => transformSizeRatio('paddingBlockStart', val, el),
+  paddingBottom: (val, el) => transformSizeRatio('paddingBlockEnd', val, el),
+  paddingLeft: (val, el) => transformSizeRatio('paddingInlineStart', val, el),
+  paddingRight: (val, el) => transformSizeRatio('paddingInlineEnd', val, el),
+
+  paddingBlockStart: (val, el) => transformSizeRatio('paddingBlockStart', val, el),
+  paddingBlockEnd: (val, el) => transformSizeRatio('paddingBlockEnd', val, el),
+  paddingInlineStart: (val, el) => transformSizeRatio('paddingInlineStart', val, el),
+  paddingInlineEnd: (val, el) => transformSizeRatio('paddingInlineEnd', val, el),
+
+  margin: (val, el) => transformSizeRatio('margin', val, el),
   marginInline: (val) => {
     if (!isString(val)) return
     const [marginInlineStart, marginInlineEnd] = val.split(' ')
@@ -134,39 +128,37 @@ export const BLOCK_PROPS = {
       ...transformSize('marginInlineEnd', marginInlineEnd || marginInlineStart)
     }
   },
-  marginBlock: (val, { props }) => {
-    if (!isString(props.marginBlock)) return
-    const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
+  marginBlock: (val, el) => {
+    if (!isString(el.marginBlock)) return
+    const [marginBlockStart, marginBlockEnd] = el.marginBlock.split(' ')
     return {
       ...transformSize('marginBlockStart', marginBlockStart),
       ...transformSize('marginBlockEnd', marginBlockEnd || marginBlockStart)
     }
   },
-  // Traditional directional margin
-  marginTop: (val, { props }) => transformSizeRatio('marginBlockStart', val, props),
-  marginBottom: (val, { props }) => transformSizeRatio('marginBlockEnd', val, props),
-  marginLeft: (val, { props }) => transformSizeRatio('marginInlineStart', val, props),
-  marginRight: (val, { props }) => transformSizeRatio('marginInlineEnd', val, props),
-
-  // Logical properties
-  marginInlineStart: (val, { props }) => transformSizeRatio('marginInlineStart', val, props),
-  marginInlineEnd: (val, { props }) => transformSizeRatio('marginInlineEnd', val, props),
-  marginBlockStart: (val, { props }) => transformSizeRatio('marginBlockStart', val, props),
-  marginBlockEnd: (val, { props }) => transformSizeRatio('marginBlockEnd', val, props),
+  marginTop: (val, el) => transformSizeRatio('marginBlockStart', val, el),
+  marginBottom: (val, el) => transformSizeRatio('marginBlockEnd', val, el),
+  marginLeft: (val, el) => transformSizeRatio('marginInlineStart', val, el),
+  marginRight: (val, el) => transformSizeRatio('marginInlineEnd', val, el),
+
+  marginInlineStart: (val, el) => transformSizeRatio('marginInlineStart', val, el),
+  marginInlineEnd: (val, el) => transformSizeRatio('marginInlineEnd', val, el),
+  marginBlockStart: (val, el) => transformSizeRatio('marginBlockStart', val, el),
+  marginBlockEnd: (val, el) => transformSizeRatio('marginBlockEnd', val, el),
 
   gap: (val) => ({
     gap: transfromGap(val)
   }),
 
-  columnGap: (val, { props }) => getSpacingBasedOnRatio(props, 'columnGap', val),
-  rowGap: (val, { props }) => getSpacingBasedOnRatio(props, 'rowGap', val),
+  columnGap: (val, el) => getSpacingBasedOnRatio(el, 'columnGap', val),
+  rowGap: (val, el) => getSpacingBasedOnRatio(el, 'rowGap', val),
 
-  flexWrap: (val, { props }) => ({
+  flexWrap: (val) => ({
     display: 'flex',
-    flexFlow: (val || 'row').split(' ')[0] + ' ' + props.flexWrap
+    flexWrap: val
   }),
-  flexFlow: (val, { props }) => {
-    const { reverse } = props
+  flexFlow: (val, el) => {
+    const reverse = el.reverse
     if (!isString(val)) return
     let [direction, wrap] = (val || 'row').split(' ')
     if (val.startsWith('x') || val === 'row') direction = 'row'
@@ -186,6 +178,6 @@ export const BLOCK_PROPS = {
     }
   },
 
-  round: (val, { props }) => transformBorderRadius(val || props.borderRadius, props, 'round'),
-  borderRadius: (val, { props }) => transformBorderRadius(val || props.round, props, 'borderRadius')
+  round: (val, el) => transformBorderRadius(val ?? el.borderRadius, el, 'round'),
+  borderRadius: (val, el) => transformBorderRadius(val ?? el.round, el, 'borderRadius')
 }

package/src/props/flex.js

@@ -1,11 +1,10 @@
 'use strict'
 
-import { isString } from '@domql/utils'
+import { isString } from '@symbo.ls/utils'
 
 export const FLEX_PROPS = {
   flow: (value, el) => {
-    const { props } = el
-    const { reverse } = props
+    const reverse = el.reverse
     if (!isString(value)) return
     let [direction, wrap] = (value || 'row').split(' ')
     if (value.startsWith('x') || value === 'row') direction = 'row'
@@ -20,11 +19,11 @@ export const FLEX_PROPS = {
     }
   },
 
-  wrap: (value, { props }) => {
+  wrap: (value, el) => {
     return { display: 'flex', flexWrap: value }
   },
 
-  align: (value, { props }) => {
+  align: (value, el) => {
     const [alignItems, justifyContent] = value.split(' ')
     return { display: 'flex', alignItems, justifyContent }
   }

package/src/props/index.js

@@ -1,31 +1,30 @@
 'use strict'
 
-import { ANIMATION_PROPS } from './animation'
-import { BLOCK_PROPS } from './block'
-import { FONT_PROPS } from './font'
-import { MISC_PROPS } from './misc'
-import { POSITION_PROPS } from './position'
-import { THEME_PROPS } from './theme'
-import { TIMING_PROPS } from './timing'
-import { FLEX_PROPS } from './flex'
-import { GRID_PROPS } from './grid'
+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'
-export * from './block'
-export * from './font'
-export * from './misc'
-export * from './position'
-export * from './theme'
-export * from './timing'
-export * from './flex'
-export * from './grid'
+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,
-  ...MISC_PROPS,
   ...POSITION_PROPS,
   ...THEME_PROPS,
   ...TIMING_PROPS,

package/src/props/misc.js

@@ -8,9 +8,16 @@ export const MISC_PROPS = {
   cursor: (value, el, s, ctx) => {
     if (!value) return
 
-    const file = ctx.files && ctx.files[value]
-    if (file && file.content) value = `url(${file.content.src})`
+    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/theme.js

@@ -12,7 +12,7 @@ import {
   transformSizeRatio
 } from '@symbo.ls/scratch'
 
-import { isDefined, isString } from '@domql/utils'
+import { isDefined, isString } from '@symbo.ls/utils'
 
 export const getSystemGlobalTheme = ({ context, state }) => {
   const theme = state?.root?.globalTheme || context.designSystem?.globalTheme
@@ -21,12 +21,11 @@ export const getSystemGlobalTheme = ({ context, state }) => {
 
 export const THEME_PROPS = {
   theme: (val, element) => {
-    const { props } = element
     if (!val) return
 
     // themeModifier explicitly forces a scheme on this component
-    if (props.themeModifier) {
-      return getMediaTheme(val, `@${props.themeModifier}`)
+    if (element.themeModifier) {
+      return getMediaTheme(val, `@${element.themeModifier}`)
     }
 
     // CSS vars handle dark/light switching — no modifier needed, no DOMQL re-render
@@ -63,8 +62,12 @@ export const THEME_PROPS = {
   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
+    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)
     }
@@ -78,7 +81,7 @@ export const THEME_PROPS = {
     outline: transformBorder(val)
   }),
 
-  outlineOffset: (val, { props }) => transformSizeRatio('outlineOffset', val, props),
+  outlineOffset: (val, el) => transformSizeRatio('outlineOffset', val, el),
 
   border: (val) => ({
     border: transformBorder(val)

package/src/set.js

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

package/src/transform/executors.js

@@ -1,9 +1,10 @@
 'use strict'
 
-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'
 
 /**
  * CLASS ASSIGNMENT
@@ -14,60 +15,67 @@ const isProd = isProduction()
 
 // Process non-setter properties and return remaining props
 export const usePropsAsCSS = (sourceObj, element, opts) => {
-  let obj = {}
-  const rest = {}
+  const ds = element?.context?.designSystem
+  if (ds) pushConfig(ds)
 
-  const setToObj = (key, val) => {
-    if (opts.unpack) {
-      obj = { ...obj, ...val }
-      return
-    }
-    obj[key] = val
-  }
+  try {
+    let obj = {}
+    const rest = {}
 
-  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
+    const setToObj = (key, val) => {
+      if (opts.unpack) {
+        obj = { ...obj, ...val }
+        return
       }
-    } 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})`
+      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
       }
-      setToObj(key, { [key]: result })
-      if (!isProd && isObject(obj[key])) obj[key].label = key
-    } else {
-      rest[key] = value
     }
-  }
 
-  return [obj, rest]
+    return [obj, rest]
+  } finally {
+    if (ds) popConfig()
+  }
 }
 
 export const useSelectorsAsCSS = (sourceObj, element) => {