Type safety in property values

[TowardsDeath]

I‘m trying Panda CSS to see if it‘s something we could use in our design system, instead of Vanilla Extract. I‘m having trouble getting type-checking in CSS values to work.

From the documentation:

Panda is built with TypeScript and provides type safety for all style properties and shorthands.

Does this mean only the properties are type-checked, and the values aren‘t?

This fails like I would expect:

css({
  positio: 'absolut'
})

Type error: Argument of type '{ positio: string; }' is not assignable to parameter of type 'SystemStyleObject'.
  Object literal may only specify known properties, but 'positio' does not exist in type 'SystemStyleObject'. Did you mean to write 'position'?

> 11 |   positio: 'absolut',

This passes, even though the value is invalid:

css({
  position: 'absolut'
})

Am I doing something wrong, or is this how Panda CSS behaves?

[anubra266]

@TowardsDeath css allows arbitrary values naturally. For example, height: 4px we can't have typescript restrict all these values right.
So if you want to prevent arbitrary values. You should use strictTokens.

[TowardsDeath]

@anubra266 thanks for your reply.

css allows arbitrary values naturally. For example, height: 4px we can't have typescript restrict all these values right.

No, of course, but lots of CSS properties have a fixed set of possible values, in which case type checking would be a helpful addition. They come with CSSType, which Panda already uses, if I'm not mistaken.

Vanilla Extract does catch these errors for these properties, and still allows other values for other properties, like height: 4px. ¹

css/index.css.ts:10:3 - error TS2820: Type '"absolut"' is not assignable to type 'CSSVarFunction | Position | (CSSVarFunction | Position | undefined)[] | undefined'. Did you mean '"absolute"'?

So if you want to prevent arbitrary values. You should use strictTokens.

For some reason, this doesn't do anything in my project (default setup with Next.js app router and Panda). If it works, does this throw an error when someone makes a mistake in the value, e.g. position: absolut?

---

¹ This is not to discredit all of the lovely work and effort that has been put into Panda CSS, nor am I implying that Vanilla Extract is better. I will still be using Panda for my personal website. It's just that type safety is more important at work, so I'd like to make an informed decision about the future of our component library.

[tombstonedguy]

it seems that the strictTokens-Option doesn´t work anymore from version 0.11 on.
see Issue

[anubra266]

@TowardsDeath is this still an issue for you?

[TowardsDeath]

Yes, strictTokens: true does not catch position: 'absolut'. Would you consider expanding the type definitions by using the types from CSSType, instead of PropertyValue<'position'>? In the case of position:

export type Position = Globals | "-webkit-sticky" | "absolute" | "fixed" | "relative" | "static" | "sticky";

Source: https://github.com/frenic/csstype/blob/master/index.d.ts#L19411

[anubra266]

cc @astahmer

[astahmer]

hey, late to the party but this seems fixed

[TowardsDeath]

Yes, thanks! Just upgraded to 0.15.5 and can confirm the type checks are more strict now.