css-in-props 3.14.0 → 3.14.3

package/index.js

@@ -1 +0,0 @@
-export * from './src/index.js'

package/src/index.js

@@ -1,6 +0,0 @@
-'use strict'
-
-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,119 +0,0 @@
-'use strict'
-
-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']
-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)
-
-let _animCounter = 0
-const applyAnimationProps = (animation, element) => {
-  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
-}
-
-/**
- * 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: 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) => {
-    // 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.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.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) => ({
-    animationName: applyAnimationProps(val, el)
-  }),
-  animationDuration: (val) => ({
-    animationDuration: getTimingByKey(val).timing
-  }),
-  animationDelay: (val) => ({
-    animationDelay: getTimingByKey(val).timing
-  }),
-  animationTimingFunction: (val) => ({
-    animationTimingFunction: getTimingFunction(val)
-  }),
-  animationIterationCount: (val) => ({
-    animationIterationCount: val
-  }),
-  animationFillMode: (val) => ({
-    animationFillMode: val
-  }),
-  animationPlayState: (val) => ({
-    animationPlayState: val
-  }),
-  animationDirection: (val) => ({
-    animationDirection: val
-  })
-}

package/src/props/block.js

@@ -1,183 +0,0 @@
-'use strict'
-
-import { isUndefined, isString } from '@symbo.ls/utils'
-
-import {
-  getSpacingBasedOnRatio,
-  transformSize,
-  transformBorderRadius,
-  transformSizeRatio,
-  transfromGap
-} from '@symbo.ls/scratch'
-
-export const BLOCK_PROPS = {
-  show: (val) => !val ? ({ display: 'none !important' }) : undefined,
-
-  hide: (val) => val ? ({ display: 'none !important' }) : undefined,
-
-  height: (val, el) => transformSizeRatio('height', val, el),
-  width: (val, el) => transformSizeRatio('width', val, el),
-
-  boxSizing: (val) => !isUndefined(val)
-    ? ({ boxSizing: val })
-    : { boxSizing: 'border-box' },
-
-  boxSize: (val) => {
-    if (!isString(val)) return
-    const [height, width] = val.split(' ')
-    return {
-      ...transformSize('height', height),
-      ...transformSize('width', width || height)
-    }
-  },
-
-  inlineSize: (val, el) => transformSizeRatio('inlineSize', val, el),
-  blockSize: (val, el) => transformSizeRatio('blockSize', val, el),
-
-  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(' ')
-    return {
-      ...transformSize('minWidth', minWidth),
-      ...transformSize('maxWidth', maxWidth || minWidth)
-    }
-  },
-
-  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(' ')
-    return {
-      ...transformSize('minHeight', minHeight),
-      ...transformSize('maxHeight', maxHeight || minHeight)
-    }
-  },
-
-  size: (val) => {
-    if (!isString(val)) return
-    const [inlineSize, blockSize] = val.split(' ')
-    return {
-      ...transformSizeRatio('inlineSize', inlineSize),
-      ...transformSizeRatio('blockSize', blockSize || inlineSize)
-    }
-  },
-
-  minBlockSize: (val, el) => transformSizeRatio('minBlockSize', val, el),
-  minInlineSize: (val, el) => transformSizeRatio('minInlineSize', val, el),
-
-  maxBlockSize: (val, el) => transformSizeRatio('maxBlockSize', val, el),
-  maxInlineSize: (val, el) => transformSizeRatio('maxInlineSize', val, el),
-
-  minSize: (val) => {
-    if (!isString(val)) return
-    const [minInlineSize, minBlockSize] = val.split(' ')
-    return {
-      ...transformSize('minInlineSize', minInlineSize),
-      ...transformSize('minBlockSize', minBlockSize || minInlineSize)
-    }
-  },
-
-  maxSize: (val) => {
-    if (!isString(val)) return
-    const [maxInlineSize, maxBlockSize] = val.split(' ')
-    return {
-      ...transformSize('maxInlineSize', maxInlineSize),
-      ...transformSize('maxBlockSize', maxBlockSize || maxInlineSize)
-    }
-  },
-
-  borderWidth: (val, el) => transformSizeRatio('borderWidth', val, el),
-
-  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(' ')
-    return {
-      ...transformSize('paddingInlineStart', paddingInlineStart),
-      ...transformSize('paddingInlineEnd', paddingInlineEnd || paddingInlineStart)
-    }
-  },
-  paddingBlock: (val) => {
-    if (!isString(val)) return
-    const [paddingBlockStart, paddingBlockEnd] = val.split(' ')
-    return {
-      ...transformSize('paddingBlockStart', paddingBlockStart),
-      ...transformSize('paddingBlockEnd', paddingBlockEnd || paddingBlockStart)
-    }
-  },
-  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(' ')
-    return {
-      ...transformSize('marginInlineStart', marginInlineStart),
-      ...transformSize('marginInlineEnd', marginInlineEnd || marginInlineStart)
-    }
-  },
-  marginBlock: (val, el) => {
-    if (!isString(el.marginBlock)) return
-    const [marginBlockStart, marginBlockEnd] = el.marginBlock.split(' ')
-    return {
-      ...transformSize('marginBlockStart', marginBlockStart),
-      ...transformSize('marginBlockEnd', marginBlockEnd || marginBlockStart)
-    }
-  },
-  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, el) => getSpacingBasedOnRatio(el, 'columnGap', val),
-  rowGap: (val, el) => getSpacingBasedOnRatio(el, 'rowGap', val),
-
-  flexWrap: (val) => ({
-    display: 'flex',
-    flexWrap: val
-  }),
-  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'
-    if (val.startsWith('y') || val === 'column') direction = 'column'
-    return {
-      display: 'flex',
-      flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '')
-    }
-  },
-  flexAlign: (val) => {
-    if (!isString(val)) return
-    const [alignItems, justifyContent] = val.split(' ')
-    return {
-      display: 'flex',
-      alignItems,
-      justifyContent
-    }
-  },
-
-  round: (val, el) => transformBorderRadius(val ?? el.borderRadius, el, 'round'),
-  borderRadius: (val, el) => transformBorderRadius(val ?? el.round, el, 'borderRadius')
-}

package/src/props/defaults.js

@@ -1,318 +0,0 @@
-export const DEFAULT_CSS_PROPERTIES_LIST = new Set([
-  'accentColor',
-  'alignContent',
-  'alignItems',
-  'alignSelf',
-  'alignmentBaseline',
-  'all',
-  'animation',
-  'animationDelay',
-  'animationDirection',
-  'animationDuration',
-  'animationFillMode',
-  'animationIterationCount',
-  'animationName',
-  'animationPlayState',
-  'animationTimingFunction',
-  'appearance',
-  'aspectRatio',
-  'backdropFilter',
-  'backfaceVisibility',
-  'background',
-  'backgroundAttachment',
-  'backgroundBlendMode',
-  'backgroundClip',
-  'backgroundColor',
-  'backgroundImage',
-  'backgroundOrigin',
-  'backgroundPosition',
-  'backgroundPositionX',
-  'backgroundPositionY',
-  'backgroundRepeat',
-  'backgroundRepeatX',
-  'backgroundRepeatY',
-  'backgroundSize',
-  'baselineShift',
-  'blockSize',
-  'border',
-  'borderBlock',
-  'borderBlockColor',
-  'borderBlockEnd',
-  'borderBlockEndColor',
-  'borderBlockEndStyle',
-  'borderBlockEndWidth',
-  'borderBlockStart',
-  'borderBlockStartColor',
-  'borderBlockStartStyle',
-  'borderBlockStartWidth',
-  'borderBlockStyle',
-  'borderBlockWidth',
-  'borderBottom',
-  'borderBottomColor',
-  'borderBottomLeftRadius',
-  'borderBottomRightRadius',
-  'borderBottomStyle',
-  'borderBottomWidth',
-  'borderCollapse',
-  'borderColor',
-  'borderImage',
-  'borderImageOutset',
-  'borderImageRepeat',
-  'borderImageSlice',
-  'borderImageSource',
-  'borderImageWidth',
-  'borderLeft',
-  'borderLeftColor',
-  'borderLeftStyle',
-  'borderLeftWidth',
-  'borderRadius',
-  'borderRight',
-  'borderRightColor',
-  'borderRightStyle',
-  'borderRightWidth',
-  'borderSpacing',
-  'borderStyle',
-  'borderTop',
-  'borderTopColor',
-  'borderTopLeftRadius',
-  'borderTopRightRadius',
-  'borderTopStyle',
-  'borderTopWidth',
-  'borderWidth',
-  'bottom',
-  'boxDecorationBreak',
-  'boxShadow',
-  'boxSizing',
-  'breakAfter',
-  'breakBefore',
-  'breakInside',
-  'captionSide',
-  'caretColor',
-  'clear',
-  'clip',
-  'clipPath',
-  'color',
-  'colorAdjust',
-  'colorInterpolation',
-  'colorInterpolationFilters',
-  'colorRendering',
-  'columnCount',
-  'columnFill',
-  'columnGap',
-  'columnRule',
-  'columnRuleColor',
-  'columnRuleStyle',
-  'columnRuleWidth',
-  'columnSpan',
-  'columnWidth',
-  'columns',
-  'contain',
-  'content',
-  'counterIncrement',
-  'counterReset',
-  'cursor',
-  'direction',
-  'display',
-  'emptyCells',
-  'filter',
-  'flex',
-  'flexBasis',
-  'flexDirection',
-  'flexFlow',
-  'flexGrow',
-  'flexShrink',
-  'flexWrap',
-  'float',
-  'font',
-  'fontFamily',
-  'fontFeatureSettings',
-  'fontKerning',
-  'fontLanguageOverride',
-  'fontSize',
-  'fontSizeAdjust',
-  'fontStretch',
-  'fontStyle',
-  'fontVariant',
-  'fontVariantAlternates',
-  'fontVariantCaps',
-  'fontVariantEastAsian',
-  'fontVariantNumeric',
-  'fontVariantPosition',
-  'fontWeight',
-  'fontVariationSettings',
-  'fontSynthesis',
-  'forcedColorAdjust',
-  'gap',
-  'grid',
-  'gridArea',
-  'gridAutoColumns',
-  'gridAutoFlow',
-  'gridAutoRows',
-  'gridColumn',
-  'gridColumnEnd',
-  'gridColumnGap',
-  'gridColumnStart',
-  'gridGap',
-  'gridRow',
-  'gridRowEnd',
-  'gridRowGap',
-  'gridRowStart',
-  'gridTemplate',
-  'gridTemplateAreas',
-  'gridTemplateColumns',
-  'gridTemplateRows',
-  'height',
-  'hyphens',
-  'imageOrientation',
-  'imageRendering',
-  'imeMode',
-  'inset',
-  'insetBlock',
-  'insetBlockEnd',
-  'insetBlockStart',
-  'insetInline',
-  'insetInlineEnd',
-  'insetInlineStart',
-  'initialLetter',
-  'isolation',
-  'justifyContent',
-  'justifyItems',
-  'justifySelf',
-  'left',
-  'letterSpacing',
-  'lineBreak',
-  'lineClamp',
-  'lineHeight',
-  'listStyle',
-  'listStyleImage',
-  'listStylePosition',
-  'listStyleType',
-  'margin',
-  'marginBottom',
-  'marginLeft',
-  'marginRight',
-  'marginTop',
-  'marginBlock',
-  'marginBlockEnd',
-  'marginBlockStart',
-  'marginInline',
-  'marginInlineEnd',
-  'marginInlineStart',
-  'mask',
-  'maskBorder',
-  'maskBorderImage',
-  'maskBorderOutset',
-  'maskBorderRepeat',
-  'maskBorderSlice',
-  'maskBorderSource',
-  'maskBorderWidth',
-  'maskClip',
-  'maskComposite',
-  'maskImage',
-  'maskOrigin',
-  'maskPosition',
-  'maskRepeat',
-  'maskSize',
-  'maskType',
-  'maxBlockSize',
-  'maxHeight',
-  'maxInlineSize',
-  'maxWidth',
-  'minBlockSize',
-  'minHeight',
-  'minInlineSize',
-  'minWidth',
-  'mixBlendMode',
-  'objectFit',
-  'objectPosition',
-  'objectViewBox',
-  'offset',
-  'offsetDistance',
-  'offsetPath',
-  'offsetRotate',
-  'opacity',
-  'order',
-  'orientation',
-  'outline',
-  'outlineColor',
-  'outlineOffset',
-  'outlineStyle',
-  'outlineWidth',
-  'overflow',
-  'overflowAnchor',
-  'overflowClip',
-  'overflowScrolling',
-  'overflowWrap',
-  'overflowX',
-  'overflowY',
-  'padding',
-  'paddingBottom',
-  'paddingLeft',
-  'paddingRight',
-  'paddingTop',
-  'pageBreakAfter',
-  'pageBreakBefore',
-  'pageBreakInside',
-  'paintOrder',
-  'perspective',
-  'perspectiveOrigin',
-  'placeContent',
-  'placeItems',
-  'placeSelf',
-  'pointerEvents',
-  'position',
-  'resize',
-  'right',
-  'rotate',
-  'rowGap',
-  'scrollBehavior',
-  'scrollPadding',
-  'scrollSnapAlign',
-  'scrollSnapType',
-  'scrollbarColor',
-  'scrollbarWidth',
-  'shapeImageThreshold',
-  'shapeMargin',
-  'shapeOutside',
-  'tabSize',
-  'tableLayout',
-  'textAlign',
-  'textAlignLast',
-  'textDecoration',
-  'textDecorationColor',
-  'textDecorationLine',
-  'textDecorationSkipInk',
-  'textDecorationStyle',
-  'textDecorationThickness',
-  'textIndent',
-  'textOverflow',
-  'textShadow',
-  'textTransform',
-  'textUnderlineOffset',
-  'top',
-  'transform',
-  'transformOrigin',
-  'transformStyle',
-  'transition',
-  'transitionDelay',
-  'transitionDuration',
-  'transitionProperty',
-  'transitionTimingFunction',
-  'translate',
-  'translateX',
-  'translateY',
-  'translateZ',
-  'unicodeBidi',
-  'userSelect',
-  'verticalAlign',
-  'visibility',
-  'whiteSpace',
-  'widows',
-  'width',
-  'willChange',
-  'wordBreak',
-  'wordSpacing',
-  'wordWrap',
-  'writingMode',
-  'zIndex'
-])

package/src/props/flex.js

@@ -1,30 +0,0 @@
-'use strict'
-
-import { isString } from '@symbo.ls/utils'
-
-export const FLEX_PROPS = {
-  flow: (value, el) => {
-    const reverse = el.reverse
-    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' : '') +
-        ' ' +
-        (wrap || '')
-    }
-  },
-
-  wrap: (value, el) => {
-    return { display: 'flex', flexWrap: value }
-  },
-
-  align: (value, el) => {
-    const [alignItems, justifyContent] = value.split(' ')
-    return { display: 'flex', alignItems, justifyContent }
-  }
-}

package/src/props/font.js

@@ -1,16 +0,0 @@
-'use strict'
-
-import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch'
-
-export const FONT_PROPS = {
-  fontSize: (value) => {
-    return getFontSizeByKey(value) || value
-  },
-  fontFamily: (value) => ({
-    fontFamily: getFontFamily(value) || value
-  }),
-  fontWeight: (value) => ({
-    fontWeight: value,
-    fontVariationSettings: '"wght" ' + value
-  })
-}

package/src/props/grid.js

@@ -1,21 +0,0 @@
-'use strict'
-
-export const GRID_PROPS = {
-  area: (value) => ({ gridArea: value }),
-  template: (value) => ({ gridTemplate: value }),
-  templateAreas: (value) => ({ gridTemplateAreas: value }),
-
-  column: (value) => ({ gridColumn: value }),
-  columns: (value) => ({ gridTemplateColumns: value }),
-  templateColumns: (value) => ({ gridTemplateColumns: value }),
-  autoColumns: (value) => ({ gridAutoColumns: value }),
-  columnStart: (value) => ({ gridColumnStart: value }),
-
-  row: (value) => ({ gridRow: value }),
-  rows: (value) => ({ gridTemplateRows: value }),
-  templateRows: (value) => ({ gridTemplateRows: value }),
-  autoRows: (value) => ({ gridAutoRows: value }),
-  rowStart: (value) => ({ gridRowStart: value }),
-
-  autoFlow: (value) => ({ gridAutoFlow: value })
-}