Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:9 (5 by maintainers)

Top GitHub Comments

13reactions

SalahAdDincommented, Jul 13, 2020

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

11reactions

timneutkenscommented, Feb 10, 2020

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

Top Results From Across the Web

Selector ":global .class" is not pure (pure selectors must ...

You need to use global selector inside your local selector in CSS-modules. For example, if you have HTML: <div className={classes.

syntax error: selector "body" is not pure (pure selectors must ...

You can't use body selector in a module as it says in the error message: "Selector "body" is not pure (pure selectors must...

CSS selectors - CSS: Cascading Style Sheets - MDN Web Docs

CSS selectors define the pattern to select elements to which a set of CSS rules are then applied.

THAT @REM SHOW on Twitter: "Oh…so, this isn't really CSS ...

CssSyntax error : Selector "&:hover" is not pure (pure selectors must contain at least one local... The error ./pages/index.module.css (./node_modules/css-loader ...

Documentation - Sass Tutorial

Sass supports a special type of selector called a placeholder selector. These look like class and id selectors, except # or . by...