CssSyntax error: Selector "&:hover" is not pure (pure selectors must contain at least one local class or id)

[equinusocio]

Run next info (available from version 12.0.8 and up)

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:29:10 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T8101
Binaries:
  Node: 14.18.3
  npm: 8.3.1
  Yarn: 1.22.11
  pnpm: N/A
Relevant packages:
  next: 12.0.8
  react: 17.0.2
  react-dom: 17.0.2

What version of Next.js are you using?

12.0.8

What version of Node.js are you using?

14.18.3

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

CssSyntax error: Selector "&:hover" is not pure (pure selectors must contain at least one local class or id) (4:3)

color: pink;

  &:hover {
    color: purple; 
}

The above repository is based on following the examples in the documentation:
https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css

This issue has been opened again since the original one has been closed for "no activities" while last comment was posted 3 months ago. The issue still exists.

Expected Behavior

As far as I understand, the above selector does contain a "pure selector", so it should work. However, apparently, since hover is nested in this example, it isn't recognized as a "pure selector".

To Reproduce

https://github.com/andrasna/hello-next-css-module-issue

[balazsorban44]

I could not reproduce this using the latest version of Next.js. It should work with any version above Next.js 9 (which I found in your reproduction). Please upgrade. 🙏

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.