Skip to content

Commit cf81c4b

Browse files
fix: experimentalUseImportModule works with new URL(...) syntax
1 parent e70a0a9 commit cf81c4b

File tree

172 files changed

+832
-238
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

172 files changed

+832
-238
lines changed

package-lock.json

+109-83
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
"babel-jest": "^27.0.6",
5757
"bootstrap": "^4.6.0",
5858
"cross-env": "^7.0.3",
59-
"css-loader": "^5.2.6",
59+
"css-loader": "^6.2.0",
6060
"del": "^6.0.0",
6161
"del-cli": "^4.0.0",
6262
"es-check": "^6.0.0",

src/index.js

+12
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import {
99
trueFn,
1010
MODULE_TYPE,
1111
AUTO_PUBLIC_PATH,
12+
ABSOLUTE_PUBLIC_PATH,
13+
SINGLE_DOT_PATH_SEGMENT,
14+
DOUBLE_DOT_PATH_SEGMENT,
1215
compareModulesByIdentifier,
1316
} from "./utils";
1417

@@ -1034,6 +1037,15 @@ class MiniCssExtractPlugin {
10341037

10351038
const undoPath = getUndoPath(filename, compiler.outputPath, false);
10361039

1040+
content = content.replace(new RegExp(ABSOLUTE_PUBLIC_PATH, "g"), "");
1041+
content = content.replace(
1042+
new RegExp(SINGLE_DOT_PATH_SEGMENT, "g"),
1043+
"."
1044+
);
1045+
content = content.replace(
1046+
new RegExp(DOUBLE_DOT_PATH_SEGMENT, "g"),
1047+
".."
1048+
);
10371049
content = content.replace(new RegExp(AUTO_PUBLIC_PATH, "g"), undoPath);
10381050

10391051
if (module.sourceMap) {

src/loader.js

+15-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import {
44
findModuleById,
55
evalModuleCode,
66
AUTO_PUBLIC_PATH,
7+
ABSOLUTE_PUBLIC_PATH,
8+
SINGLE_DOT_PATH_SEGMENT,
9+
DOUBLE_DOT_PATH_SEGMENT,
710
stringifyRequest,
811
} from "./utils";
912
import schema from "./loader-options.json";
@@ -193,15 +196,23 @@ export function pitch(request) {
193196
return;
194197
}
195198

199+
const isAbsolutePublicPath = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/.test(publicPath);
200+
const publicPathForExtract = isAbsolutePublicPath
201+
? publicPath
202+
: `${ABSOLUTE_PUBLIC_PATH}${publicPath
203+
.replace(/\./g, SINGLE_DOT_PATH_SEGMENT)
204+
.replace(/\.\./g, DOUBLE_DOT_PATH_SEGMENT)}`;
205+
196206
this.importModule(
197207
`${this.resourcePath}.webpack[javascript/auto]!=!${request}`,
198208
{
199209
layer: options.layer,
200-
publicPath,
210+
publicPath: publicPathForExtract,
201211
},
202-
(err, exports) => {
203-
if (err) {
204-
callback(err);
212+
(error, exports) => {
213+
if (error) {
214+
callback(error);
215+
205216
return;
206217
}
207218

src/utils.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,12 @@ function compareModulesByIdentifier(a, b) {
5353
}
5454

5555
const MODULE_TYPE = "css/mini-extract";
56-
const AUTO_PUBLIC_PATH = "__MINI_CSS_EXTRACT_PLUGIN_PUBLIC_PATH__";
56+
const AUTO_PUBLIC_PATH = "__mini_css_extract_plugin_public_path_auto__";
57+
const ABSOLUTE_PUBLIC_PATH = "webpack:///mini-css-extract-plugin/";
58+
const SINGLE_DOT_PATH_SEGMENT =
59+
"__mini_css_extract_plugin_single_dot_path_segment__";
60+
const DOUBLE_DOT_PATH_SEGMENT =
61+
"__mini_css_extract_plugin_double_dot_path_segment__";
5762

5863
function isAbsolutePath(str) {
5964
return path.posix.isAbsolute(str) || path.win32.isAbsolute(str);
@@ -106,5 +111,8 @@ export {
106111
compareModulesByIdentifier,
107112
MODULE_TYPE,
108113
AUTO_PUBLIC_PATH,
114+
ABSOLUTE_PUBLIC_PATH,
115+
SINGLE_DOT_PATH_SEGMENT,
116+
DOUBLE_DOT_PATH_SEGMENT,
109117
stringifyRequest,
110118
};

test/TestMemoryFS.test.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ const assetsNames = (assets) => assets.map((asset) => asset.name);
88
describe("TestMemoryFS", () => {
99
it("should preserve asset even if not emitted", (done) => {
1010
const casesDirectory = path.resolve(__dirname, "cases");
11-
const directoryForCase = path.resolve(casesDirectory, "simple-publicpath");
11+
const directoryForCase = path.resolve(
12+
casesDirectory,
13+
"publicpath-default-auto"
14+
);
1215
// eslint-disable-next-line import/no-dynamic-require, global-require
1316
const webpackConfig = require(path.resolve(
1417
directoryForCase,

test/__snapshots__/emit-option.test.js.snap

+9-9
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,9 @@ exports[`emit option should work with locals and invalidate cache when emit opti
5959
<style id=\\"existing-style\\">.existing { color: yellow }</style>
6060
</head>
6161
<body>
62-
css.foo: _1F17fUrdX_cbcyDHpFqmAD
63-
css.bar: _3TZVxmkrZR2cTfifKhDoZn
64-
css.baz: M-pzkE59YBii7EXzFyxE6
62+
css.foo: J2lpabaeIrMw_95s_HME
63+
css.bar: V4_dkftIz80Idb9RVpj3
64+
css.baz: BhqK6bijhySVfFKg1Jj5
6565
</body></html>"
6666
`;
6767
@@ -71,9 +71,9 @@ exports[`emit option should work with locals and invalidate cache when emit opti
7171
<style id=\\"existing-style\\">.existing { color: yellow }</style>
7272
</head>
7373
<body>
74-
css.foo-bar: VWLDg_rByGM4Rdhz5T3Ns
75-
css.bar: _3TZVxmkrZR2cTfifKhDoZn
76-
css.baz: M-pzkE59YBii7EXzFyxE6
74+
css.foo-bar: XDzcxRg1NQGrYrn90Pnq
75+
css.bar: V4_dkftIz80Idb9RVpj3
76+
css.baz: BhqK6bijhySVfFKg1Jj5
7777
</body></html>"
7878
`;
7979
@@ -115,9 +115,9 @@ exports[`emit option should work with locals when emit option is "false": DOM 1`
115115
<style id=\\"existing-style\\">.existing { color: yellow }</style>
116116
</head>
117117
<body>
118-
css.foo: _1F17fUrdX_cbcyDHpFqmAD
119-
css.bar: _3TZVxmkrZR2cTfifKhDoZn
120-
css.baz: M-pzkE59YBii7EXzFyxE6
118+
css.foo: J2lpabaeIrMw_95s_HME
119+
css.bar: V4_dkftIz80Idb9RVpj3
120+
css.baz: BhqK6bijhySVfFKg1Jj5
121121
</body></html>"
122122
`;
123123

test/cases/asset-modules/webpack.config.js

-3
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@ module.exports = {
99
use: [
1010
{
1111
loader: Self.loader,
12-
options: {
13-
publicPath: "",
14-
},
1512
},
1613
"css-loader",
1714
],
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default function loader() {
2+
const callback = this.async();
3+
4+
callback(
5+
null,
6+
`export default [
7+
[module.id, ".foo {background: url(" + new URL("./img.png", import.meta.url) + ")}", ""],
8+
[module.id, ".bar {background: url(" + new URL("../outer-img.png", import.meta.url) + ")}", ""],
9+
[module.id, ".baz {background: url(" + new URL("./nested/nested-img.png", import.meta.url) + ")}", ""]
10+
]`
11+
);
12+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.foo {background: url(public/img.png)}
2+
.bar {background: url(outer-img.png)}
3+
.baz {background: url(public/nested/nested-img.png)}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default function loader() {
2+
const callback = this.async();
3+
4+
callback(
5+
null,
6+
`export default [
7+
[module.id, ".foo {background: url(" + new URL("./img.png", import.meta.url) + ")}", ""],
8+
[module.id, ".bar {background: url(" + new URL("../outer-img.png", import.meta.url) + ")}", ""],
9+
[module.id, ".baz {background: url(" + new URL("./nested/nested-img.png", import.meta.url) + ")}", ""]
10+
]`
11+
);
12+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default function loader() {
2+
const callback = this.async();
3+
4+
callback(
5+
null,
6+
`export default [
7+
[module.id, ".foo {background: url(" + new URL("./img.png", import.meta.url) + ")}", ""],
8+
[module.id, ".bar {background: url(" + new URL("../outer-img.png", import.meta.url) + ")}", ""],
9+
[module.id, ".baz {background: url(" + new URL("./nested/nested-img.png", import.meta.url) + ")}", ""]
10+
]`
11+
);
12+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.class {
2+
background: red;
3+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.foo {background: url(img.png)}
2+
.bar {background: url(../outer-img.png)}
3+
.baz {background: url(nested/nested-img.png)}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import path from "path";
2+
3+
import Self from "../../../src";
4+
5+
module.exports = {
6+
entry: "./index.js",
7+
context: path.resolve(__dirname, "app"),
8+
module: {
9+
rules: [
10+
{
11+
test: /\.css$/,
12+
use: [Self.loader, "./mockLoader"],
13+
},
14+
{
15+
test: /\.png$/,
16+
type: "asset/resource",
17+
generator: {
18+
filename: "[path][name][ext]",
19+
},
20+
},
21+
],
22+
},
23+
plugins: [
24+
new Self({
25+
filename: "[name].css",
26+
}),
27+
],
28+
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default function loader() {
2+
const callback = this.async();
3+
4+
callback(
5+
null,
6+
`export default [
7+
[module.id, ".foo {background: url(" + new URL("./img.png", import.meta.url) + ")}", ""],
8+
[module.id, ".bar {background: url(" + new URL("../outer-img.png", import.meta.url) + ")}", ""],
9+
[module.id, ".baz {background: url(" + new URL("./nested/nested-img.png", import.meta.url) + ")}", ""]
10+
]`
11+
);
12+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.class {
2+
background: red;
3+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.foo {background: url(/public/img.png)}
2+
.bar {background: url(/outer-img.png)}
3+
.baz {background: url(/public/nested/nested-img.png)}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.foo {background: url(/public/img.png)}
2+
.bar {background: url(/public/../outer-img.png)}
3+
.baz {background: url(/public/nested/nested-img.png)}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import path from "path";
2+
3+
import Self from "../../../src";
4+
5+
module.exports = {
6+
entry: "./index.js",
7+
context: path.resolve(__dirname, "app"),
8+
module: {
9+
rules: [
10+
{
11+
test: /\.css$/,
12+
use: [
13+
{
14+
loader: Self.loader,
15+
options: {
16+
publicPath: "/public/",
17+
},
18+
},
19+
"./mockLoader",
20+
],
21+
},
22+
{
23+
test: /\.png$/,
24+
type: "asset/resource",
25+
generator: {
26+
filename: "[path][name][ext]",
27+
},
28+
},
29+
],
30+
},
31+
plugins: [
32+
new Self({
33+
filename: "[name].css",
34+
}),
35+
],
36+
};

test/cases/file-loader/webpack.config.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,18 @@ module.exports = {
99
use: [
1010
{
1111
loader: Self.loader,
12+
},
13+
{
14+
loader: "css-loader",
1215
options: {
13-
publicPath: "",
16+
esModule: false,
1417
},
1518
},
16-
"css-loader",
1719
],
1820
},
1921
{
2022
test: /\.svg$/,
23+
type: "javascript/auto",
2124
use: [
2225
{
2326
loader: "file-loader",

test/cases/js-hash/expected/webpack-5-importModule/style.17f5571b796a525cec79.1.css

-4
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
.dDtFvCqivX5dncL54de5D {
2+
.Z_E0RPEyV1Psn6SZX9qd {
33
background: green;
44
}
55

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.Z_E0RPEyV1Psn6SZX9qd {
2+
background: red;
3+
}
4+

test/cases/js-hash/expected/webpack-5/style.3e1ac9a6569d80b3d351.2.css

-5
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
2+
.Hm__zqGZU_G0Lp44yFFz {
3+
background: green;
4+
}
5+

test/cases/js-hash/expected/webpack-5/style.678e24a6a30ce54e924b.1.css

-4
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.Hm__zqGZU_G0Lp44yFFz {
2+
background: red;
3+
}
4+

test/cases/new-url-with-public-path-auto/app/mockLoader.js

-12
This file was deleted.

test/cases/new-url-with-public-path-auto/test.filter.js

-1
This file was deleted.

test/cases/new-url-with-public-path/app/mockLoader.js

-12
This file was deleted.

test/cases/new-url-with-public-path/test.filter.js

-1
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
background: red;
3+
background-image: url(https://webpack.js.org/foo/c9e192c015437a21dea1.svg);
4+
}
5+

0 commit comments

Comments
 (0)