Partial Contracts Type Safety

[joerobot]

Hi,

I'm creating a system with a few different themes, these themes can be composed of modular chunks using assignVars. Here's an example:

const vars = createThemeContract({
  space: {...},
  radius: {...},
  fontSize: {...},
  lineHeight: {...},
})

const base = assignVars(
  { space: vars.space, radius: vars.radius},
  {
    space: {...},
    radius: {...},
  }
)

const typefaceA = assignVars(
  vars.typography,
  {
    fontSize: {...},
    lineHeight: {...},
  }
)

const typefaceB = assignVars(
  vars.typography,
  {...} // same as typefaceB but different values
)

const themeA = style({
  vars: {
    ...base,
    ...typefaceA,
  }
})


const themeB = style({
  vars: {
    ...base,
    ...typefaceB,
  }
})

Is there a way I can verify that variables assigned to my theme class meet the entire theme contract? Ideally if someone (me) composes an incomplete theme, this is flagged as a TS error. To continue the example:

const themeC = style({
  vars: {
    ...base
  }
}) // => !! You're missing "fontSize" and "lineHeight" !!

Any thoughts from the community welcome!

[askoufis]

You can use assignVars in your style call to validate that the variables you're providing match your theme.

const vars = createThemeContract({
  space: {...},
  radius: {...},
  fontSize: {...},
  lineHeight: {...},
})

const base = assignVars(
  { space: vars.space, radius: vars.radius},
  {
    space: {...},
    radius: {...},
  }
)

const themeC = style({
  // !! You're missing "fontSize" and "lineHeight" !!
  vars: assignVars(vars, base)
})

[joerobot]

Cheers for this @askoufis 🍻

I'm getting a mismatch between the return type of assignVars (Record<CSSVarFunction, string>) and the expected value for tokens (MapLeafNodes). So I'm guessing you meant:

const base = {...} // plain object

const theme = style({
  vars: assignVars(vars, base)
})

Whilst this is preferable to my initial example, I'm now missing type safety in those modular theme chunks. The best option I've come up with so far is to have a mostly redundant assignVars declaration alongside the chunk:

/* I serve as a check that we have all of the necessary vars */
export const baseVars = assignVars({ base: vars.base }, base) 

Any other options you would consider here?

[joerobot]

Another option that just came to me is:

const space: Pick<typeof vars, "space"> = {
  space: {
    sm: 'var(--size-space-12)',
    md: 'var(--size-space-16)',
    lg: 'var(--size-space-20)',
  },
};

But this would only allow you to reference existing CSS vars for values... and maybe wouldn't nest? Eg the following would be a problem:

const space: Pick<typeof vars, "space"> = {
  space: {
    sm: '12px',
    md: '16px',
    lg: '20px',
  },
};

[askoufis]

Oh, I think we've both just been circling around the createTheme API, which is really just a wrapper around creating a style with assignVars anyway, with the option to pass a contract if you want. I feel like it would be simpler to just derive some types from partial theme objects and then stitch themes together with createTheme, rather than passing objects of CSSVarFunctions around:

import { createTheme } from "@vanilla-extract/css";

const base = {
  space: { small: "1", large: "2" },
  radius: { small: "1", large: "2" },
};

type BaseTokens = typeof base;

const typefaceA = {
  fontSize: { small: "1", large: "2" },
  lineHeight: { small: "1", large: "2" },
};

type TypefaceTokens = typeof typefaceA;

type Theme = BaseTokens & TypefaceTokens;

const [themeA, vars] = createTheme({
  ...base,
  ...typefaceA,
});

const typefaceB = {
  fontSize: { small: "3", large: "4" },
  lineHeight: { small: "3", large: "4" },
} satisfies TypefaceTokens;

const themeB = createTheme(vars, { ...base, ...typefaceB });

Is that what you're after?

[joerobot]

Perfecto! I had come up with something similar but this is more elegant ✨