Stitches Create Scale Variant

stitches-create-scale-variant.tsx

import { CSS } from '@stitches/react'
import { theme } from './stitches.config'

function createScaleVariant<Scale extends string & keyof typeof theme>(
  property: string,
  scale: Scale,
): Record<keyof typeof theme[Scale], CSS> {
  return Object.keys(theme.space).reduce(
    (reduced, value) => ({
      ...reduced,
      [value]: {
        [property]: `$${scale}$${value}`,
      },
    }),
    {} as Record<keyof typeof theme[Scale], CSS>,
  )
}

  
  /* m: createScaleVariant('margin', 'space'),
    mi: createScaleVariant('marginInline', 'space'),
    mis: createScaleVariant('marginInlineStart', 'space'),
    mie: createScaleVariant('marginInlineEnd', 'space'),
    mb: createScaleVariant('marginBlock', 'space'),
    mbs: createScaleVariant('marginBlockStart', 'space'),
    mbe: createScaleVariant('marginBlockEnd', 'space'),
    p: createScaleVariant('padding', 'space'),
    pi: createScaleVariant('paddingInline', 'space'),
    pis: createScaleVariant('paddingInlineStart', 'space'),
    pie: createScaleVariant('paddingInlineEnd', 'space'),
    pb: createScaleVariant('paddingBlock', 'space'),
    pbs: createScaleVariant('paddingBlockStart', 'space'),
    pbe: createScaleVariant('paddingBlockEnd', 'space'), */