addFunctionSerializer has no documentation?

[wmertens]

See title :-) How to use addFunctionSerializer?

[wmertens]

For posterity: Here's a brief explanation https://youtu.be/SeVF1OFy5_I?t=929

[wmertens]

But I don't understand what the first argument is

[wmertens]

Ok, I get it now: addFunctionSerializer adds the metadata VE needs to import the function once compiled, and the first argument is the same result you want to have once compiled.

For example, this allows you to do styled.span({color: red}) and get a component back from the css:

import { style, CSSProperties } from '@vanilla-extract/css';
import { addFunctionSerializer } from '@vanilla-extract/css/functionSerializer';
import { styled as realStyled } from './styled';

type StyledProxy = {
  [tag: string]: (css: CSSProperties) => ReturnType<typeof realStyled>;
};

export const styled: StyledProxy = new Proxy(
  {},
  {
    get(_this, tag) {
      return (css: CSSProperties) => {
        const className = style(css);
        const Lite = realStyled(tag, className);

        // This tells VE how to recreate Lite in the compiled CSS
        addFunctionSerializer(Lite, {
          importPath: './styled',
          importName: 'styled',
          // @ts-ignore
          args: [tag, className],
        });

        return Lite;
      };
    },
  }
);

[mattcompiles]

Yeah that's right. It's definitely strange to get your head around. We definitely plan on documenting it. Just haven't got around to it as yet.