Skip to content

Conversation

@filipsobol
Copy link

The type 'rgb' | 'hsl' | ... | string effectively collapses to just string because string is a supertype of all string literals. This causes TypeScript to lose the ability to distinguish specific values like 'rgb'.

To preserve those literal types while still allowing arbitrary strings, we can use the “intersection hack” ({} & string) — also known as an opaque string type. This allows space to be either one of the known literals ('rgb', 'hsl', etc.) or any other string, while still enabling TypeScript to narrow correctly.

See this link for how this change resolves the issue: https://www.typescriptlang.org/play/?#code/C4TwDgpgBAKhDOwoF4oHIBOBzARmqAPugBbwA2+RaxA7noegMYC2IA1pemQIb1VmNinNAHs2PPujEChDRBgCWAOywBuAFAB6TVF0A9APzr1oSLATAATCnTZJ1csNr2W7YRPeDh03t-FeGAAoAbwBfKAAyKHllLABKDW1dKEMgA

@filipsobol filipsobol changed the title Use opaque string Fix space typings Jun 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant