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

[andrasna]

The error

./pages/index.module.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/postcss-loader/src??__nextjs_postcss!./pages/index.module.css)
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; 
}

To Reproduce

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

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

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".

[jamesmosier]

As far as I know, you cannot nest like that in CSS modules.

This example from the css modules docs shows an example in which they are using :hover but not nesting, which would lead me to believe this is not possible and you must stick to regular CSS synax.

[matamatanot]

@andrasna
https://nextjs.org/docs/advanced-features/customizing-postcss-config
Create postcss.config.json or postcss.config.js

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 0,
        "features": {
          "custom-properties": false,
          "nesting-rules": true  // Enable nesting
        }
      }
    ]
  ]
}

[timneutkens]

Exactly as per https://github.com/zeit/next.js/issues/10475#issuecomment-583898332

[remy]

@timneutkens just checking, but the Next docs say it supports postcss, and I'm using postcss exclusively to get nested support (as css does everything else I need), but in the particular combination of Next + Postcss + Nesting + CSS Modules - does this mean nested CSS (via postcss) isn't supported/doesn't work?

[SalahAdDin]

@andrasna
https://nextjs.org/docs/advanced-features/customizing-postcss-config
Create postcss.config.json or postcss.config.js

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 0,
        "features": {
          "custom-properties": false,
          "nesting-rules": true  // Enable nesting
        }
      }
    ]
  ]
}

it didn't work for me.

[andrasna]

@SalahAdDin

Hi,

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

I have unarchived and updated the repository with the issue, where I think the above code is a solution.