css-in-props 3.14.1 → 3.14.4

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 })
-}

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]
-    }
-  }
-}