Use sprinkles in a variant

[nayaabkhan]

Hi, thanks a lot for the libraries! I'm enjoying the experience.

I was trying to dive into Sprinkles and wondering if it is possible (yet) to use them with variants?

import { styleVariants } from '@vanilla-extract/css'
import { atoms } from '@themes/atoms.css' // <- exports sprinkles

export const fontVariants = styleVariants({
  heading: atoms({
    fontSize: 'base',
    fontWeight: 'bold'
  }),
  subheading: atoms({
    fontSize: 'small',
    color: 'text.muted',
  }),
})

This results in a TS error:
Type 'string' is not assignable to type 'ComplexStyleRule'

[nayaabkhan]

I removed the usage of styleVariants and I think it works as expected. Wondering if this is non-idiomatic in any way?

import { atoms } from '@themes/atoms.css'

export const fontVariants = {
  heading: atoms({
    fontSize: 'base',
    fontWeight: 'bold'
  }),
  subheading: atoms({
    fontSize: 'small',
    color: 'text.muted',
  }),
}

[nayaabkhan]

Marking it answered for the time being.

[mattcompiles]

This is completely valid usage. You'd only want the styleVariants here if you want to combine the sprinkles with custom styles.