v1.1.0 broke ant-design style loading

[davidlougheed]

• Operating System: Ubuntu 18.04
• Node Version: 10.17
• NPM Version: 6.13.4
• webpack Version: 4.41.4
• style-loader Version: 1.1.1

Expected Behavior

ant-design styles show up as normal.

Actual Behavior

some styles do not get loaded.

Code

https://gist.github.com/davidlougheed/4d97bf9107a13dfb84c0f492624783e1

Project: https://github.com/c3g/chord_web

How Do We Reproduce?

• Install style-loader 1.1.x
• Run npm run watch
• Try to load site; styles are broken

Before screenshot: http://dlougheed.com/Screenshot%20from%202019-12-20%2015-02-32.png
After screenshot: http://dlougheed.com/Screenshot%20from%202019-12-20%2015-05-21.png

[obartra]

I'm running into similar visual changes when updating from 1.0.2 to 1.1.0

[nickbrit]

Looks like style-loader 1.1.x ignores files with the same name in different folders.
home.react.js:
import 'pages/home/styles.scss';

about.react.js:
import 'pages/about/styles.scss';

Only one of styles.scss will be imported.

[davidlougheed]

In c7d6e3a an ID system for resources is added; I haven't looked closely but that seems to indicate to me that file names are being incorrectly used as complete IDs @nickbrit

[wang-fu]

it`s looks like cached style by id in https://github.com/webpack-contrib/style-loader/blob/master/src/runtime/injectStylesIntoStyleTag.js#L61, at the same id with different content will be overwritten

[yangshun]

This is the PR responsible: #443

[yangshun]

After some investigation, I found that loaderUtils.stringifyRequest() does this:

> loaderUtils.stringifyRequest(this, '!!/Users/yangshun/Developer/style-loader/node_modules/css-loader/dist/cjs.js??ref--5-1!/Users/yangshun/Developer/style-loader/test/manual/src/bar/style.module.css')
!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!./style.module.css

> loaderUtils.stringifyRequest(this, '!!/Users/yangshun/Developer/style-loader/node_modules/css-loader/dist/cjs.js??ref--5-1!/Users/yangshun/Developer/style-loader/test/manual/src/foo/style.module.css')
!!../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!./style.module.css

The ID produced is the same, for two different CSS module files.

[alexander-akait]

WIP on this

[alexander-akait]

I am very tired, don't sleep 3 days and my depression kills me, if somebody want to investigate and fix it, feel free to send a PR, i will do it tomorrow, i can't do it today, sorry guys

[yangshun]

We appreciate your efforts in maintaining and pushing the webpack ecosystem to greater heights. Please take care!

[cenfun]

Looks like style-loader 1.1.x ignores files with the same name in different folders.
home.react.js:
import 'pages/home/styles.scss';

about.react.js:
import 'pages/about/styles.scss';

Only one of styles.scss will be imported.

same issue here.
but version 1.0.2 works

[DemonCloud]

new version style-loader 1.1.1 will lose to load less css module

same issue here.

but version 1.0.2 works

[otakustay]

I can confirm this issue prevents relative import of css files to load into DOM, this id used in addModulesToDom function looks like:

!!../../../node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-2!../../../node_modules/postcss-loader/src/index.js??ref--5-oneOf-2-3!../../../node_modules/less-loader/dist/cjs.js??ref--5-oneOf-2-4!../../../node_modules/style-resources-loader/lib/index.js??ref--5-oneOf-2-5!./index.less

Noticed that the last segment is ./index.less, a relative path which can be conflict with other components

[erdalstk]

Also for DraftJs Editor Plugin css imports, the situation is same.

[alexander-akait]

Today i am working on the problem, sorry for delay

[alexander-akait]

Done https://github.com/webpack-contrib/style-loader/releases/tag/v1.1.2, please leave feedback, it is big refactoring so sometimes bugs happen

[davidlougheed]

thanks for taking a look!

[ybiquitous]

Thank you!