How to make sprinkles shorthands for multiple properties

[mattstobbs]

When using sprinkles, is it possible to create shorthands to combine multiple properties? For example, tailwindcss has the class:

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

Is it possible to create a 'textXS' shorthand? Kind of like a recipe but less specific.

[tmm]

Yup! Check out the docs.

const properties = defineProperties({
  conditions: {
    // ...
  },
  properties: {
    textStyle: {
      xs: {
        fontSize: '0.75rem',
        lineHeight: '1rem',
      },
      sm: {
        fontSize: '1rem',
        lineHeight: '1.25rem',
      },
      md: {
        fontSize: '1.25rem',
        lineHeight: '1.5rem',
      },
      // ...
    },
  },
})

Usage:

export const labelText = sprinkles({
  textStyle: 'sm',
})

[mattstobbs]

Ah, that's perfect. For some reason, I thought the properties could only be CSS properties, I didn't realise they could be any value. Thanks! 😁

[rothsandro]

Did this work for you? I get the error "Object literal may only specify known properties, and 'textStyle' does not exist in type 'AtomicProperties'".

Strangely it works when I add a valid CSS prop before the custom prop, like this:

const properties = defineProperties({
  properties: {
    margin: {}, // Breaks when removing this
    textStyle: { /* ... */ },
  },
})

I'm not sure if custom props are really supported here. It seems more like a bug that textStyle is accepted with a preceding valid CSS property.

[mantagen]

As a follow up question, if you want the prop to take a boolean value, is that possible? E.g. in order to have the following:

<Box visuallyHidden>
// or
const screenReaderOnly = sprinkles({
  visuallyHidden: true,
})

Using the above pattern can only assign numbers/string values.