search

webdeb / next-styles

CSS + SASS + CssModules in Next.js
40 stars 6 forks source link

[mini-css-extract-plugin] ignoreOrder #7

Closed yuri-scarbaci-lenio closed 4 years ago

yuri-scarbaci-lenio commented 4 years ago

First of all thanks a lot for the plugin!

I'm facing an issue where the build process goes a little bombastick about not being able to get a definitive order of the imported scss, I suspect due to the nature of how next.js handles the building process...

I do understand that getting a working configuration that doesn't throw the warning left and right will be almost impossible since it's deeply tied to next.js and it's not even worth given how subject to change it is, but what would be really nice is the ability to configure the mini-css-extract-plugin to pass the ignoreOrder flag...

I'm especially referring to this issue with mini-css-extract

Maybe add miniCssExtractOptions on this line and spread the options on this line so we can configure the mini-css-extract plugin ourself in a similar fashion as we do with the other plugins?

also by nature I think that if css/sass modules are enabled and we are getting pretty much scoped css anyway, we would want to default the option of ignoring the order to true by default?

P.S. this is an example of the error I'm getting:

Compiled with warnings.

chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css ./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/sass-loader/dist/cjs.js!./components/path/to/file.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/sass-loader/dist/cjs.js!./components/path/to/another/file.module.scss
 - couldn't fulfill desired order of chunk group(s) static/A2QMGgGL_4dyHrB5ko63S/pages/path/to/page.js
...

this is not only annoying, this would prevent configuring CI & CD pipelines that fails on warning...

yuri-scarbaci-lenio commented 4 years ago

As an additional source of the problem I will link this medium article where an alternate solution is given, but the alternate solution actually remove all the css chunking magic from the process and I would strongly not recommend doing it to solve the problem with 'css modules' since by nature they should not depend on a given order of css import.

webdeb commented 4 years ago

@yuri-scarbaci-lenio Thanks, I think it makes sense.

Maybe add miniCssExtractOptions on this line and spread the options on this line so we can configure the mini-css-extract plugin ourself in a similar fashion as we do with the other plugins?

Yeah, why not. I am open if you provide a PR for this

yuri-scarbaci-lenio commented 4 years ago

@webdeb Created the PR and tested it against my local project, works as expected.

I took the freedom to