Skip to content

Commit db43ae5

Browse files
alexander-akaitalexander-akait
committed
fix: order of imported styles
1 parent 466cb39 commit db43ae5

File tree

4 files changed

+183
-167
lines changed

4 files changed

+183
-167
lines changed

‎test/__snapshots__/loader.test.js.snap

Lines changed: 0 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -138,160 +138,6 @@ exports[`loader should inject hmr code with HotModuleReplacementPlugin when the
138138
139139
exports[`loader should inject hmr code with HotModuleReplacementPlugin when the "injectType" option is "styleTag": warnings 1`] = `Array []`;
140140
141-
exports[`loader should keep right order when the "injectType" option is "lazySingletonStyleTag": DOM 1`] = `
142-
"<!DOCTYPE html><html><head>
143-
<title>style-loader test</title>
144-
<style id=\\"existing-style\\">.existing { color: yellow }</style>
145-
<style>div {
146-
background: red;
147-
}
148-
@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
149-
background: blue;
150-
}
151-
@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
152-
background: red;
153-
}
154-
@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
155-
background: blue;
156-
}
157-
@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
158-
width: 100%;
159-
height: 200px;
160-
}
161-
</style></head>
162-
<body>
163-
<h1>Body</h1>
164-
<div class=\\"target\\"></div>
165-
<iframe class=\\"iframeTarget\\"></iframe>
166-
167-
168-
</body></html>"
169-
`;
170-
171-
exports[`loader should keep right order when the "injectType" option is "lazySingletonStyleTag": errors 1`] = `Array []`;
172-
173-
exports[`loader should keep right order when the "injectType" option is "lazySingletonStyleTag": warnings 1`] = `Array []`;
174-
175-
exports[`loader should keep right order when the "injectType" option is "lazyStyleTag": DOM 1`] = `
176-
"<!DOCTYPE html><html><head>
177-
<title>style-loader test</title>
178-
<style id=\\"existing-style\\">.existing { color: yellow }</style>
179-
<style>div {
180-
background: red;
181-
}
182-
</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style>div {
183-
background: blue;
184-
}
185-
</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style>div {
186-
background: red;
187-
}
188-
</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style media=\\"screen and (min-width: 2000px)\\">div {
189-
background: blue;
190-
}
191-
</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style>div {
192-
width: 100%;
193-
height: 200px;
194-
}
195-
</style></head>
196-
<body>
197-
<h1>Body</h1>
198-
<div class=\\"target\\"></div>
199-
<iframe class=\\"iframeTarget\\"></iframe>
200-
201-
202-
</body></html>"
203-
`;
204-
205-
exports[`loader should keep right order when the "injectType" option is "lazyStyleTag": errors 1`] = `Array []`;
206-
207-
exports[`loader should keep right order when the "injectType" option is "lazyStyleTag": warnings 1`] = `Array []`;
208-
209-
exports[`loader should keep right order when the "injectType" option is "linkTag": DOM 1`] = `
210-
"<!DOCTYPE html><html><head>
211-
<title>style-loader test</title>
212-
<style id=\\"existing-style\\">.existing { color: yellow }</style>
213-
<link rel=\\"stylesheet\\" href=\\"3e5706a32a4bd8d3838c4c0d30316417.css\\"></head>
214-
<body>
215-
<h1>Body</h1>
216-
<div class=\\"target\\"></div>
217-
<iframe class=\\"iframeTarget\\"></iframe>
218-
219-
220-
</body></html>"
221-
`;
222-
223-
exports[`loader should keep right order when the "injectType" option is "linkTag": errors 1`] = `Array []`;
224-
225-
exports[`loader should keep right order when the "injectType" option is "linkTag": warnings 1`] = `Array []`;
226-
227-
exports[`loader should keep right order when the "injectType" option is "singletonStyleTag": DOM 1`] = `
228-
"<!DOCTYPE html><html><head>
229-
<title>style-loader test</title>
230-
<style id=\\"existing-style\\">.existing { color: yellow }</style>
231-
<style>div {
232-
background: red;
233-
}
234-
@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
235-
background: blue;
236-
}
237-
@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
238-
background: red;
239-
}
240-
@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
241-
background: blue;
242-
}
243-
@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
244-
width: 100%;
245-
height: 200px;
246-
}
247-
</style></head>
248-
<body>
249-
<h1>Body</h1>
250-
<div class=\\"target\\"></div>
251-
<iframe class=\\"iframeTarget\\"></iframe>
252-
253-
254-
</body></html>"
255-
`;
256-
257-
exports[`loader should keep right order when the "injectType" option is "singletonStyleTag": errors 1`] = `Array []`;
258-
259-
exports[`loader should keep right order when the "injectType" option is "singletonStyleTag": warnings 1`] = `Array []`;
260-
261-
exports[`loader should keep right order when the "injectType" option is "styleTag": DOM 1`] = `
262-
"<!DOCTYPE html><html><head>
263-
<title>style-loader test</title>
264-
<style id=\\"existing-style\\">.existing { color: yellow }</style>
265-
<style>div {
266-
background: red;
267-
}
268-
</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style>div {
269-
background: blue;
270-
}
271-
</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style>div {
272-
background: red;
273-
}
274-
</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style media=\\"screen and (min-width: 2000px)\\">div {
275-
background: blue;
276-
}
277-
</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style>div {
278-
width: 100%;
279-
height: 200px;
280-
}
281-
</style></head>
282-
<body>
283-
<h1>Body</h1>
284-
<div class=\\"target\\"></div>
285-
<iframe class=\\"iframeTarget\\"></iframe>
286-
287-
288-
</body></html>"
289-
`;
290-
291-
exports[`loader should keep right order when the "injectType" option is "styleTag": errors 1`] = `Array []`;
292-
293-
exports[`loader should keep right order when the "injectType" option is "styleTag": warnings 1`] = `Array []`;
294-
295141
exports[`loader should not generate source maps when previous loader don't emit them when the "injectType" option is "lazySingletonStyleTag": DOM 1`] = `
296142
"<!DOCTYPE html><html><head>
297143
<title>style-loader test</title>

‎test/loader.test.js

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -287,19 +287,6 @@ describe('loader', () => {
287287
expect(getErrors(stats)).toMatchSnapshot('errors');
288288
});
289289

290-
it(`should keep right order when the "injectType" option is "${injectType}"`, async () => {
291-
const entry = getEntryByInjectType('order.js', injectType);
292-
const compiler = getCompiler(entry, { injectType });
293-
const stats = await compile(compiler);
294-
295-
runInJsDom('main.bundle.js', compiler, stats, (dom) => {
296-
expect(dom.serialize()).toMatchSnapshot('DOM');
297-
});
298-
299-
expect(getWarnings(stats)).toMatchSnapshot('warnings');
300-
expect(getErrors(stats)).toMatchSnapshot('errors');
301-
});
302-
303290
if (['lazyStyleTag', 'lazySingletonStyleTag'].includes(injectType)) {
304291
it(`should work when ref is negative when the "injectType" option is "${injectType}"`, async () => {
305292
expect.assertions(3);

‎test/runtime/__snapshots__/injectStylesIntoStyleTag.test.js.snap

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,38 @@ exports[`addStyle should work with updates #11 1`] = `"<head><title>Title</title
9191
9292
exports[`addStyle should work with updates #11 2`] = `"<head><title>Title</title><style>.foo { color: black }</style><style>.bar { color: white }</style><script src=\\"https://example.com/script.js\\" id=\\"id\\"></script></head><body><h1>Hello world</h1></body>"`;
9393
94+
exports[`addStyle should work with updates #12 1`] = `"<head><title>Title</title><style>.order { color: red }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>.order { color: blue }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>.order { color: red }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style media=\\"screen and (min-width: 2000px)\\">.order { color: blue }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style></head><body><h1>Hello world</h1></body>"`;
95+
96+
exports[`addStyle should work with updates #12 2`] = `"<head><title>Title</title><style>.order { color: orange }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>.order { color: blue }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>.order { color: orange }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style media=\\"screen and (min-width: 2000px)\\">.order { color: blue }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style></head><body><h1>Hello world</h1></body>"`;
97+
98+
exports[`addStyle should work with updates #12 3`] = `"<head><title>Title</title><style>.foo { color: red }</style><style>.bar { color: blue }</style></head><body><h1>Hello world</h1></body>"`;
99+
100+
exports[`addStyle should work with updates #12 4`] = `"<head><title>Title</title></head><body><h1>Hello world</h1></body>"`;
101+
102+
exports[`addStyle should work with updates #13 1`] = `"<head><title>Title</title><style>.red { color: red }</style><style>.green { color: green }</style><style>.blue { color: blue }</style></head><body><h1>Hello world</h1></body>"`;
103+
104+
exports[`addStyle should work with updates #13 2`] = `"<head><title>Title</title><style>.red { color: black }</style><style>.green { color: green }</style><style>.blue { color: blue }</style></head><body><h1>Hello world</h1></body>"`;
105+
106+
exports[`addStyle should work with updates #13 3`] = `"<head><title>Title</title><style>.red { color: black }</style><style>.green { color: black }</style><style>.blue { color: blue }</style></head><body><h1>Hello world</h1></body>"`;
107+
108+
exports[`addStyle should work with updates #13 4`] = `"<head><title>Title</title><style>.red { color: black }</style><style>.green { color: black }</style><style>.blue { color: black }</style></head><body><h1>Hello world</h1></body>"`;
109+
110+
exports[`addStyle should work with updates #13 5`] = `"<head><title>Title</title><style>.green { color: black }</style><style>.blue { color: black }</style></head><body><h1>Hello world</h1></body>"`;
111+
112+
exports[`addStyle should work with updates #13 6`] = `"<head><title>Title</title><style>.blue { color: black }</style></head><body><h1>Hello world</h1></body>"`;
113+
114+
exports[`addStyle should work with updates #13 7`] = `"<head><title>Title</title></head><body><h1>Hello world</h1></body>"`;
115+
116+
exports[`addStyle should work with updates #14 1`] = `"<head><title>Title</title><style>.red { color: red }</style><style>.green { color: green }</style><style>.blue { color: blue }</style></head><body><h1>Hello world</h1></body>"`;
117+
118+
exports[`addStyle should work with updates #14 2`] = `"<head><title>Title</title><style>.red { color: red }</style><style>.green { color: black }</style><style>.blue { color: blue }</style></head><body><h1>Hello world</h1></body>"`;
119+
120+
exports[`addStyle should work with updates #14 3`] = `"<head><title>Title</title><style>.red { color: red }</style><style>.green { color: black }</style><style>.blue { color: blue }</style><style>.white { color: white }</style></head><body><h1>Hello world</h1></body>"`;
121+
122+
exports[`addStyle should work with updates #14 4`] = `"<head><title>Title</title><style>.green { color: black }</style><style>.blue { color: blue }</style><style>.white { color: white }</style></head><body><h1>Hello world</h1></body>"`;
123+
124+
exports[`addStyle should work with updates #14 5`] = `"<head><title>Title</title><style>.green { color: black }</style><style>.white { color: white }</style></head><body><h1>Hello world</h1></body>"`;
125+
94126
exports[`addStyle should work with updates 1`] = `"<head><title>Title</title><style>.foo { color: red }</style></head><body><h1>Hello world</h1></body>"`;
95127
96128
exports[`addStyle should work with updates 2`] = `"<head><title>Title</title><style>.foo { color: blue }</style></head><body><h1>Hello world</h1></body>"`;

‎test/runtime/injectStylesIntoStyleTag.test.js

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -555,4 +555,155 @@ describe('addStyle', () => {
555555

556556
expect(document.documentElement.innerHTML).toMatchSnapshot();
557557
});
558+
559+
it('should work with updates #12', () => {
560+
const update = injectStylesIntoStyleTag(getId(), [
561+
['./order-1.css', '.order { color: red }', ''],
562+
[
563+
'./order.css',
564+
'.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
565+
'',
566+
],
567+
['./order-2.css', '.order { color: blue }', ''],
568+
[
569+
'./order.css',
570+
'.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
571+
'',
572+
],
573+
['./order-1.css', '.order { color: red }', ''],
574+
[
575+
'./order.css',
576+
'.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
577+
'',
578+
],
579+
[
580+
'./order-2.css',
581+
'.order { color: blue }',
582+
'screen and (min-width: 2000px)',
583+
],
584+
[
585+
'./order.css',
586+
'.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
587+
'',
588+
],
589+
]);
590+
591+
expect(document.documentElement.innerHTML).toMatchSnapshot();
592+
593+
update([
594+
['./order-1.css', '.order { color: orange }', ''],
595+
[
596+
'./order.css',
597+
'.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
598+
'',
599+
],
600+
['./order-2.css', '.order { color: blue }', ''],
601+
[
602+
'./order.css',
603+
'.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
604+
'',
605+
],
606+
['./order-1.css', '.order { color: orange }', ''],
607+
[
608+
'./order.css',
609+
'.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
610+
'',
611+
],
612+
[
613+
'./order-2.css',
614+
'.order { color: blue }',
615+
'screen and (min-width: 2000px)',
616+
],
617+
[
618+
'./order.css',
619+
'.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
620+
'',
621+
],
622+
]);
623+
624+
expect(document.documentElement.innerHTML).toMatchSnapshot();
625+
});
626+
627+
it('should work with updates #12', () => {
628+
const update = injectStylesIntoStyleTag(getId(), [
629+
['./style-30.css', '.foo { color: red }', ''],
630+
['./style-31.css', '.bar { color: blue }', ''],
631+
]);
632+
633+
expect(document.documentElement.innerHTML).toMatchSnapshot();
634+
635+
update([]);
636+
637+
expect(document.documentElement.innerHTML).toMatchSnapshot();
638+
});
639+
640+
it('should work with updates #13', () => {
641+
const update1 = injectStylesIntoStyleTag(getId(), [
642+
['./style-32.css', '.red { color: red }', ''],
643+
]);
644+
const update2 = injectStylesIntoStyleTag(getId(), [
645+
['./style-33.css', '.green { color: green }', ''],
646+
]);
647+
const update3 = injectStylesIntoStyleTag(getId(), [
648+
['./style-34.css', '.blue { color: blue }', ''],
649+
]);
650+
651+
expect(document.documentElement.innerHTML).toMatchSnapshot();
652+
653+
update1([['./style-32.css', '.red { color: black }', '']]);
654+
655+
expect(document.documentElement.innerHTML).toMatchSnapshot();
656+
657+
update2([['./style-33.css', '.green { color: black }', '']]);
658+
659+
expect(document.documentElement.innerHTML).toMatchSnapshot();
660+
661+
update3([['./style-34.css', '.blue { color: black }', '']]);
662+
663+
expect(document.documentElement.innerHTML).toMatchSnapshot();
664+
665+
update1();
666+
667+
expect(document.documentElement.innerHTML).toMatchSnapshot();
668+
669+
update2();
670+
671+
expect(document.documentElement.innerHTML).toMatchSnapshot();
672+
673+
update3();
674+
675+
expect(document.documentElement.innerHTML).toMatchSnapshot();
676+
});
677+
678+
it('should work with updates #14', () => {
679+
const update1 = injectStylesIntoStyleTag(getId(), [
680+
['./style-35.css', '.red { color: red }', ''],
681+
]);
682+
const update2 = injectStylesIntoStyleTag(getId(), [
683+
['./style-36.css', '.green { color: green }', ''],
684+
]);
685+
const update3 = injectStylesIntoStyleTag(getId(), [
686+
['./style-37.css', '.blue { color: blue }', ''],
687+
]);
688+
689+
expect(document.documentElement.innerHTML).toMatchSnapshot();
690+
691+
update2([['./style-36.css', '.green { color: black }', '']]);
692+
693+
expect(document.documentElement.innerHTML).toMatchSnapshot();
694+
695+
injectStylesIntoStyleTag(getId(), [
696+
['./style-38.css', '.white { color: white }', ''],
697+
]);
698+
699+
expect(document.documentElement.innerHTML).toMatchSnapshot();
700+
701+
update1();
702+
703+
expect(document.documentElement.innerHTML).toMatchSnapshot();
704+
705+
update3();
706+
707+
expect(document.documentElement.innerHTML).toMatchSnapshot();
708+
});
558709
});

0 commit comments

Comments
 (0)