Typescript - create type of all available css properties

Question

I'm using React and Styled Components and I have a function that accepts a string of a css attribute. I want to type it to validate that the string is a valid css attribute (color, background-color, etc...)

function doSomething(cssPropertyName: SomeType) {
}

doSomething('border-color'); // No error
doSomething('non-existing-css-property'); // Should give an error

How can I achieve this?
Thanks!

Ref: This maybe? github.com/frenic/csstype, with (prop: keyof CSSProperties) => ... Though you'd need to provide borderColor instead of border-color (for example). — Yoshi
– Yoshi, Commented Feb 15, 2021 at 8:28
Yes! That's the stuff. I'm good with the camel case. Do you want to add this as the answer? Thanks! — Uri Klar
– Uri Klar, Commented Feb 15, 2021 at 9:00

Yoshi · Accepted Answer · 2021-02-15 10:30:24Z

5

With: https://github.com/frenic/csstype I think you can simply use:

function doSomething(prop: keyof CSSProperties) {
}

doSomething('borderColor'); // No error
doSomething('non-existing-css-property'); // Should give an error

answered Feb 15, 2021 at 10:30

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript - create type of all available css properties

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related