Chained class selector does not work

[ahnaftahmid39]

Describe the bug
I have a chained selector of 2 classes. Those classes doesn't aren't recognized by the extension. Says Selector my-selector does not exist in css file. Also in css file it says Selector my-selector is declared but never used

To Reproduce
Steps to reproduce the behavior:

1. Put className on an element like this:

<ul className={`${styles['custom-list']} ${styles['info-wrapper']}`} >

3. Write css in the css file like this:

.custom-list.info-wrapper {
  color: red;
}

5. Hover on the className in react component
6. See error Selector 'info-wrapper' does not exist in 'styles.module.css'
7. Hover on the class in the css file
8. See error Selector 'custom-list.info-wrapper' is declared but it's never used

Expected behavior
It should show the css properties declared in the css file

Screenshots
React Component and Output

CSS File

Desktop:

• OS: Ubuntu
• Version: 22.04.5 LTS x86_64

[karlhorky]

@Viijay-Kr I may have encountered a similar issue, with a fresh create-next-app Next.js app.

Reproduction steps:

1. Create a new directory and scaffold a fresh Next.js app:

   mkdir a
   cd a
   pnpm create next-app . --app --no-src-dir --no-eslint --import-alias @/\* --no-tailwind --typescript --react-compiler

2. Open the app/page.tsx file and observe the error below 💥

app/page.tsx

// ...

<a
  className={styles.primary}

// ...

app/page.module.css

/* ... */

a.primary {
  /* ... */
}

/* ... */

Error message:

Selector 'primary' does not exist in 'app/page.module.css'.

[Viijay-Kr]

@ahnaftahmid39 Thanks for opening the issue . I have been busy lately and would not have the time to fix this one. I welcome any contribution and more than happy to review