css-loader + CSS modules pure selectors

Bug report

Describe the bug

css-loader error on build.

To Reproduce

After migrating to 9.2 and testing the CSS modules features, the below configuration started erroring.

colors.css (containing only values)

@value customGreen: #3ba150;

Component.module.css

@value customGreen from "./colors.css";

.custom {
  color: customGreen;
}

I am having:

./Component.module.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/postcss-loader/src??__nextjs_postcss!./Component.module.css)
CssSyntaxError
Selector ":import("./colors.css")" is not pure (pure selectors must contain at least one local class or id)

Expected behavior

Well it did seem to work when I had

next.config.js

module.exports = withPlugins(
  [
    [
      withCSS,
      {
        cssLoaderOptions: {
          localIdentName: '[name]_[local]_[hash:6]',
        },
        cssModules: true,
      },
    ],
  ],
  nextConfig
);

Not sure if there’s some tweaking to do some where, not a champ on CSS modules stuff.

I’ve tried to understand this test but no luck.

System information

• Version of Next.js: 9.2

[HoraceShmorace]

I solved my issues by moving away from implicit HTML calls (ex: nav and <nav> ) for specific elements, instead calling my components with classes (ex .nav and following up with <nav className={s.nav}>

I’ve been attempting to migrate our codebase onto Next, but just today discovered that our SCSS implementation breaks because all of our selectors have to be pure (and plenty are not). While I get why pure selectors would be ideal, it makes it impossible for large, enterprise projects full of “legacy” SCSS to migrate. I’ll never get funding for a tech debt effort to update 100+ scss files. There should be a flag to turn off pure mode.

[ematipico]

Same here. At present we can’t migrate to this built-in feature because of this problem.