Tokens not parsed

[tomtobac]

Hi! Sometimes I am facing this issue:

Looks like somehow the tokens doesn't get parsed.. I usually update manually each @twilio-paste package and sometimes it works.
Which is the proper way or steps to fix this?
Thanks

[tomtobac]

Ok, I figure out. I had to use size30 instead of space30... Its weird that Typescript didn't complain :(

[vankhoawin]

I've noticed this too when I was trying to add tokens for the Flex component

[SiTaggart]

On what component are you experiencing this @tomtobac and @vnguyen94?

[tomtobac]

<Truncate />

[SiTaggart]

Yeah, OK I thought you might say something like Truncate.

It follows my initial hunch, which is we effectively highjack a few global HTML attributes such as width, height and size and convert them to styling props. This works really well on the Styling primitives.

For other components we either try and extend the typings of the closest related HTML element that is going to be rendered, or for some older components like Truncate which are just styled components, we get the typings from Emotion for the HTMl element. Which I believe is where the confusion starts raising its head.

For components where we extending the typings on the HTML element, we aren't removing the highjacked attributes. Typescript believes they are valid HTML attributes (which is correct, they are) but the rest of the system has trained you to believe they are styling props.

They are rightly, not working as we intend them to be, but the somewhat naive extension of HTML element typings is causing you confusion.

We'll add a ticket to look to tightening this up.