Add typed css modules in nextjs

typed-css-modules-in-nextjs.md

Add autocompleted types to imported css modules in NextJS (or another React project)

Original article: https://apoorv.blog/typed-css-modules-reactjs/

1. Add the typescript-plugin:

yarn add --dev typescript-plugin-css-modules

2. Add the plugin to tsconfig:

tsconfig.json

{
  ...
  "plugins": [{
    "name": "typescript-plugin-css-modules"
  }]
}

3. Add declaration in /types

types/css.d.ts

declare module "*.module.css" {
  const classes: { [key: string]: string };
  export default classes;
}

declare module "*.module.scss" {
  const classes: { [key: string]: string };
  export default classes;
}

4. Add vscode settings file, to use local TypeScript

.vscode/settings.json

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}