createTheme() doesn't accept number tokens

[hbmuller]

I'm trying to create a theme that includes unitless numbers to be used with fontWeight.

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

export const [themeClass, vars] = createTheme({
  font: {
    family: {
      body: "Inter" // This works fine
    },
    weight: {
      normal: 400, // These give a TS error (Type 'number' is not assignable to type 'string | Tokens'.)
      bold: 700
    },
  },
});

Is there any particular reason not to accept these in the theme, even if they will be unitless when applied?

Also, any suggestions how to go about it?

[hayawata3626]

@hbmuller
I also empathize with this.
Were you able to resolve this issue?

[askoufis]

Actually, createTheme ends up calling assignVars, which stringifies all the properties, long before transformCss does the UNITLESS check. Basically, this already works just fine at runtime, so it really seems like a limitation of the types. I can't think of a reason not to allow this.

EDIT: Additionally, there are comments about explicitly not pixelifying CSS variables. My guess is that you don't want to do this because css variables can be interpolated in numerous ways that could break if px strings were appended to them.