@@ -43,6 +43,22 @@ test.describe("Vite CSS dev", () => {
43
43
],
44
44
});
45
45
` ,
46
+ "app/entry.client.tsx" : js `
47
+ import "./entry.client.css";
48
+
49
+ import { RemixBrowser } from "@remix-run/react";
50
+ import { startTransition, StrictMode } from "react";
51
+ import { hydrateRoot } from "react-dom/client";
52
+
53
+ startTransition(() => {
54
+ hydrateRoot(
55
+ document,
56
+ <StrictMode>
57
+ <RemixBrowser />
58
+ </StrictMode>
59
+ );
60
+ });
61
+ ` ,
46
62
"app/root.tsx" : js `
47
63
import { Links, Meta, Outlet, Scripts, LiveReload } from "@remix-run/react";
48
64
@@ -64,6 +80,12 @@ test.describe("Vite CSS dev", () => {
64
80
);
65
81
}
66
82
` ,
83
+ "app/entry.client.css" : css `
84
+ .client-entry {
85
+ background: pink;
86
+ padding: ${ TEST_PADDING_VALUE } ;
87
+ }
88
+ ` ,
67
89
"app/styles-bundled.css" : css `
68
90
.index_bundled {
69
91
background: papayawhip;
@@ -113,12 +135,14 @@ test.describe("Vite CSS dev", () => {
113
135
return (
114
136
<div id="index">
115
137
<input />
116
- <div data-css-modules className={cssModulesStyles.index}>
117
- <div data-css-linked className="index_linked">
118
- <div data-css-bundled className="index_bundled">
119
- <div data-css-vanilla-global className="index_vanilla_global">
120
- <div data-css-vanilla-local className={stylesVanillaLocal.index}>
121
- <h2>CSS test</h2>
138
+ <div data-client-entry className="client-entry">
139
+ <div data-css-modules className={cssModulesStyles.index}>
140
+ <div data-css-linked className="index_linked">
141
+ <div data-css-bundled className="index_bundled">
142
+ <div data-css-vanilla-global className="index_vanilla_global">
143
+ <div data-css-vanilla-local className={stylesVanillaLocal.index}>
144
+ <h2>CSS test</h2>
145
+ </div>
122
146
</div>
123
147
</div>
124
148
</div>
@@ -169,6 +193,10 @@ test.describe("Vite CSS dev", () => {
169
193
await page . goto ( `http://localhost:${ devPort } /` , {
170
194
waitUntil : "networkidle" ,
171
195
} ) ;
196
+ await expect ( page . locator ( "#index [data-client-entry]" ) ) . toHaveCSS (
197
+ "padding" ,
198
+ TEST_PADDING_VALUE
199
+ ) ;
172
200
await expect ( page . locator ( "#index [data-css-modules]" ) ) . toHaveCSS (
173
201
"padding" ,
174
202
TEST_PADDING_VALUE
@@ -205,6 +233,10 @@ test.describe("Vite CSS dev", () => {
205
233
// Ensure no errors on page load
206
234
expect ( pageErrors ) . toEqual ( [ ] ) ;
207
235
236
+ await expect ( page . locator ( "#index [data-client-entry]" ) ) . toHaveCSS (
237
+ "padding" ,
238
+ TEST_PADDING_VALUE
239
+ ) ;
208
240
await expect ( page . locator ( "#index [data-css-modules]" ) ) . toHaveCSS (
209
241
"padding" ,
210
242
TEST_PADDING_VALUE
@@ -300,8 +332,28 @@ test.describe("Vite CSS dev", () => {
300
332
UPDATED_TEST_PADDING_VALUE
301
333
) ;
302
334
335
+ // Ensure CSS updates were handled by HMR
303
336
await expect ( input ) . toHaveValue ( "stateful" ) ;
304
337
338
+ // The following change triggers a full page reload, so we check it after all the checks for HMR state preservation
339
+ let clientEntryCssContents = await fs . readFile (
340
+ path . join ( projectDir , "app/entry.client.css" ) ,
341
+ "utf8"
342
+ ) ;
343
+ await fs . writeFile (
344
+ path . join ( projectDir , "app/entry.client.css" ) ,
345
+ clientEntryCssContents . replace (
346
+ TEST_PADDING_VALUE ,
347
+ UPDATED_TEST_PADDING_VALUE
348
+ ) ,
349
+ "utf8"
350
+ ) ;
351
+
352
+ await expect ( page . locator ( "#index [data-client-entry]" ) ) . toHaveCSS (
353
+ "padding" ,
354
+ UPDATED_TEST_PADDING_VALUE
355
+ ) ;
356
+
305
357
expect ( pageErrors ) . toEqual ( [ ] ) ;
306
358
} ) ;
307
359
} ) ;
0 commit comments