An array of valid CSS property names in TypeScript, but hyphened

Question

I have a property in my component that is supposed to get an array of valid CSS properties:

interface MyComponentProps {
    cssProperties: (keyof CSSStyleDeclaration)[];
}

const MyComponent = ({ cssProperties }: MyComponentProps) => {
    //
}

The problem is that CSSStyleDeclaration stores styles as an object with property names in camel case. I need real CSS property values, hyphened. So background-color instead of backgroundColor. I know there's also React.CSSProperties type, but it uses camel-cased properties too, while allowing for unitless numeric values.

Is there a TypeScript type to use original, hyphened CSS property names?

RubenSmn · Accepted Answer · 2023-02-06 10:36:51Z

2

There is this library csstype which is used by MUI, emotion and some other popular component libraries.

Which allows you to use the hyphen props

import CSS from "csstype";

interface MyComponentProps {
  cssProperties: (keyof CSS.PropertiesHyphen)[];
}

const MyComponent = ({ cssProperties }: MyComponentProps) => {
  //
}

<MyComponent cssProperties={["color", "background-color"]} />;

answered Feb 6, 2023 at 10:36

RubenSmn

4,7422 gold badges12 silver badges30 bronze badges

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

2 Comments

Robo Robok Over a year ago

I'll have a look in a bit.

Robo Robok Over a year ago

Okay, it works as expected, thanks. I was sure there must be a package for this!

kind user · Accepted Answer · 2023-02-06 10:31:10Z

1

Use Kebab type available here. Camelcased CSS properties will be transformed into kebabcase.

type Kebab<T extends string, A extends string = ""> =
    T extends `${infer F}${infer R}` ?
    Kebab<R, `${A}${F extends Lowercase<F> ? "" : "-"}${Lowercase<F>}`> :
    A

type Props = {
    cssProps: Kebab<keyof React.CSSProperties>[];
}

const Component = (props: Props) => null;

const App = () => (
  <Component cssProps={['min-width']} />
);

Typescript Playground

edited Feb 6, 2023 at 10:31

answered Feb 6, 2023 at 10:20

kind user

42k8 gold badges69 silver badges78 bronze badges

4 Comments

Robo Robok Over a year ago

I thought about that, but I'd need to investigate whether CSSStyleDeclaration has some edge cases (pun!) where converting the case wouldn't convert to a CSS property. Also I'd like to make 100% sure there are no alternatives.

Robo Robok Over a year ago

Also, it loses vendor prefixed properties, however I could live without them.

kind user Over a year ago

@RoboRobok According to the W3C standards all of the CSS properties are kebabcased. There should be not any problems with it, except vendor prefixes.

Robo Robok Over a year ago

Thanks, I selected another answer as it uses less trickery :)

Collectives™ on Stack Overflow

An array of valid CSS property names in TypeScript, but hyphened

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related