css-in-props 3.2.3 → 3.2.8

package/package.json

@@ -2,33 +2,47 @@
   "name": "css-in-props",
   "description": "Utilize props as CSS methods",
   "author": "symbo.ls",
-  "version": "3.2.3",
+  "version": "3.2.8",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
-  "module": "src/index.js",
-  "unpkg": "dist/iife/index.js",
-  "jsdelivr": "dist/iife/index.js",
-  "main": "src/index.js",
-  "exports": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "unpkg": "./dist/iife/index.js",
+  "jsdelivr": "./dist/iife/index.js",
+  "main": "./dist/cjs/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "browser": "./dist/iife/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
   "source": "src/index.js",
   "publishConfig": {},
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=es2017 --format=esm --outdir=dist/esm",
-    "build:cjs": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs",
-    "build:iife": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/index.js --target=es2017 --format=iife --outdir=dist/iife --bundle --minify",
-    "build": "npm run build:cjs",
-    "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
+    "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: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"
   },
   "files": [
-    "src",
-    "dist"
+    "dist",
+    "*.js",
+    "src"
   ],
   "dependencies": {
     "@domql/utils": "^3.2.3",
     "@symbo.ls/atoms": "^3.2.3",
     "@symbo.ls/emotion": "^3.2.3",
-    "@symbo.ls/scratch": "^3.2.3"
+    "@symbo.ls/scratch": "^3.2.3",
+    "smbls": "^3.2.3"
   },
-  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681"
+  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
+  "browser": "./dist/iife/index.js",
+  "sideEffects": false,
+  "devDependencies": {
+    "@babel/core": "^7.29.0"
+  }
 }

package/src/_transform.js

@@ -15,18 +15,12 @@ export const transformClassname = (
 
   if (!isObject(props)) return
 
-  // merge(elementClass, registry)
-  // if (registry && Object.keys(registry)[0] !== Object.keys(CSS_PROPS_REGISTRY)[0]) {
-  //   merge(elementClass, CSS_PROPS_REGISTRY)
-  // }
-
   for (const key in props) {
     const setter = keySetters[key.slice(0, 1)]
     const hasCSS = elementClass[key]
 
     if (setter) setter(key, props[key], classCss, element, true)
     else if (isFunction(hasCSS)) {
-      // const stack = hasCSS(element)
       const stack = hasCSS(element, element.state, element.context)
       const exec = isArray(stack)
         ? stack.reduce((a, c) => {
@@ -58,7 +52,6 @@ export const extractCSSfromProps = (element) => {
 
     const preprop = CSS_PROPS_REGISTRY[key]
     if (preprop) {
-      // const stack = hasCSS(element)
       const stack = preprop(element, element.state, element.context)
       const exec = isArray(stack)
         ? stack.reduce((a, c) => {
@@ -74,7 +67,7 @@ export const extractCSSfromProps = (element) => {
       continue
     }
 
-    if (DEFAULT_CSS_PROPERTIES_LIST.includes(key)) {
+    if (DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
       css[key] = val
       continue
     }

package/src/index.js

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

package/src/props/animation.js

@@ -1,9 +1,15 @@
 'use strict'
 
-import { isObject } from '@domql/utils'
+import { isObject, isString } from '@domql/utils'
 import { emotion } from '@symbo.ls/emotion'
 import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
 
+const TIMING_FUNCTIONS = ['ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out', 'step-start', 'step-end']
+const FILL_MODES = ['none', 'forwards', 'backwards', 'both']
+const DIRECTIONS = ['normal', 'reverse', 'alternate', 'alternate-reverse']
+const PLAY_STATES = ['running', 'paused']
+const isDuration = v => /^[\d.]+m?s$/.test(v)
+
 const applyAnimationProps = (animation, element) => {
   const { emotion: ctxEmotion } = element.context
   const { keyframes } = ctxEmotion || emotion
@@ -13,16 +19,74 @@ const applyAnimationProps = (animation, element) => {
   return keyframes(record)
 }
 
+/**
+ * Parse CSS animation shorthand string into individual properties.
+ * Identifies the animation name by looking it up in the ANIMATION registry.
+ * Other tokens are classified by type: duration, timing-function, iteration-count, etc.
+ */
+const parseAnimationShorthand = (val, el) => {
+  const { ANIMATION } = el.context && el.context.designSystem || {}
+  const tokens = val.split(/\s+/)
+  let name = null
+  const durations = []
+  let timingFunction = null
+  let iterationCount = null
+  let direction = null
+  let fillMode = null
+  let playState = null
+
+  for (const token of tokens) {
+    if (ANIMATION && ANIMATION[token]) {
+      name = token
+    } else if (isDuration(token)) {
+      durations.push(token)
+    } else if (TIMING_FUNCTIONS.includes(token) || token.startsWith('cubic-bezier') || token.startsWith('steps(')) {
+      timingFunction = token
+    } else if (token === 'infinite' || /^\d+$/.test(token)) {
+      iterationCount = token === 'infinite' ? token : Number(token)
+    } else if (DIRECTIONS.includes(token)) {
+      direction = token
+    } else if (FILL_MODES.includes(token)) {
+      fillMode = token
+    } else if (PLAY_STATES.includes(token)) {
+      playState = token
+    } else if (!name) {
+      // Fallback: treat unknown token as animation name
+      name = token
+    }
+  }
+
+  return { name, durations, timingFunction, iterationCount, direction, fillMode, playState }
+}
+
 export const ANIMATION_PROPS = {
-  animation: (val, el) => ({
-    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',
-    animationPlayState: el.props.animationPlayState,
-    animationDirection: el.props.animationDirection
-  }),
+  animation: (val, el) => {
+    // Support CSS shorthand: 'animationName 2s linear infinite'
+    if (isString(val) && val.includes(' ')) {
+      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
+      }
+    }
+    // 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
+    }
+  },
   animationName: (val, el) => ({
     animationName: applyAnimationProps(val, el)
   }),
@@ -34,5 +98,17 @@ export const ANIMATION_PROPS = {
   }),
   animationTimingFunction: (val) => ({
     animationTimingFunction: getTimingFunction(val)
+  }),
+  animationIterationCount: (val) => ({
+    animationIterationCount: val
+  }),
+  animationFillMode: (val) => ({
+    animationFillMode: val
+  }),
+  animationPlayState: (val) => ({
+    animationPlayState: val
+  }),
+  animationDirection: (val) => ({
+    animationDirection: val
   })
 }

package/src/props/defaults.js

@@ -1,4 +1,4 @@
-export const DEFAULT_CSS_PROPERTIES_LIST = [
+export const DEFAULT_CSS_PROPERTIES_LIST = new Set([
   'accentColor',
   'alignContent',
   'alignItems',
@@ -315,4 +315,4 @@ export const DEFAULT_CSS_PROPERTIES_LIST = [
   'wordWrap',
   'writingMode',
   'zIndex'
-]
+])

package/src/props/flex.js

@@ -5,14 +5,13 @@ import { isString } from '@domql/utils'
 export const FLEX_PROPS = {
   flow: (value, el) => {
     const { props } = el
-    // const DISPLAY_FLEX_ALLOWED = ['flex', 'inline-flex']
-    // if (!DISPLAY_FLEX_ALLOWED.includes(props.display)) return
     const { reverse } = props
     if (!isString(value)) return
     let [direction, wrap] = (value || 'row').split(' ')
     if (value.startsWith('x') || value === 'row') direction = 'row'
     if (value.startsWith('y') || value === 'column') direction = 'column'
     return {
+      display: 'flex',
       flexFlow:
         (direction || '') +
         (!direction.includes('-reverse') && reverse ? '-reverse' : '') +
@@ -22,15 +21,11 @@ export const FLEX_PROPS = {
   },
 
   wrap: (value, { props }) => {
-    // const DISPLAY_FLEX_ALLOWED = ['flex', 'inline-flex']
-    // if (!DISPLAY_FLEX_ALLOWED.includes(props.display)) return
-    return { flexWrap: value }
+    return { display: 'flex', flexWrap: value }
   },
 
   align: (value, { props }) => {
-    // const DISPLAY_FLEX_ALLOWED = ['flex', 'inline-flex']
-    // if (!DISPLAY_FLEX_ALLOWED.includes(props.display)) return
     const [alignItems, justifyContent] = value.split(' ')
-    return { alignItems, justifyContent }
+    return { display: 'flex', alignItems, justifyContent }
   }
 }

package/src/props/theme.js

@@ -8,14 +8,15 @@ import {
   transformBoxShadow,
   transformBorder,
   transformBackgroundImage,
+  resolveColorsInGradient,
   transformSizeRatio
 } from '@symbo.ls/scratch'
 
-import { isString } from '@domql/utils'
+import { isDefined, isString } from '@domql/utils'
 
 export const getSystemGlobalTheme = ({ context, state }) => {
-  const rootState = state && state.root
-  return rootState && rootState.globalTheme ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme
+  const theme = state?.root?.globalTheme || context.designSystem?.globalTheme
+  return theme === 'auto' ? null : theme
 }
 
 export const THEME_PROPS = {
@@ -44,6 +45,9 @@ export const THEME_PROPS = {
   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)
     }
@@ -62,9 +66,9 @@ export const THEME_PROPS = {
     if (!val) return
     const file = ctx.files && ctx.files[val]
     if (file && file.content) val = file.content.src
-    return ({
+    return {
       backgroundImage: transformBackgroundImage(val, globalTheme)
-    })
+    }
   },
 
   textStroke: (val) => ({
@@ -88,6 +92,26 @@ export const THEME_PROPS = {
       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)
   }),

package/src/registry.js

@@ -0,0 +1,10 @@
+'use strict'
+
+import { mergeArray } from '@domql/utils'
+import * as preprocs from './props'
+
+import { Text } from '@symbo.ls/atoms'
+
+// TODO: due to recent updates inherit from BOX instead
+export const CSS_PROPS_REGISTRY = mergeArray([Text]).class
+export const CSS_PREPROCS_DEFAULTS = mergeArray(Object.values(preprocs))

package/src/transform/executors.js

@@ -50,10 +50,11 @@ export const usePropsAsCSS = (sourceObj, element, opts) => {
       if (isArray(val)) {
         val = val.reduce((a, c) => merge(a, c), {})
       }
-      const result = CSS_PROPS_REGISTRY[key](val, element, element.state, element.context)
+      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.includes(key)) {
+    } else if (DEFAULT_CSS_PROPERTIES_LIST.has(key)) {
       // they can be grouped
       const result = exec(value, element)
       setToObj(key, { [key]: result })
@@ -81,8 +82,9 @@ export const useSelectorsAsCSS = (sourceObj, element) => {
 export const useCssInProps = (selectorProps, element, opts = { unpack: true }) => {
   const [cssObj, restProps] = usePropsAsCSS(selectorProps, element, opts)
   const selectorsObj = useSelectorsAsCSS(restProps, element)
-  if (Object.keys(selectorsObj).length) {
-    // console.log(opts.unpack, cssObj, selectorsObj)
+  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
   }

package/src/transform/transformers.js

@@ -12,25 +12,13 @@ const applyMediaProps = (key, selectorProps, element) => {
   const { context } = element
   if (!context.designSystem?.MEDIA) return
 
-  // const globalTheme = getSystemGlobalTheme(element)
   const mediaValue = context.designSystem.MEDIA[key.slice(1)]
   const generatedClass = useCssInProps(selectorProps, element)
-  // const name = key.slice(1)
-  // console.log('==generatedClass', generatedClass)
 
-  // Theme handling
-  // if (globalTheme && ['dark', 'light'].includes(name)) {
-  //   return name === globalTheme ? merge(result, generatedClass) : undefined
-  // }
-
-  // Media query construction
   const mediaKey = mediaValue
     ? '@media ' + (mediaValue === 'print' ? mediaValue : `screen and ${mediaValue}`)
     : key
 
-  // result[mediaKey] = generatedClass
-  // console.log(result, mediaKey)
-  // return result[mediaKey]
   return { [mediaKey]: generatedClass }
 }
 
@@ -41,10 +29,6 @@ const applyAndProps = (key, selectorProps, element) => {
 
 const applySelectorProps = (key, selectorProps, element) => {
   const selectorKey = `&${key}`
-  // if (key === ':after') {
-  //   console.log(selectorKey)
-  //   console.log(useCssInProps(selectorProps, element))
-  // }
   return { [selectorKey]: useCssInProps(selectorProps, element) }
 }
 
@@ -84,8 +68,6 @@ export const applyTrueProps = (selectorProps, element) => {
  * Mapping of key prefixes to their handler functions
  */
 export const transformersByPrefix = {
-  // Media and theme handlers
-  // key, props, result, element, isSubtree
   '@': applyMediaProps,
 
   // Selector handlers

package/dist/cjs/package.json

@@ -1,4 +0,0 @@
-{
-  "type": "commonjs",
-  "main": "index.js"
-}

package/dist/cjs/props/animation.js

@@ -1,57 +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 animation_exports = {};
-__export(animation_exports, {
-  ANIMATION_PROPS: () => ANIMATION_PROPS
-});
-module.exports = __toCommonJS(animation_exports);
-var import_utils = require("@domql/utils");
-var import_emotion = require("@symbo.ls/emotion");
-var import_scratch = require("@symbo.ls/scratch");
-const applyAnimationProps = (animation, element) => {
-  const { emotion: ctxEmotion } = element.context;
-  const { keyframes } = ctxEmotion || import_emotion.emotion;
-  if ((0, import_utils.isObject)(animation)) return { animationName: keyframes(animation) };
-  const { ANIMATION } = element.context && element.context.designSystem;
-  const record = ANIMATION[animation];
-  return keyframes(record);
-};
-const ANIMATION_PROPS = {
-  animation: (val, el) => ({
-    animationName: applyAnimationProps(val, el),
-    animationDuration: (0, import_scratch.getTimingByKey)(el.props.animationDuration || "A").timing,
-    animationDelay: (0, import_scratch.getTimingByKey)(el.props.animationDelay || "0s").timing,
-    animationTimingFunction: (0, import_scratch.getTimingFunction)(el.props.animationTimingFunction || "ease"),
-    animationFillMode: el.props.animationFillMode || "both",
-    animationPlayState: el.props.animationPlayState,
-    animationDirection: el.props.animationDirection
-  }),
-  animationName: (val, el) => ({
-    animationName: applyAnimationProps(val, el)
-  }),
-  animationDuration: (val) => ({
-    animationDuration: (0, import_scratch.getTimingByKey)(val).timing
-  }),
-  animationDelay: (val) => ({
-    animationDelay: (0, import_scratch.getTimingByKey)(val).timing
-  }),
-  animationTimingFunction: (val) => ({
-    animationTimingFunction: (0, import_scratch.getTimingFunction)(val)
-  })
-};