TypeSafe values? about react-css-grid

[aboyce]

Hello,

I agree they are more disappointing that I would have liked/hoped. As you mentioned, the library depends on csstype to tackle this. The library was mainly chosen because it is what React itself uses for its style prop under the hood, so it makes sense to use it for React component libraries for compatibility and an assumption that it is the best solution they could find.

After some thought, I'm guessing the main issue on why it's so loosely typed is because of the vast number of options.

If you consider something simple like padding, it has to support:

• style={{ padding: 1 }} which translates to padding: 1px;
• style={{ padding: '1px' }} which also translates to padding: 1px;
• style={{ padding: '1em' }} which translates to padding: 1em;
• style={{ padding: '1pt' }} which translates to padding: 1pt;
• style={{ padding: '1pc' }} which translates to padding: 1pc;
• ...

And that doesn't include the shortcuts such as style={{ padding: '5em 10em' }} or style={{ padding: '1em 2em 3em 4em' }}.

So the type would have to be number, or strings that are a number followed by px or em or pt... , and then these combined into a possible pair or as a four.

I'm not sure there is any valid way to do this in Typescript other than a list of all possible values such as '1px' | '2px' | '3px' and so on. I found that with the fairly limited number of conditional type definitions I included in these libraries, I had to put a disclaimer in the README as it was starting to overwhelm VS Code with the conditional type suggestion.

I think the best we could realistically hope for are console warnings at development time using regexes or something?

Apologies I've not really provided a solution 😕