frenic / csstype

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

TypeScript autocompletes properties as object with keys #153

Open roginfarrer opened 2 years ago

roginfarrer commented 2 years ago

Demonstration of bug here: https://codesandbox.io/s/csstype-autocomplete-bugs-tciq55?file=/src/property-object-keys.ts

I'm working on a styled-system like library where the CSS values are configured by the user, so we don't know them upfront. I have a type that looks like this:

type ValueOrConditionObject<T> = T | { [key in keyof Breakpoints]?: T };

type Color = ValueOrCondition<Properties['color']>

I kept noticing that aberrant keys were showing up in the object, when I was just expecting to see keyof Breakpoints. I then realized that you can see this on the properties themselves:

const color: Properties['color'] = {
  // autocompletes keys 'trim', 'fontsize', 'small', 'valueof', 'sub', 'at' ....
}
CleanShot 2022-03-15 at 18 04 16@2x

I have a feeling that this is caused by the string & {} part of the type, but I'm not positive. I tried to extract out the values using PropertyValue, but that led me to the issue outlined in #152