-
-
Notifications
You must be signed in to change notification settings - Fork 602
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
fix: logic for order and media queries for imports #1018
Conversation
Codecov Report
@@ Coverage Diff @@
## master #1018 +/- ##
==========================================
- Coverage 99.56% 99.56% -0.01%
==========================================
Files 10 10
Lines 462 456 -6
Branches 131 129 -2
==========================================
- Hits 460 454 -6
Misses 2 2
Continue to review full report at Codecov.
|
@evilebottnawi does the order change here go with the style-loader change? The removal of the dedupe logic here is the reason why we are suddenly getting ordering issues in css-modules. Can we add that back? I can send a PR |
It is not affected on style-loader, it was a bug, look at the tests |
I see a bug for media queries but not a test for the dedupe logic which was also removed here. The removal of the logic to prevent modules from being included twice was a breaking change. Between this change and the style-loader change css-modules basically can't be used anymore, we've had to pin to older versions otherwise all our apps break. |
No, style-loader insert additional module due bug in algorithm inserting into DOM, look at |
Look at here too https://github.com/webpack-contrib/css-loader/pull/1018/files#diff-1a1fda967405ba229730a1fd3fb9e9cbR3, it was invalid and break css spec about |
yes and there is ALSO a breaking change here. I realize that there was a bug around css imports, but the fix also breaks css-modules and makes it unusable. css-module Without the deduping logic, |
The fix, I think, is that icss import's should be treated separately from url or |
It is bug const identifierCountMap = {};
for (let i = 0; i < list.length; i++) {
const item = list[i];
const identifier = options.base ? item[0] + options.base : item[0];
const count = identifierCountMap[identifier] || 0;
identifierCountMap[identifier] = count + 1;
const part = {
css: item[1],
media: item[2],
sourceMap: item[3],
};
if (!stylesInDom[identifier]) {
stylesInDom[identifier] = [];
}
if (stylesInDom[identifier][count]) {
stylesInDom[identifier][count](part);
} else {
stylesInDom[identifier][count] = addStyle(part, options);
}
} It is solve problem with |
I realize there is a bug in style-loader. However, We downgraded style-loader and css-modules was still broken with this change. Since this changes what is exported it may also break mini-extract-css-plugin, unless it dedupes styles Consider this case: base-button.css .btn {
height: 30px;
} custom-button.css .custom-btn {
composes: btn from './base-button.css';
height: 60px;
} toolbar.css @value btn from './base-button.css';
.toolbar > btn {
margin-left: 10px
} page.css .page-btn {
composes: custom-btn from './custom-button.css';
}
.page-toolbar {
composes: toolbar from './toolbar.css'
} before this change PAGE.css would compile to: exports = [
// exports from custom button
['./base-button.css', ...]
['./custom-button.css', ...]
// exports from toolbar
['./toolbar.css', ...]
// exports from page
['./page.css', ...]
] NOW it looks like: exports = [
// exports from custom button
['./base-button.css', ...]
['./custom-button.css', ...]
// exports from toolbar
['./base-button.css', ...] // <--- used to be not included
['./toolbar.css', ...]
// exports from page
['./page.css', ...]
] Because the it looks like with your loader fix this is still happen, b/c there are now 2 parts for './base-button.css' so the style will be added twice |
No, just test
No
both will be have count === Please look at code and test before saying some statements |
I did: https://codepen.io/jquense/pen/rNavVGX?editors=0012 it never updates, only inserts.
That is never called b/c count is different, unless it's used differently |
Are you sure what you have this using your example? Because i have other structure with other module ids and it is allow to dedupe modules. Do you try mini-css-extract-plugin? |
I definitely have it in our app, but that's not minimal. I'll try and turn this into a runnable repro in a few. But intuitively if every css file re-exports it's deps you'd get duplicates naturally. I'll see if I can write a test case |
@jquense webpack by default dedupe modules with same id, so |
This PR contains a:
Motivation / Use-Case
logic was wrong with media and for order
Breaking Changes
Should be not, but feel free to open new issue if you have problem(s)
Additional Info
No