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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

fix: handle #hash URL as external #17116

Merged
merged 3 commits into from May 3, 2023
Merged

fix: handle #hash URL as external #17116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
62d2a17
fix: handle `#hash` URL as external
alexander-akait May 1, 2023
ce4bb33
test: update
alexander-akait May 2, 2023
641db80
test: more
alexander-akait May 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
73 changes: 33 additions & 40 deletions lib/WebpackOptionsApply.js
View file
Open in desktop
Expand Up @@ -119,47 +119,40 @@ class WebpackOptionsApply extends OptionsApply {
if (options.externalsPresets.webAsync) {
//@ts-expect-error https://github.com/microsoft/TypeScript/issues/41697
const ExternalsPlugin = require("./ExternalsPlugin");
new ExternalsPlugin(
"import",
options.experiments.css
? ({ request, dependencyType }, callback) => {
if (dependencyType === "url") {
if (/^(\/\/|https?:\/\/)/.test(request))
return callback(null, `asset ${request}`);
} else if (dependencyType === "css-import") {
if (/^(\/\/|https?:\/\/)/.test(request))
return callback(null, `css-import ${request}`);
} else if (/^(\/\/|https?:\/\/|std:)/.test(request)) {
if (/^\.css(\?|$)/.test(request))
return callback(null, `css-import ${request}`);
return callback(null, `import ${request}`);
}
callback();
}
: /^(\/\/|https?:\/\/|std:)/
).apply(compiler);
new ExternalsPlugin("import", ({ request, dependencyType }, callback) => {
if (dependencyType === "url") {
if (/^(\/\/|https?:\/\/|#)/.test(request))
return callback(null, `asset ${request}`);
} else if (options.experiments.css && dependencyType === "css-import") {
if (/^(\/\/|https?:\/\/|#)/.test(request))
return callback(null, `css-import ${request}`);
} else if (
options.experiments.css &&
/^(\/\/|https?:\/\/|std:)/.test(request)
) {
if (/^\.css(\?|$)/.test(request))
return callback(null, `css-import ${request}`);
return callback(null, `import ${request}`);
}
callback();
}).apply(compiler);
} else if (options.externalsPresets.web) {
//@ts-expect-error https://github.com/microsoft/TypeScript/issues/41697
const ExternalsPlugin = require("./ExternalsPlugin");
new ExternalsPlugin(
"module",
options.experiments.css
? ({ request, dependencyType }, callback) => {
if (dependencyType === "url") {
if (/^(\/\/|https?:\/\/)/.test(request))
return callback(null, `asset ${request}`);
} else if (dependencyType === "css-import") {
if (/^(\/\/|https?:\/\/)/.test(request))
return callback(null, `css-import ${request}`);
} else if (/^(\/\/|https?:\/\/|std:)/.test(request)) {
if (/^\.css(\?|$)/.test(request))
return callback(null, `css-import ${request}`);
return callback(null, `module ${request}`);
}
callback();
}
: /^(\/\/|https?:\/\/|std:)/
).apply(compiler);
new ExternalsPlugin("module", ({ request, dependencyType }, callback) => {
if (dependencyType === "url") {
if (/^(\/\/|https?:\/\/|#)/.test(request))
return callback(null, `asset ${request}`);
} else if (options.experiments.css && dependencyType === "css-import") {
if (/^(\/\/|https?:\/\/|#)/.test(request))
return callback(null, `css-import ${request}`);
} else if (/^(\/\/|https?:\/\/|std:)/.test(request)) {
if (options.experiments.css && /^\.css((\?)|$)/.test(request))
return callback(null, `css-import ${request}`);
return callback(null, `module ${request}`);
}
callback();
}).apply(compiler);
} else if (options.externalsPresets.node) {
if (options.experiments.css) {
//@ts-expect-error https://github.com/microsoft/TypeScript/issues/41697
Expand All @@ -168,10 +161,10 @@ class WebpackOptionsApply extends OptionsApply {
"module",
({ request, dependencyType }, callback) => {
if (dependencyType === "url") {
if (/^(\/\/|https?:\/\/)/.test(request))
if (/^(\/\/|https?:\/\/|#)/.test(request))
return callback(null, `asset ${request}`);
} else if (dependencyType === "css-import") {
if (/^(\/\/|https?:\/\/)/.test(request))
if (/^(\/\/|https?:\/\/|#)/.test(request))
return callback(null, `css-import ${request}`);
} else if (/^(\/\/|https?:\/\/|std:)/.test(request)) {
if (/^\.css(\?|$)/.test(request))
Expand Down
16 changes: 4 additions & 12 deletions lib/css/CssParser.js
View file
Open in desktop
Expand Up @@ -380,12 +380,8 @@ class CssParser extends Parser {
break;
}
default: {
if (
// Ignore `url(#highlight)` URLs
/^#/.test(value) ||
// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
value.length === 0
) {
// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
if (value.length === 0) {
break;
}

Expand Down Expand Up @@ -429,12 +425,8 @@ class CssParser extends Parser {
) {
let value = normalizeUrl(input.slice(start + 1, end - 1), true);

if (
// Ignore `url(#highlight)` URLs
/^#/.test(value) ||
// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
value.length === 0
) {
// Ignore `url()`, `url('')` and `url("")`, they are valid by spec
if (value.length === 0) {
break;
}

Expand Down
2 changes: 1 addition & 1 deletion test/__snapshots__/ConfigCacheTestCases.longtest.js.snap
View file
Open in desktop
Expand Up @@ -765,7 +765,7 @@ Object {
"a187": " image-set(url(img.09a1a1112c577c279435.png)1x,url(img.09a1a1112c577c279435.png)2x,url(img.09a1a1112c577c279435.png)3x)",
"a188": " image-set(url(img.09a1a1112c577c279435.png)1x,url(img.09a1a1112c577c279435.png)2x,url(img.09a1a1112c577c279435.png)3x)",
"a189": " image-set(url(img.09a1a1112c577c279435.png)1x,url(img.09a1a1112c577c279435.png)2x,url(img.09a1a1112c577c279435.png)3x)",
"a19": " url('#line-marker')",
"a19": " url(#line-marker)",
"a190": " image-set(url(img.09a1a1112c577c279435.png)1x)",
"a191": " image-set(url(img.09a1a1112c577c279435.png)1x/* test*/,/* test*/url(img.09a1a1112c577c279435.png)2x)",
"a197": " \\\\u\\\\r\\\\l(img.09a1a1112c577c279435.png)",
Expand Down
2 changes: 1 addition & 1 deletion test/__snapshots__/ConfigTestCases.basictest.js.snap
View file
Open in desktop
Expand Up @@ -765,7 +765,7 @@ Object {
"a187": " image-set(url(img.09a1a1112c577c279435.png)1x,url(img.09a1a1112c577c279435.png)2x,url(img.09a1a1112c577c279435.png)3x)",
"a188": " image-set(url(img.09a1a1112c577c279435.png)1x,url(img.09a1a1112c577c279435.png)2x,url(img.09a1a1112c577c279435.png)3x)",
"a189": " image-set(url(img.09a1a1112c577c279435.png)1x,url(img.09a1a1112c577c279435.png)2x,url(img.09a1a1112c577c279435.png)3x)",
"a19": " url('#line-marker')",
"a19": " url(#line-marker)",
"a190": " image-set(url(img.09a1a1112c577c279435.png)1x)",
"a191": " image-set(url(img.09a1a1112c577c279435.png)1x/* test*/,/* test*/url(img.09a1a1112c577c279435.png)2x)",
"a197": " \\\\u\\\\r\\\\l(img.09a1a1112c577c279435.png)",
Expand Down
Binary file added test/configCases/asset-modules/only-hash-url/file.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions test/configCases/asset-modules/only-hash-url/index.js
View file
Open in desktop
@@ -0,0 +1,10 @@
import img from "#internal";

it("should allow to use an URL started with '#'", () => {
const url = new URL("#test", import.meta.url);
expect(url.hash).toBe("#test");
});

it("should allow to use an URL started with '#'", () => {
expect(img).toEndWith("path/images/file.png");
});
7 changes: 7 additions & 0 deletions test/configCases/asset-modules/only-hash-url/package.json
View file
Open in desktop
@@ -0,0 +1,7 @@
{
"name": "pkg",
"exports": "./pkg.mjs",
"imports": {
"#internal": "./file.png"
}
}
16 changes: 16 additions & 0 deletions test/configCases/asset-modules/only-hash-url/webpack.config.js
View file
Open in desktop
@@ -0,0 +1,16 @@
/** @type {import("../../../../").Configuration} */
module.exports = {
mode: "development",
output: {
assetModuleFilename: "images/file[ext]"
},
module: {
rules: [
{
test: /\.png$/,
type: "asset/resource"
}
]
},
target: "web"
};
1 change: 1 addition & 0 deletions test/configCases/css/basic-initial-only/style.css
View file
Open in desktop
@@ -1,3 +1,4 @@
@import url(https://test.cases/path/../../../../configCases/css/css-import/external.css);
@import "style-imported.css";
body {
background: red;
Expand Down
1 change: 1 addition & 0 deletions test/configCases/css/basic-initial-only/webpack.config.js
View file
Open in desktop
Expand Up @@ -2,6 +2,7 @@
module.exports = {
target: "web",
mode: "development",
externalsPresets: { web: false, webAsync: true },
experiments: {
css: true
}
Expand Down
14 changes: 14 additions & 0 deletions test/configCases/css/basic-web-async/index.js
View file
Open in desktop
@@ -0,0 +1,14 @@
import * as style from "./style.css";

it("should compile and load style on demand", done => {
expect(style).toEqual(nsObj({}));
import("./style2.css").then(x => {
expect(x).toEqual(nsObj({}));
const style = getComputedStyle(document.body);
expect(style.getPropertyValue("background")).toBe(" red");
expect(style.getPropertyValue("margin")).toBe(" 10px");
expect(style.getPropertyValue("color")).toBe(" green");
expect(style.getPropertyValue("padding")).toBe(" 20px 10px");
done();
}, done);
});
3 changes: 3 additions & 0 deletions test/configCases/css/basic-web-async/style-imported.css
View file
Open in desktop
@@ -0,0 +1,3 @@
body {
margin: 10px;
}
4 changes: 4 additions & 0 deletions test/configCases/css/basic-web-async/style.css
View file
Open in desktop
@@ -0,0 +1,4 @@
@import "style-imported.css";
body {
background: red;
}
3 changes: 3 additions & 0 deletions test/configCases/css/basic-web-async/style2-imported.css
View file
Open in desktop
@@ -0,0 +1,3 @@
body {
padding: 20px 10px;
}
4 changes: 4 additions & 0 deletions test/configCases/css/basic-web-async/style2.css
View file
Open in desktop
@@ -0,0 +1,4 @@
@import "./style2-imported.css";
body {
color: green;
}
8 changes: 8 additions & 0 deletions test/configCases/css/basic-web-async/test.config.js
View file
Open in desktop
@@ -0,0 +1,8 @@
module.exports = {
moduleScope(scope) {
const link = scope.window.document.createElement("link");
link.rel = "stylesheet";
link.href = "bundle0.css";
scope.window.document.head.appendChild(link);
}
};
9 changes: 9 additions & 0 deletions test/configCases/css/basic-web-async/webpack.config.js
View file
Open in desktop
@@ -0,0 +1,9 @@
/** @type {import("../../../../").Configuration} */
module.exports = {
target: "web",
mode: "development",
externalsPresets: { web: false, webAsync: true },
experiments: {
css: true
}
};
5 changes: 5 additions & 0 deletions test/configCases/css/urls/nested.css
View file
Open in desktop
@@ -0,0 +1,5 @@
@import url("#test");

.nested {
background: url('./img.png');
}
2 changes: 2 additions & 0 deletions test/configCases/css/urls/spacing.css
View file
Open in desktop
@@ -1,3 +1,5 @@
@import "./nested.css";

div {
a: url('./img.png');
}
Expand Down
8 changes: 8 additions & 0 deletions test/helpers/FakeDocument.js
View file
Open in desktop
Expand Up @@ -155,6 +155,10 @@ class FakeSheet {
);

css = css.replace(/@import url\("([^"]+)"\);/g, (match, url) => {
if (url.startsWith("#")) {
return url;
}

return fs.readFileSync(
path.resolve(
this._basePath,
Expand Down Expand Up @@ -191,6 +195,10 @@ class FakeSheet {
"utf-8"
);
css = css.replace(/@import url\("([^"]+)"\);/g, (match, url) => {
if (url.startsWith("#")) {
return url;
}

return fs.readFileSync(
path.resolve(
this._basePath,
Expand Down