Recipes with Sprinkles best practices

[MarcoDaniels]

Hi 👋

I'm looking for some opinions in best practices on using recipes and sprinkles.

Currently I have one "big" sprinkles that defines all the possible style utilities with media query conditions, something like:

export const styles = createSprinkles(
  defineProperties({
    defaultCondition: 'screenXS',
    conditions: {
      screenXS: {},
      screenS: { '@media': `(min-width: ${breakpoints.s}px)` },
      screenM: { '@media': `(min-width: ${breakpoints.m}px)` },
      screenL: { '@media': `(min-width: ${breakpoints.l}px)` },
      screenXL: { '@media': `(min-width: ${breakpoints.xl}px)` },
    },
    properties: {
      color: themeVars.color,
      background: themeVars.color,
      borderColor: themeVars.color,
      opacity: { none: '0', full: '1' },
      paddingTop: themeVars.space,
      paddingBottom: themeVars.space,
      paddingLeft: themeVars.space,
      paddingRight: themeVars.space,
      .....
    },
    shorthands: {
      margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
      padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
      .....
    },
  })
)

then I use this styles sprinkle to create a recipe like:

export const button = recipe({
  base: [styles({ background: 'none', borderWidth: 0 })],
  variants: {
    type: {
      icon: [styles({ padding: { screenM: 5 }, paddingRight: { screenM: 8 } })],
    },
  },
  defaultVariants: {},
})

Now I'm just wondering if this can have any performance/design issues in terms of how many class names it will create due to the raising complexity of the recipe?

[bwyx]

hi, new VE user here. I've divided sprinkles by style usage like below and I found it handy for me.

// box.css.ts

const box = defineProperties({
  properties: {
    display: ['none', 'block', 'inline-block', 'flex', 'inline-flex'],
    position: ['relative', 'absolute', 'fixed', 'sticky'],
    flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
    flexGrow: [0, 1, 2, 3, 4, 5],
    ...
  }
})

export default createSprinkles(box)

// text.css.ts

const properties = defineProperties({
  properties: {
    fontFamily: fonts,
    fontWeight: fontWeights,
    lineHeight: lineHeights,
    letterSpacing: letterSpacings,
    textAlign: ['left', 'center', 'right'],
    ...
  }
})

const responsiveProperties = defineProperties({
  defaultCondition: 'initial',
  conditions: {
    initial: {},
    sm: { '@media': media.sm },
    md: { '@media': media.md },
    ...
  },
  properties: {
    fontSize: fontSizes
  }
})

export default createSprinkles(properties, responsiveProperties)

dividing sprinkles into smaller utilities like that helps me to manage generated CSS size.