Skip to content

Commit eccc5b2

Browse files
JSerFengJSerFeng
authored
fix: css runtime (#11544)
* fix: css runtime * fix: tests
1 parent 8bd395f commit eccc5b2

File tree

9 files changed

+107
-5
lines changed

9 files changed

+107
-5
lines changed

‎crates/rspack_plugin_extract_css/src/runtime/css_load.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ var findStylesheet = function (href, fullhref) {
3737
for (var i = 0; i < existingLinkTags.length; i++) {
3838
var tag = existingLinkTags[i];
3939
var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
40+
if (dataHref) {
41+
dataHref = dataHref.split('?')[0]
42+
}
4043
if (tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return tag;
4144
}
4245

‎packages/rspack-test-tools/tests/hotCases/css/recovery/__snapshots__/web/2.snap.txt‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
## Asset Files
77
- Bundle: bundle.js
88
- Manifest: main.LAST_HASH.hot-update.json, size: 28
9-
- Update: main.hot-update.js, size: 7115
9+
- Update: main.hot-update.js, size: 7153
1010

1111
## Manifest
1212

@@ -80,8 +80,9 @@ function updateCss(el, url) {
8080
let normalizedUrl;
8181
if (url) normalizedUrl = url;
8282
else {
83-
if (!el.href) return;
84-
normalizedUrl = el.href.split("?")[0];
83+
let href = el.getAttribute("href");
84+
if (!href) return;
85+
normalizedUrl = href.split("?")[0];
8586
}
8687
if (!isUrlRequest(normalizedUrl) || !1 === el.isLoaded || !normalizedUrl || !(normalizedUrl.indexOf(".css") > -1)) return;
8788
el.visited = !0;

‎packages/rspack/src/runtime/cssExtractHmr.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,12 @@ function getCurrentScriptUrl(moduleId: string) {
109109
function updateCss(el: HTMLLinkElement & Record<string, any>, url?: string) {
110110
let normalizedUrl: string;
111111
if (!url) {
112-
if (!el.href) {
112+
const href = el.getAttribute("href");
113+
if (!href) {
113114
return;
114115
}
115116

116-
normalizedUrl = el.href.split("?")[0];
117+
normalizedUrl = href.split("?")[0];
117118
} else {
118119
normalizedUrl = url;
119120
}

‎tests/e2e/cases/css/update-initial-chunks-after-hmr/index.test.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { test, expect } from "@/fixtures";
2+
3+
const COLOR_BLUE = "rgb(163, 255, 255)"
4+
const COLOR_WHITE = "rgb(255, 255, 255)"
5+
6+
test("should update body css", async ({ page, fileAction }) => {
7+
await expect(page.locator("body")).toHaveCSS("background-color", COLOR_BLUE);
8+
9+
// trigger css hmr
10+
fileAction.updateFile("src/index.js", content =>
11+
content.replace('import "./blue.css";', '// import "./blue.css";')
12+
);
13+
14+
await expect(page.locator("body")).toHaveCSS("background-color", COLOR_WHITE);
15+
16+
// initial css chunk update, without css hmr
17+
fileAction.updateFile("src/index.js", content =>
18+
content.replace("//", "")
19+
);
20+
21+
await expect(page.locator("body")).toHaveCSS("background-color", COLOR_BLUE);
22+
});

‎tests/e2e/cases/css/update-initial-chunks-after-hmr/rspack.config.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
const { rspack } = require("@rspack/core");
2+
3+
/** @type { import('@rspack/core').RspackOptions } */
4+
module.exports = {
5+
context: __dirname,
6+
mode: "development",
7+
entry: {
8+
main: ["./src/index.css", "./src/index.js"]
9+
},
10+
devServer: {
11+
hot: true
12+
},
13+
plugins: [
14+
new rspack.HtmlRspackPlugin({
15+
template: "./src/index.html",
16+
inject: "body"
17+
}),
18+
new rspack.CssExtractRspackPlugin({
19+
filename: "static/style.css",
20+
})
21+
],
22+
module: {
23+
rules: [
24+
{
25+
test: /\.css$/,
26+
use: [
27+
rspack.CssExtractRspackPlugin.loader,
28+
"css-loader",
29+
]
30+
}
31+
]
32+
},
33+
optimization: {
34+
splitChunks: {
35+
cacheGroups: {
36+
style: {
37+
name: "style",
38+
test: /\.css$/,
39+
chunks: "all",
40+
enforce: true
41+
}
42+
}
43+
}
44+
},
45+
watchOptions: {
46+
poll: 1000
47+
},
48+
experiments: {
49+
css: false
50+
}
51+
};

‎tests/e2e/cases/css/update-initial-chunks-after-hmr/src/blue.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
background-color: rgb(163, 255, 255);
3+
}

‎tests/e2e/cases/css/update-initial-chunks-after-hmr/src/index.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
background-color: #ffffff;
3+
}

‎tests/e2e/cases/css/update-initial-chunks-after-hmr/src/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Document</title>
9+
</head>
10+
11+
<body>
12+
<div id="root"></div>
13+
</body>
14+
15+
</html>

‎tests/e2e/cases/css/update-initial-chunks-after-hmr/src/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import "./blue.css";
2+
3+
module.hot.accept()

0 commit comments

Comments
 (0)