React CSSModules typings

react-css-modules.d.ts

declare module 'react-css-modules' {
	interface Options {
		allowMultiple?: boolean;
		errorWhenNotFound?: boolean;
	}

	module Decorator {
		interface Props {
			styles?: any;
			styleName?: string;
		}
	}

	interface Decorator {
		(defaultStyles: any, options?: Options): any;
	}

	const Decorator: Decorator;

	export = Decorator;
}

SomeComponent.tsx

declare module 'react-css-modules' {
	interface Options {
		allowMultiple?: boolean;
		errorWhenNotFound?: boolean;
	}

	module CSSModules {
		interface Props {
			styles?: any;
			styleName?: string;
		}
	}

	interface CSSModules {
		(defaultStyles: any, options?: Options): any;
	}

	const CSSModules: CSSModules;

	export = CSSModules;
}

I've added the react-css-modules.d.ts code to my custom d.ts file.

Then in my component I do:

import * as CSSModules from "react-css-modules";
const styles = require("./MasonryMessage.scss");

@CSSModules(styles)
export default class extends React.Component<MyProps, void> {
  public render() {
  }
}

The TypeScript compiler is not complaining but I'm getting an error in the browser that says TypeError: CSSModules is not a function

Any idea?

For some reason it's not importing it properly. The actual function is in CSSModules.default so I have to do something like this which is kind of ugly:

import * as CSSModules from "react-css-modules";
const CSSModulesDecorator = (CSSModules as any).default;
const styles = require("./MasonryMessage.scss");

@CSSModulesDecorator(styles)
export default class extends React.Component<MyProps, void> {
  public render() {
  }
}