Next.js Discord

Discord Forum

Linting CSS Modules

Unanswered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
Does anyone know a good way to have Next.js check for references to CSS module classnames in markup that don't actually exist in the imported CSS module? Or a lint setting that checks for this?

For example:

import styles from './foo.module.css';

export default function Hero() {
  return (
    <div className={styles.something}>
      {children}
    </div>
  );
}


This is a simplified example, but let's say foo.module.css does not contain class something but somethingelse.

I'd like to get some kind of warning about this. It seems to just not output the className which is good, but an optional error would be great too.

Specifically in my case I'm doing some refactoring of html and styles across a bunch of components. I've come across some classnames in the HTML that no longer exist, and it would be great to have linting or something fail in this case.

0 Replies