Passing properties to a style() function

[simpel]

Hi all! The code below does not work. But how to solve it? I want to achieve a Styles API, much like Mantine UI where the user can pass a object of defined slots that should be applied to the component. styles is the object in question here.

My initial thought was to create a function in the .css.ts file but that does not work and all I get is "can't export objects, arrays, strings, numbers and null/undefined". I guess I should somehow use the addFunctionSerializer but I dont understand how.

The error

web:dev:  ⨯ Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:
web:dev: 
web:dev: - You may have created styles outside of a '.css.ts' context
web:dev: - You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
web:dev:     at Button (../../packages/ui/src/button/Button.tsx:15:79)
web:dev:     at stringify (<anonymous>)
web:dev: digest: "352358116"
web:dev: null

// Button.tsx

import { TComponent } from '../@types/TComponent';
import { label, root } from './Button.css';
import { TButton, TStyles } from './TButton';
import { style } from '@vanilla-extract/css';

export function Button(
  {children, styles, as: Component = "button", ...rest }: TComponent<"button", TButton, TStyles>,
) {
  return (
    <Component
      className={style([root, styles?.root ?? {}])}
      {...rest}
    >
      <span className={style([label, styles?.label ?? {}])}>

      {children}
      </span>
    </Component>
  );
}

//Button.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({
  background: "red"
});

export const label = style({
  margin: 100,
  padding: 100,
  display: "block",
  background: "yellow",
    color: "blue",

})

Usage

<Button as="button" styles={{
   root: {
      color: "orange"
   }
}}>
   test
</Button>

[askoufis]

@simpel Is what you're trying to achieve similar to Vanilla Extract recipes?