SASS :export does not work with built-in SASS support throwing 'Selector ":export" is not pure'

Bug report

Describe the bug

I use :export syntax to export variables from scss files and import them in JS. This worked great with next-sass, but does not even compile with the built-in SASS support.

To Reproduce

in Component.jsx:

import colors from './component.module.scss'

component.module.scss:

:export {
  white: #ffffff;
  black: #000000;
}

Expected behavior

colors in Component.jsx should be an object that looks something like this:

{
  white: "#ffffff",
  black: "#000000"
}

Actual behavior

It does not compile the scss file and throws:

ModuleBuildError: Module build failed (from ./node_modules/next/node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:0) Selector ":export" is not pure (pure selectors must contain at least one local class or id)

System information

• OS: Windows 10 (WSL)
• Version of Next.js: 9.3.4
• Version of SASS: 1.26.3

Additional information

next.config.js does not contain any code related to CSS or SASS

[BigglesZX]

@lipoolock I had to rename my variables.scss to variables.module.scss for this feature to work (from a hint here). That was all!

[nkalinov]

The issue is that the built-in css-loader options are using by default “pure” CSS modules. I managed to work around this issue by updating this option for the specific css modules files that we use in our project (.module.scss):

/**
 * Stolen from https://stackoverflow.com/questions/10776600/testing-for-equality-of-regular-expressions
 */
const regexEqual = (x, y) => {
  return (
    x instanceof RegExp &&
    y instanceof RegExp &&
    x.source === y.source &&
    x.global === y.global &&
    x.ignoreCase === y.ignoreCase &&
    x.multiline === y.multiline
  );
};

module.exports = {
  webpack: config => {
    const oneOf = config.module.rules.find(
      rule => typeof rule.oneOf === 'object'
    );

    if (oneOf) {
      const moduleSassRule = oneOf.oneOf.find(rule =>
        regexEqual(rule.test, /\.module\.(scss|sass)$/)
      );

      if (moduleSassRule) {
        const cssLoader = moduleSassRule.use.find(({ loader }) =>
          loader.includes('css-loader')
        );
        if (cssLoader) {
          // Use the default CSS modules mode. Next.js use 'pure'. Not sure of all implications
          cssLoader.options.modules.mode = 'local';
        }
      }
    }

    return config;
  },
};

I’m not entirely sure of all the implications that this change might have…