CSS Modules with TypeScript: css-modules-typescript-loader

TypeScript users are flying blind when they import a CSS module. For example, if they type styles.foo they have no idea if .foo actually exists in the CSS module without manually checking the file.

This is not a great TypeScript experience.

I propose adding the css-modules-typescript-loader (or something similar) to emit type declarations for CSS modules on the fly.

It could be as simple as this:

  const loaders = [
    require.resolve('style-loader'),
    ...(useTypeScript && cssOptions.modules
      ? require.resolve('css-modules-typescript-loader')
      : []
    ),

What do you think?

[Hotell]

I put down quick gist for anyone reading this issue, if they desperately need this feature without ejecting 😃

https://gist.github.com/Hotell/01035a3ec202245d6b97937444140877

I can send PR to update docs if you’re willing to accept this 😃

thanks!

[mrmckeb]

Hi @jedmao and @Timer, I’ve completed the plugin and wanted to get your thoughts on it. I need to:

• Write some E2E tests (it has basic coverage now).
• Improve docs (for example VSCode has an option to add the plugin via VSCode’s settings).

You can find it here: https://www.npmjs.com/package/typescript-plugin-css-modules

This weekend I’ll create a PR for create-react-app with this included.