search

frenic / csstype

Strict TypeScript and Flow types for style based on MDN data
MIT License
1.7k stars 69 forks source link

PropertyValue<T> breaks with inferred values #152

Open roginfarrer opened 2 years ago

roginfarrer commented 2 years ago

The PropertyValue TypeScript utility works great when you know the CSS property ahead of time:

type TextAlign = PropertyValue<Properties['textAlign']>

I have a case where I don't know the CSS property up front. It's an input in a function. So I have something like this:

type Foo = {
  [key in keyof Properties]?: PropertyValue<Properties[key]>;
};

The values then get reduced to string | undefined or string | 0 | undefined:

const foo: Foo = {
  color: ''    // string | undefined
  margin: '' // string | 0 | undefined
}

I'm not sure if this is something that can be addressed, or if there's another way to extract the enumerable values for a given property?

I actually thing there's more going on here. textAlign in the first code snippet works great. But if provided display or color, it also creates a type that's just string

Recreation of the bug here: https://codesandbox.io/s/csstype-autocomplete-bugs-tciq55?file=/src/propertyvalue-bug.ts