App reloads when saving a new class in a SCSS module

[MathiasBoisgardDev]

Hello everyone,

I'll try to make a reproduction available when I have a bit of time if necessary, but first I wanted to make sure this was not a normal behaviour and/or if I'm missing something. (it concerns a corporation codebase which I can't really give access to)

So, first things first,
We're using the last version of react-refresh-webpack-plugin (0.5.13)
We recently started using the scss module approach and we did not have any problem prior to that

---

Issue: When we CREATE a new class in a styles.module.scss file, the application completely reloads. Whenever we just edit an existing class, the application fast reloads as expected.

---

I'm wondering if it is a normal behaviour or if something is off in our project configuration.

ps: I'm not even sure I'm asking the question in the right place, but I'm pretty sure it is :)

As you can see below, we have two different scss tests which differentiate "clasic" css/scss and another for the module.scss

webpack configuration

{
        test: /\.(css|scss)$/,
        exclude: aPath => {
          // The function excludes every .module.scss files and all node_modules css but d3- library
          if (aPath.includes('.module.scss')) {
            return true;
          } else if (aPath.includes('node_modules')) {
            // Transpile only modules containing 'd3-' in their name
            const hasD3 = aPath.includes('d3-');

            return !hasD3;
          }

          return false;
        },
        use: [
          {
            loader: 'style-loader', // creates style nodes from JS strings
          },
          {
            loader: 'css-loader', // translates CSS into CommonJS
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: 'resolve-url-loader',
            options: {},
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
            },
          },
          {
            loader: 'sass-loader', // compiles Sass to CSS, using Node Sass by default
            options: {
              sourceMap: true,
              sourceMapContents: false,
            },
          },
          {
            loader: 'import-glob-loader',
          },
        ],
      },
      {
        test: /\.module.scss$/,
        use: [
          {
            loader: 'style-loader', // creates style nodes from JS strings
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
            },
          },
          {
            loader: 'resolve-url-loader',
            options: {},
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
            },
          },
          {
            loader: 'sass-loader', // compiles Sass to CSS, using Node Sass by default
            options: {
              sourceMap: true,
              sourceMapContents: false,
            },
          },
          {
            loader: 'import-glob-loader',
          },
        ],
      },

small example :
syles.module.scss

.test {
  background-color: blue;
  padding-left: 12px;
}

If I just add a padding-right in .test, the application fast reloads and the new style is correctly applied

Whereas if I create a new class

.test {
  background-color: blue;
  padding-left: 12px;
  
  &__header {
    display: flex;
    ...
  }
}

The application will entirely reloads creating the new hash for test__header

[Michael Mok]

Hi, unfortunately I'm a bit occupied so I will try to take a look next week. I have a strong suspicion this is related to the use of CSS Modules (I'm not sure how creating a new class would change the output module in JS), but it could also be how style-loader interacts with HMR under the hood.