webpack-contrib
Rebuild css modules with defined order
Hi there)
I wrote a-webpack-plugin which makes it possible to generate super short css classNames, like .a .b... .zz ...
My plugin works with ExtractTextPlugin, and it doesn't with mini-css-extract-plugin (
The problem is that when I rebuild css modules in a proper order, mini-css-extract-plugin just drops all css files → no css output at all.
https://github.com/Diokuz/a-webpack-plugin/blob/master/index.js#L158
Any suggestions how to fix that?
My plugin's algorythm is very simple:
- Wait till all css modules are loaded by webpack
- Find them and sort
- Rebuild all css modules in a defined order, so build is deterministic (chunkhash and content is constant for particular git commit).
As I understood from your source, you use childCompiler in loader, which is reused in plugin part. But I still dont get it, why compilation.rebuildModule not working...
Thanks in advance)
mini-css-extract-plugin no longer uses rebuildMoulde internal, but this shouldn't a problem.
Technically your solution should also work with the mini-css-extract-plugin. I don't know why it doesn't work.
Does a very simple plugin works that just calls rebuildModule work? If not you can build a test case for the mini-css-extract-plugin from this and PR it. That would help.
Here we are: No css file with mini-css-extract-plugin demo
It works with ExtractTextPlugin@4 (ETP4 demo), but I cannot use it because of https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/767
Actually https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/767 has the same symptoms
Cool! So, it is a confirmed webpack4 bug and it will be fixed in near future?
@evilebottnawi unfortunately I have no time to explore webpack code to find out why compilation.rebuildModule doesnt works properly in 4th version :(
No hope to fix that without me?
I think I have this same issue.
I'm issuing a rebuild of my CSS files in the finishModules hook so I can narrow down the set of files that Tailwind passes to it's JIT. The rebuild happens and I can eyeball the updated source in the debugger mid-build, but MiniCssExtractPlugin outputs the original module, not the rebuilt one. If I don't use MiniCssExtractPlugin, the CSS output updates fine.
When I was debugging this, I noticed there are 2 very similar CSS modules (as in Webpack modules in the compilation) for each actual CSS file in the dependency tree. I don't know if this is relevant, but I wonder whether only one is updating or something?
I've carved them down to show the only differences I can find, which mostly seems to be in their dependencies. After the rebuild, the first one ends up with source of '// extracted by mini-css-extract-plugin\nexport {};' and the second ends up with the full and correctly rebuild source.:
