CSS custom properties

I am writing an app in React and Typescript and will be making heavy use of CSS custom properties.

Could you idiot-proof the documentation a bit more please? Is css.d.ts a file I need to create and does it matter what directory it is in?

// My css.d.ts file
import * as CSS from 'csstype';

declare module 'csstype' {
  interface Properties {
    // Add a missing property
    WebkitRocketLauncher?: string;

    // Add a CSS Custom Property
    '--theme-color'?: 'black' | 'white';

    // ...or allow any other property
    [index: string]: any;
  }
}

[mohsen1]

TypeScript 4.4 does allow specifying types for properties with a pattern. In this case you can specify something like this:

interface CSSProperties {
  // ... all other properties
  [variableName: `--${string}`]: any;
}

[yordis]

I will recommend you to do the following strategy.

import * as React from 'react';

export interface AppStyle extends React.CSSProperties {
  '--app-background-color': string;
  '--app-color': string;
}

export const App: React.FunctionComponent<IAppProp> = props => {
  const style: AppStyle = {
    '--app-background-color': props.backgroundColor,
    '--app-color': props.color,
  };

  return (
    <div style={style}></div>
  );
};