system-ui
borderCollapse ::: Type 'string' is not assignable to type 'StylePropertyValue<BorderCollapse>'
Describe the bug
Attempt to use borderCollapse with either correct value ( 'collapse,'separate' ) and typescript will throw errors.
To Reproduce
In the styles object, use borderCollapse on table or th or td and you will get an error.
Okay, I don't have any code snippet, but it seems that the problem you're getting occurs because you try to assign a string with value "collapse" and type string to a property that accepts values of type "collapse" | "separate" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset".
We could add string & {} to BorderCollapse type, but it's in csstype's repo.
So here's my guess of what happens:
const styles /* no annotation here */ = { th: { borderCollapse: "collapse" } };
const theme: Theme = {}
TypeScript doesn't know that styles is supposed to be ThemeStyles, so it infers that th.borderCollapse is a string.
What you can do instead is either defining styles inside of theme or annotating it with : ThemeStyles.
You can read more about it in the docs: https://theme-ui.com/guides/typescript/#union-types-are-not-inferred-without-explicit-annotation
Glad you already had a solution for it. Wondering why this doesn’t happen for something like display block, flex, etc if the values are string based. Why is this an outlier?
Well, it depends on the definition from csstype. I'd guess that the reasoning here is that no "custom value" for borderCollapse is legal, and stuff like borderEndRadius can be 4px or even calc(4px * var(--something)).
Display doesn’t have custom values either though? Basically should I file a bug for this with css type?
On Tue, Jul 13, 2021 at 1:17 PM Piotr Monwid-Olechnowicz < @.***> wrote:
Well, it depends on the definition from csstype. The reasoning here is that no "custom value" for borderCollapse is legal, and stuff like borderEndRadius can be 4px or even calc(4px * var(--something)).
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/system-ui/theme-ui/issues/1861#issuecomment-879262219, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJUO7QJ2EIBZC7MWIMUPVLTXRYKVANCNFSM5AHK5SNA .
Display doesn’t have custom values either though? Basically should I file a bug for this with css type?
I wouldn't. csstype is generated from mdn/data so it's a bit more complex too.
In general this is intended TS error to fix in your codebase.