Does it support css files

[matthewma7]

Hi,
Thank you for the plugins, it looks very promising for my use case!
It looks like this plugin prepends a loader to do the modification.
In that case, I am wonder does the plugin work for a .css file (I think css files are also NormalModule)?

[artembatura]

Hi. CSS files are modules after they processed with style-loader or other loader, so plugin cannot handle raw files before they transformed to NormalModule

[artembatura]

If you want to modify CSS files after style-loader and you use multiple loaders on your css files, there is another problem.

{
  plugins: [
    new ModifyModuleSourcePlugin({
      test: /\.css$/
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

In this case one the same CSS file will be modified twice, because Webpack will create two normal modules:

1. /node_modules/css-loader/dist/cjs.js ! /path/to/css-file.css
2. /node_modules/style-loader/dist/cjs.js ! /node_modules/css-loader/dist/cjs.js ! /path/to/css-file.css

And this problem is not only with CSS files. It's how works with all files if they processed with multiple loaders. So, I think we need to find way to modify raw files before they multiply as modules.

And then we should rename our plugin to ModifySourcePlugin, not ModifyModuleSourcePlugin as currently 😄

[artembatura]

@matthewma7 You can share more about your use case, so I can try help you

[matthewma7]

Hi @artemirq , Thank you for the detailed answer!

My use case is relatively simple. I have a css file within a node_module package that has a font defined with url('http://foo.com/font.woff2)', instead of loading the font over the internet, I would like to pack it locally as static media. So I am thinking performing two tasks with a webpack plugin. 1, download the font.woff2 locally, possibly in the same directly along side with the css file. 2, change the url to url('./font.woff2').
Doing these two tasks manually before webpack build does seems to work.
It might be possible to just do literally these two tasks before compile stage, but a loader sounds more systematic.

[artembatura]

During the experiments I figured out and fixed all above described problems. Changes is prepared in this PR.

Now I understand that I was wrong with raw modules. Yes, we can modify raw CSS files/modules before they got processed by other loaders :)

I published all changes under 2.0.0-beta.6 version (this version for webpack 5). So you can try it.

I wrote test with css file and external css file, looks like it's working well. Also added some other changes: renamed class to ModifySourcePlugin and slightly changed options format.

@matthewma7 So now you can do something like this

{
  plugins: [
    new ModifySourcePlugin({
      rules: [
        {
          test: /node_modules\/modern-normalize\/modern-normalize\.css$/, // external css
          modify: (src, file) =>
            src + `.myExtraClass { background: gray; /* ${file} */ }`
        }
      ]
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

[matthewma7]

Thank you! for the immediate help. 😃
It works for my case. I am curious if it is a huge change from unshift() to push().
I noticed another small thing, I saw two 'Compiled successfully.' message when this plugin is enabled. Maybe it has something to do with the fact of dynamic loader addition.

[artembatura]

@matthewma7 I'm happy that it's works for you.
Yep, pushing loader to the end of array let's Webpack to use its first (as I understand).
Two messages it's the problem. Maybe there is the way to preload this loader to avoid rebuild, I don't know. I think I will ask the Webpack guys later.

[matthewma7]

Got it.
Thank you the help! This plugin opens up so many possibilities! 😃
This issue can be closed now. 🙂

[artembatura]

@matthewma7 Thank you for the kind words! 😊 ❤️

[artembatura]

@matthewma7 Hey, I'm started investigating into the issue with two messages and it's looks like it's problem with html-webpack-plugin.

Did you update html-webpack-plugin to latest version with support for webpack 5? Looks like @jantimon already known about this issue

[jantimon]

The reason is that html-webpack-plugin is using a new webpack 5 feature which is not working correctly with watchpack.
The webpack core team is trying to fix it:

webpack/webpack#12283