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 #10475 (comment)

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

[LordZardeck]

I have nested selectors working with css modules with storybook, but as soon as I run it through next.js it fails, which makes me think this issue was closed incorrectly. To be fair, I had to finesse it so that the css rules applied to sass as well, but still it works. Wondering why I can't get it to work in Next.js. If it helps, here is my storybook config that works:

module.exports = {
    stories: [
        // Paths to the story files
        '../stories/**/*.stories.mdx',
        '../stories/**/*.stories.@(js|jsx|ts|tsx)'
    ],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        {
            name: '@storybook/addon-postcss',
            options: {
                postcssLoaderOptions: {
                    implementation: require('postcss')
                }
            }
        },
        {
            name: '@storybook/preset-scss',
            options: {
                cssLoaderOptions: {
                    modules: true,
                }
            }
        },
    ],
    webpackFinal: async (config) => {
        // Default rule for images /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
        const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
        fileLoaderRule.exclude = /\.svg$/;

        config.module.rules.push({
            test: /\.svg$/,
            enforce: 'pre',
            use: ['@svgr/webpack'],
        });

        const cssRule = config.module.rules.find(rule => rule.test && rule.test.test('.css'));
        const sassRule = config.module.rules.find(rule => rule.test && rule.test.test('.scss'));
        const postCSSLoader = cssRule.use.find(config => config.loader && config.loader.indexOf('postcss-loader') > 0);

        sassRule.use.push(postCSSLoader);

        return config;
    },
};

[equinusocio]

Same issue here, im using postcss-extend-rule which breaks nextjs. It works on storybook but not nextjs

> 1 | %IndeterminateMixin {
    |                               ^
  2 |   content: '';
  3 |   position: absolute;
wait  - compiling...
error - ./node_modules/react-components/progress/progress.module.css:1:1
Syntax error: Selector "%IndeterminateMixin" is not pure (pure selectors must contain at least one local class or id)

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.