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.

[JoaoCnh]

has there been any updates regarding this?

[askoufis]

Since finding this answer in a previous discussion on the topic, my opinion has changed. I think the restriction that theme values must always be strings is ideal as it clearly signals that you're defining a value that is going to be interpolated as-is inside any CSS property you use it in. It makes the decision to add (or not add) units intentional.

For something that probably doesn't change that often, like a theme, I don't think having to write .toString() for a few values is much of a tradeoff. If for whatever reason you need to define lots of font weight theme tokens (or some other unitless value), then some kind of wrapper function that converts those values to strings would be useful, but is not really something that would be implemented within Vanilla Extract.