Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New version 0.4.2 capture lot of warnings #250

Closed
nuintun opened this issue Aug 22, 2018 · 66 comments

Comments

Projects
None yet
@nuintun
Copy link

commented Aug 22, 2018

_20180822095000

Lot of conflicting order warning, but this css files not care about their order!

@nuintun nuintun changed the title New version 0.4.2 capture many warnings New version 0.4.2 capture lot of warnings Aug 22, 2018

@luqimin

This comment has been minimized.

Copy link

commented Aug 22, 2018

experiencing the same issue

@evilebottnawi

This comment has been minimized.

@jsg2021

This comment has been minimized.

Copy link

commented Aug 22, 2018

What does this warning mean? How do we resolve it?

@sokra

This comment has been minimized.

Copy link
Member

commented Aug 23, 2018

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

So not defining a clear order can lead to fragile builds, that's why we display a warning here.

There are two things that you can do:

Sort your imports to create a consistent order. I must admit that the warning could be improved to point to the locations that need to be changed.

Ignore the warning with stats.warningFilter when the order of these styles doesn't matter. Maybe the eventually add an option to mark order-independent styles directly.

@wende60

This comment has been minimized.

Copy link

commented Aug 23, 2018

also got these "conflicting order between " while compiling and a rollback to 0.4.1 solved the problem...

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Aug 23, 2018

@wende60 you should solve order problem, not downgrade

@wende60

This comment has been minimized.

Copy link

commented Aug 23, 2018

@evilebottnawi unfortunally i do not even understand what i have to order here... the loaders? Maybe you can give me a hint...

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Aug 23, 2018

@wende60 looks above and read post #250 (comment)

@wende60

This comment has been minimized.

Copy link

commented Aug 23, 2018

@evilebottnawi do i understand it right: i should play around with the order of imports in the file that is - maybe - the location? Ok, will tryout... thanks

@timothywisdom

This comment has been minimized.

Copy link

commented Aug 28, 2018

We used the sort-import plugin for VS Code to insure our entire team is importing modules in the same order.
https://marketplace.visualstudio.com/items?itemName=amatiasq.sort-imports

Unfortunately, even after insuring the order is the same, we still see these warnings from the mini-css-extract-plugin

@michael-ciniawsky

This comment has been minimized.

Copy link
Member

commented Aug 28, 2018

@timothywisdom Sorting imports/modules per file (within) !== Import/Module Order in the Import/Module Tree/Graph (in relation to other files)

@jsg2021

This comment has been minimized.

Copy link

commented Aug 28, 2018

This seems like an unreasonable request (to ensure order within our graph)... we need a way to turn this off for projects that don't care. For example, in my projects each component's styles are self contained so order is only important within each component. (each component has a very unique class name root and all selectors are scoped to them)

@timothywisdom

This comment has been minimized.

Copy link

commented Aug 28, 2018

I'm confused - how do I sort "Import/Module Order in the Import/Module Tree/Graph"?

@jsg2021

This comment has been minimized.

Copy link

commented Aug 28, 2018

I think you would have to layout all your imports and make sure to always import things in the same order following the tree traversal order. (Not ideal)

@timothywisdom

This comment has been minimized.

Copy link

commented Aug 28, 2018

I believe I have done that via the sort-imports plugin for VS Code.
This insures all imported modules are imported via the same order logic in every file. But according to @michael-ciniawsky, that's not good enough so I'm not sure how to proceed.

Edit: actually, I'm sorting them alphabetically, not by tree-traversal order. That would be a nightmare to figure out for every file

@michael-ciniawsky

This comment has been minimized.

Copy link
Member

commented Aug 28, 2018

It's very inconvenient at best and realistically unmanagable at a certain project size. That's what CSS Module (automatically) or a CSS naming convention (e.g BEM/ITCSS(Namspace + BEM)) (manually) are for. Nevertheless if one uses CSS without particular care on the matter he/she likely runs into issue with the CSS Cascade and there should be a warning at least (optional)

@timothywisdom It's always hard to tell why you get these warnings and where within your project. I'm not saying sorting them for every file doesn't eventually help, but it definitely will not solve all issues.

See #250 (comment)

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

@ulivz

This comment has been minimized.

Copy link

commented Sep 4, 2018

This was truly a bug I think. I have following structure:

├── ActionSheetCard
│   ├── index.js
│   └── index.less
├── CardWrap
│   └── index.js
├── ImageView
│   └── index.js
├── Request
│   ├── index.js
│   └── index.less
├── ToAlipay
│   ├── index.js
│   └── index.less
├── ToNewUrl
│   ├── index.js
│   └── index.less
├── color.less
└── index.js

Each index.less was imported by its adjacent index.js, but this warning was still here:

chunk vendors [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/_css-loader@1.0.0@css-loader??ref--18-2!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--18-4!./node_modules/_antd-mobile@2.2.3@antd-mobile/lib/style/index.less
 * css ./node_modules/_css-loader@1.0.0@css-loader??ref--18-2!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--18-4!./node_modules/_antd-mobile@2.2.3@antd-mobile/es/action-sheet/style/index.less
 * css ./node_modules/_css-loader@1.0.0@css-loader??ref--18-2!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--18-4!./node_modules/_antd-mobile@2.2.3@antd-mobile/es/toast/style/index.less
 * css ./node_modules/_css-loader@1.0.0@css-loader??ref--18-2!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--18-4!./node_modules/_antd-mobile@2.2.3@antd-mobile/es/button/style/index.less
 * css ./node_modules/_css-loader@1.0.0@css-loader??ref--18-2!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js??ref--18-4!./node_modules/_antd-mobile@2.2.3@antd-mobile/es/white-space/style/index.less
@jsg2021

This comment has been minimized.

Copy link

commented Sep 4, 2018

@ulivz the warning output you gave doesn't line up with your example structure.

@psyanite

This comment has been minimized.

Copy link

commented Mar 13, 2019

I am also using MiniCssExtractPlugin with ts-loader and experience seeing these warnings:

WARNING in chunk admin-site [mini-css-extract-plugin]
Conflicting order between:
 * css ../node_modules/css-loader!../node_modules/postcss-loader/lib!../node_modules/sass-loader/lib/loader.js!./controls/card.sass
 * css ../node_modules/css-loader!../node_modules/postcss-loader/lib!../node_modules/sass-loader/lib/loader.js!./components/container.sass
 * css ../node_modules/css-loader!../node_modules/postcss-loader/lib!../node_modules/sass-loader/lib/loader.js!./controls/logo.sass

But am unable to figure out if these are false-warnings

@felixmosh

This comment has been minimized.

Copy link

commented Apr 4, 2019

Is it possible to point out the problematic imports (the file name), or something else in-order to help solve this warning?

@evilebottnawi

This comment has been minimized.

Copy link
Member

commented Apr 5, 2019

Close in favor #362

@StarpTech

This comment has been minimized.

Copy link

commented Apr 18, 2019

In my case the order is relevant and it produces a broken html layout. How can I avoid it? I only import a single sass file per component in next.js.

@ruijielou

This comment has been minimized.

Copy link

commented Apr 26, 2019

This error can be avoided by separating the style files of common components into separate files for loading.

@psyanite

This comment has been minimized.

Copy link

commented Apr 26, 2019

Yeah that's what I don't understand. My error is for:
card.sass
container.sass
logo.sass

but these three files do not share any css styles.

Has anyone able to change the code so the warning doesn't show anymore?

@phattranky

This comment has been minimized.

Copy link

commented Apr 29, 2019

I just reorder my imports of the conflicting components. Then the issues were solved.

My FullScreenQuizDialog conflict with others. So I try to move it to the bottom of the imports
Screen Shot 2019-04-30 at 6 07 40 AM
Screen Shot 2019-04-30 at 6 08 04 AM

herschel666 added a commit to xing/hops that referenced this issue May 13, 2019

fix(postcss): filter conflicting order warnings
...since they should not be relevant in the context of scoped CSS
modules. For more informations check out [sokra's comment](webpack-contrib/mini-css-extract-plugin#250 (comment))
and the surrounding content of the issue.

herschel666 added a commit to xing/hops that referenced this issue May 13, 2019

fix(postcss): filter conflicting order warnings
...since they should not be relevant in the context of scoped CSS
modules. For more informations check out [sokra's comment](webpack-contrib/mini-css-extract-plugin#250 (comment))
and the surrounding content of the issue.

ZauberNerd added a commit to xing/hops that referenced this issue May 13, 2019

fix(postcss): filter conflicting order warnings
...since they should not be relevant in the context of scoped CSS
modules. For more informations check out [sokra's comment](webpack-contrib/mini-css-extract-plugin#250 (comment))
and the surrounding content of the issue.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.