frenic / csstype

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

Question: Can `fontSize` support a numeric value? #150

Closed ezrafree closed 2 years ago

ezrafree commented 2 years ago

My apologies if this has been asked before, I've been searching the Web and looking through the issues here and I'm not finding anything.

Is there any way I can extend the fontSize property to support a number value? I would really love to be able to write my Stylesheet objects as the following example (see fontSize below):

interface Stylesheet {
  [key: string]: CSS.Properties
}

const styles = (color: string): CSS.Properties => ({
  foo: {
    color,
    fontSize: 16, // <--- typescript errors say this can only be a string
    fontWeight: 700,
  },
})

The error I get is:

Type '16' is not assignable to type 'FontSize<0 | (string & {})>'.

meyer commented 2 years ago

@ezrafree yes, please read the README for specifics on the generics (and other good-to-know things as well!). Here’s a direct link to the part about generics: https://github.com/frenic/csstype#generics

The type of fontSize is TLength, i.e. the first parameter you can pass in the Properties generic.

ezrafree commented 2 years ago

@meyer thanks! If it's okay, I'm going to close this issue. After some refactoring of my project, the issue went away, so I no longer have reason to believe it was a bug in this project.

meyer commented 2 years ago

nice, glad to hear it!