Typed CSS/SCSS Modules With ReactJS and NextJS

Before we get started with NextJS I would recommend to develop NextJS project inside development docker container.

So we no longer have the issue of "this works on my computer". And it will not mess with your existing workflow.

So checkout my blog post for detailed video explanation.

Then checkout react and NextJS development container settings on github.

View Source code on github

Let's start with NextJS starter project with typescript enabled. Add dev dependency as follows.

npm i -D typescript-plugin-css-modules

Now we need to add the plugin in tsconfig.json as follows

1
2
3
4
5
6
7
8
9

<!-- prettier-ignore -->
{
  "compilerOptions": {
    ...
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  },
  ...
}
  

Then we need to add type definition file somewhere in the root. I have added in types->css.d.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- prettier-ignore -->
declare module "*.module.css" {
    const classes: { [key: string]: string}
    export default classes
}

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

The process for ReactJS is the same except skip the above step in react.

Now the MOST IMPORTANT STEP making it work with VS Code editor.

If you are not using VSCode then you can just skip to the end.

Create a new file at the root .vscode->settings.json if it doesn't exist already. And add the following setting.

1
2
3
4
5
6

<!-- prettier-ignore -->
{
    "typescript.tsdk": "node_modules/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true
}
  

So in order for plugin to take effect VSCode must use typescript that is installed in `node_modules` folder of the project.

By default VSCode uses its own copy of typescript for improved performance.

Now open only single NextJS project in your workspace so these settings will take effect.

There will be pop up after these settings take effect. If there is no pop up then something has gone wrong. Make sure you click on Allow.

This is main trick of making typed css modules work with VSCode.

Now you can use autocomplete css modules in NextJS as follows

1
2
3
4
5
6
7

<!-- prettier-ignore -->
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
  

If you need to use SASS then just install it as dev dependency npm i -D sass and rename files and use it as follows

1
2
3
4
5
6
7

<!-- prettier-ignore -->
import styles from '../styles/Home.module.scss'

export default function Home() {
  return (
    <div className={styles.container}>
  

In ReactJS it works the same way. Just renames classes to camel case as follows.

1
2
3
4
5
6
7
8

<!-- prettier-ignore -->
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.App}>
      <header className={styles.AppHeader}>
  

View complete source code on github

Conclusion

I know its lot of headache to setup typed css modules.

That you can only have single project in workspace for settings to take effect.

But the amounts of stupid spelling mistakes that you can avoid are priceless.