Skip to content

test: failing test cases for inline syntax and modules: auto #1273

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.

Sign up for GitHub

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

Closed
wants to merge 1 commit into from
Closed

test: failing test cases for inline syntax and modules: auto #1273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion test/__snapshots__/loader.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -675,7 +675,7 @@ Array [
"",
],
Array [
"plain.scss!=!../../src/index.js?[ident]!./index-loader-syntax-sass.css",
"button.modules.css!=!./index-loader-syntax-sass.css",
".baz {
width: 5px;
}",
Expand Down Expand Up @@ -733,6 +733,20 @@ Array [
"./index-loader-syntax.css",
".a {
color: red;
}",
"",
],
Array [
"button.modules.css!=!./index-loader-syntax-sass.css",
".baz {
width: 5px;
}",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note they aren't hashed

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do not use index-loader-syntax-sass.modules.css? Because request here is index-loader-syntax-sass.css

Copy link
Contributor Author

@jquense jquense Mar 11, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that wouldn't illustrate the problem. css-loader only looks at the resourcePath, not the matchResource. My goal for using this syntax is as an alternative to virtual files. ideally i'd want this to work in the case where there is no resourcePath

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

e.g. having this button.module.scss!=!./base64-loader/index.js?[ident] work, at least from what Tobias suggested in the other issue. adding a resource to the end is just a hack to get something working

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can't do it, because button.module.scss can be any format...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

due this https://github.com/webpack-contrib/css-loader/blob/master/src/utils.js#L73

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about button2.module.css?modules=true!=!./my-loader/!.button.js?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can implement modules on own side

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like reimplement it? I could do that, but it's a lot of work. The hope/goal was to use the users existing config. If we need to reimplement css-loader, I can avoid all of this and write the whole thing as a plugin probably but that's more config and more duplicated work. It also doesn't solve the problem for anyone else trying to use virtual modules in this way, like svelte

Copy link
Contributor Author

@jquense jquense Mar 14, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the specific hard part of that plan is when there are things in front of css-loader:

button2.module.scss!=!./my-loader?modules=true!.button.js

resolves fully to:

css-loader!sass-loader!my-loader?modules!./button.js

my-loader can't do modules at it's spot because Sass still needs to run. my loader also can't enable modules on the lower css-loader because it would change the option for all files. The only thing it can is something like: webpack/webpack#10350 which i say works great, but have since realized does not work well at scale for a few, hard to describe, reasons that causes styles to be included multiple times and out of order, due to module id's being (correctly) different between the plain require and compiled requires

"",
],
Array [
"button.module.scss!=!./base64-loader/index.js?[ident]!./simple.js",
".foo {
color: red;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto

}",
"",
],
Expand Down
4 changes: 4 additions & 0 deletions test/fixtures/base64-loader/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = function loader(content) {
console.log(Buffer.from(this.query.slice(1), 'base64').toString('ascii'))
return Buffer.from(this.query.slice(1), 'base64').toString('ascii');
};
10 changes: 8 additions & 2 deletions test/fixtures/index-loader-syntax.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import css from './index-loader-syntax.css';

__export__ = css;
import styles from 'button.modules.css!=!./index-loader-syntax-sass.css'

export default css;
// the base64 decodes to ".foo { color: red; }"
import styles2 from './button.module.scss!=!./base64-loader?LmZvbyB7IGNvbG9yOiByZWQ7IH0=!./simple.js'


__export__ = [...css, ...styles, ...styles2];

export default css;
1 change: 1 addition & 0 deletions test/loader.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -553,6 +553,7 @@ describe("loader", () => {
expect(getModuleSource("./index-loader-syntax.css", stats)).toMatchSnapshot(
"module"
);

expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
"result"
);
Expand Down