How to design a third-part library api based on vanilla-extract

[MakhBeth]

Hi!
I'm the maintainer of Super-GiGi, a little Sass library to create a flex-based custom grid system.

I wanted to do something similar with a TypeScript preprocessor, and I really like vanilla-extract 😄

The question is, how to design the API?

My first intention was to implement something like:

const myClass = style({...gridColumn(6), color: "red"})

that will only generate the object with all the needed properties and generate a CSS like:

box-sizing: border-box;
display: flex;
flex-direction: column;
padding-left: calc(1.875rem / 2);
padding-right: calc(1.875rem / 2);
flex: 0 0 auto;
width: 50%;

That's really easy to implement, I have only to translate the Sass Mixins in TypeScript functions. But I'm not convinced about the DX.

Maybe a better design is to do this:

<div className={gridColumn(6)} />

To do that I can create a constructor function that takes options and the vanilla-extract style function, and returns all the needed Super-GigifFunctions.
But I've seen that you released Sprikles

and I supposed that maybe a better API can be something like:

<div
  className={atoms({
    gridColumn: 6
  })}
>

But I don't know if that is possible with Sprinkles itself if I have to make a High Order Function or to use a Sprinkle atom approach.

What do you think about that?

[markdalgleish]

Sorry, I'm not familiar enough with your library to say whether Sprinkles can handle your use case or not, but if you want your library to support exporting functions, you can check out how Sprinkles does it by relying on a (currently) undocumented plugin feature called "recipes", where you attach a static data structure to the function describing how to regenerate the function at runtime.

[MakhBeth]

Great. That's exactly what I was looking for.
I will give it a try🤟