Cannot get plugin to work in a React CRA app using module SCSS files

[tiguchi]

Problem

I have a CRA app with an .eslintrc.js file with custom rules. I wanted to add the eslint-plugin-postcss-modules to the configuration to enforce that only defined CSS classes are referenced in JSX code.

My project uses .module.scss files, and they all compile fine when I build or run the app.

However, when I run ESlint then I get the following error message:

Oops! Something went wrong! :(

ESLint: 8.9.0

CssSyntaxError: some/path/to/ComponentName.module.scss:1:1: Unexpected '/'. Escaping special characters with \ may help.

In my affected project, it's also telling me to use PostCSS instead of the "regular CSS parser".

What would the correct configuration look like so ESlint uses PostCSS under the hood? I tried adding it as a dev dependency, but it doesn't fix the problem.

Do you have a working example project for reference, that uses the plugin?

Reproduction Steps

I created a small project for reproducing the error:

https://github.com/tiguchi/eslint-plugin-postcss-modules-cra-bug

[bmatcuk]

I was unable to get eslint running in your demo app, but I was able to reproduce the issue elsewhere. The problem is // this is the incorrect syntax for a comment in a css file. Comments in a css file are always in the form /* comment */. If you remove that comment, or replace it with the correct syntax, I believe eslint will run correctly.

[zacharyliu]

I was able to get the plugin working in your repo by installing the postcss-scss package and creating postcss.config.js with the following:

module.exports = {
  syntax: "postcss-scss",
};

[tiguchi]

I was able to get the plugin working in your repo by installing the postcss-scss package and creating postcss.config.js with the following:

module.exports = {
  syntax: "postcss-scss",
};

Thank you so much, this fixes the problem