please reconsider to type CSS width and height attribute more strictly

[scarf005]

This is a continuation of #1179.

Today, I encountered a bug because the component was passed a string ("300") instead of a number (300) or a properly formatted string ("300px"). This error went unnoticed because width and height attributes are currently typed as number | string | undefined.

While I understand that implementing stricter typing could break older code (refer to #1179 (comment)), I believe that the value of TypeScript lies in providing strict, safe typing to prevent potential type errors.

Therefore, i propose we make the type for width and height more strict like as said in #1179 using template literal types.

type Length = number | `${number}${'px'|'cm'|'mm'|'em'}`

I am open to creating a PR for this issue.

[turansky]

It's common question for CSS properties.
Length has multiple variants, which can't be described by simple template :(

[Bashamega]

Hi @turansky and @saschanaz,

I’ve put together a working solution for this issue and would love your feedback. You can review the implementation here:

https://github.com/Bashamega/css‑measurements

If it looks useful, let’s discuss integrating it into the main project.

Thanks!

[saschanaz]

I think the proper solution here is CSS Typed OM, which we already have.