Types of CSS modules

[TeoTN]

It's not clear to me how currently should types be declared for CSS modules. For the context, I'm using Gatsby v3 with TypeScript and an example import would be:

import { Header } from './header.module.css';

However, the old style index.d.ts I had won't be suitable anymore since default exports were replaced with tree-shakeable variables:

declare module '*.module.css' {
  const value: { [className: string]: string };
  export default value;
}

That pretty much now ends up in this error:

 Module '"*.module.css"' has no exported member 'Header'. Did you mean to use 'import Header from "*.module.css"' instead?

I'm not sure how this can be handled in the latest version?

[jamesthomsondev]

@TeoTN Running into the same issue, were you able to resolve this?

[TeoTN]

@getreworked Well, no, not really. From what I see in that repo I ended up with empty module declaration

declare module '*.module.css';

[IanVS]

There is https://github.com/Quramy/typed-css-modules, for anyone who might come across this issue. I use it in CI to generate types for my css modules before running my type checks.

And I use https://github.com/mrmckeb/typescript-plugin-css-modules in VSCode to check the types as I'm editing. This combo has served me well for the last year or so.