postcss-loader does not support hot module replacement

[makkarpov]

This is a duplicate of nuxt/postcss8#18 because this bug is not a fault of Nuxt postcss module, but of postcss-loader itself.

• Operating System: N/A
• Node Version: 14.16.1
• NPM Version: 6.14.12
• webpack Version: 4.46.0
• postcss-loader Version: 4.3.0

Expected Behavior

Page does a hot reload when stylesheets are modified.

Actual Behavior

Page does a full reload instead of hot reload when stylesheets are modified. Relevant warnings are:

Ignored an update to unaccepted module ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js?!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js?!./assets/css/main.css -> ./assets/css/main.css -> ./.nuxt/App.js -> ./.nuxt/index.js -> ./.nuxt/client.js -> 0
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.
[HMR]  - ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./assets/css/main.css
[HMR] Reloading page

Code

N/A, see reproduction repository

How Do We Reproduce?

• Clone https://github.com/bradlc/nuxt-postcss8-bug
• Run npm install
• Run npm run dev
• Change the background color in assets/css/main.css
• Notice that the web page does a full reload instead of a hot reload

[alexander-akait]

postcss-loader never supports hot module replacement, here missed hot part of code and should be fixed in place there hot code was added, sorry impossible to fix here

[alexander-akait]

Especial please read This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves., it means CSS code doesn't accept itself as module so page was reloaded

[makkarpov]

Do you mean css-loader? Because CSS code cannot support or not support any kind of hot module replacement, they are just stylesheets.

[alexander-akait]

Something wrong in nuxt, css-loader also doesn't has hot code, only style-loader has it, but you don't have style-loader in your pipeline

[alexander-akait]

I think this due because nuxt has own hot module replacement code for CSS

[makkarpov]

Well, Nuxt is definitely not to blame because it is just a 30 lines of code which adds postcss to build, and nothing more.

https://github.com/nuxt/postcss8/blob/main/src/index.ts - that is all, no logic there, just inclusion in build.

Actually there is no nuxt module in path - css-loader!postcss-loader!style.css.

css-loader and postcss-loader are two remaining modules. Why don't they support hot reload?

[alexander-akait]

Why don't they support hot reload?

Because they can be used for any env (even bundle CSS code for libraries for Node.js), only style-loader should be used for browser, there hot is possible (in theory hot possible in Node.js too, but it is not trivial)

[makkarpov]

After examining actual webpack config I found that css-loader is always chained after vue-style-loader. So (a version of) style-loader is present in the pipeline.

Sample of loader chain

"use": [
  {
      "loader": "/node_modules/vue-style-loader/index.js",
      "options": {
          "sourceMap": true
      }
  },
  {
      "loader": "/node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js",
      "options": {
          "esModule": false,
          "modules": {
              "localIdentName": "[local]_[hash:base64:5]"
          },
          "sourceMap": true,
          "importLoaders": 2
      }
  },
  {
      "loader": "/node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js",
      "options": {
          "sourceMap": true,
          "postcssOptions": {
              "plugins": [
                  {
                      "postcssPlugin": "postcss-import"
                  },
                  {
                      "postcssPlugin": "postcss-url"
                  },
                  null,
                  null,
                  {
                      "postcssPlugin": "postcss-mixins"
                  },
                  {
                      "postcssPlugin": "tailwindcss/nesting"
                  },
                  {
                      "postcssPlugin": "tailwindcss",
                      "plugins": [
                          null
                      ]
                  },
                  {
                      "postcssPlugin": "autoprefixer",
                      "options": {}
                  }
              ]
          }
      }
  }
]

[alexander-akait]

Please open an issue in vue-style-loader, no style-loader here https://github.com/vuejs/vue-style-loader/blob/master/package.json#L15