fix: order of imported styles

webpack-contrib · Dec 20, 2019 · db43ae5 · db43ae5
1 parent 466cb39
commit db43ae5
Show file tree

Hide file tree

Showing 4 changed files with 183 additions and 167 deletions.
diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
@@ -138,160 +138,6 @@ exports[`loader should inject hmr code with HotModuleReplacementPlugin when the
 
 exports[`loader should inject hmr code with HotModuleReplacementPlugin when the "injectType" option is "styleTag": warnings 1`] = `Array []`;
 
-exports[`loader should keep right order when the "injectType" option is "lazySingletonStyleTag": DOM 1`] = `
-"<!DOCTYPE html><html><head>
-  <title>style-loader test</title>
-  <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style>div {
-  background: red;
-}
-@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
-  background: blue;
-}
-@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
-  background: red;
-}
-@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
-  background: blue;
-}
-@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
-  width: 100%;
-  height: 200px;
-}
-</style></head>
-<body>
-  <h1>Body</h1>
-  <div class=\\"target\\"></div>
-  <iframe class=\\"iframeTarget\\"></iframe>
-
-
-</body></html>"
-`;
-
-exports[`loader should keep right order when the "injectType" option is "lazySingletonStyleTag": errors 1`] = `Array []`;
-
-exports[`loader should keep right order when the "injectType" option is "lazySingletonStyleTag": warnings 1`] = `Array []`;
-
-exports[`loader should keep right order when the "injectType" option is "lazyStyleTag": DOM 1`] = `
-"<!DOCTYPE html><html><head>
-  <title>style-loader test</title>
-  <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style>div {
-  background: red;
-}
-</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style>div {
-  background: blue;
-}
-</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style>div {
-  background: red;
-}
-</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style media=\\"screen and (min-width: 2000px)\\">div {
-  background: blue;
-}
-</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style>div {
-  width: 100%;
-  height: 200px;
-}
-</style></head>
-<body>
-  <h1>Body</h1>
-  <div class=\\"target\\"></div>
-  <iframe class=\\"iframeTarget\\"></iframe>
-
-
-</body></html>"
-`;
-
-exports[`loader should keep right order when the "injectType" option is "lazyStyleTag": errors 1`] = `Array []`;
-
-exports[`loader should keep right order when the "injectType" option is "lazyStyleTag": warnings 1`] = `Array []`;
-
-exports[`loader should keep right order when the "injectType" option is "linkTag": DOM 1`] = `
-"<!DOCTYPE html><html><head>
-  <title>style-loader test</title>
-  <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<link rel=\\"stylesheet\\" href=\\"3e5706a32a4bd8d3838c4c0d30316417.css\\"></head>
-<body>
-  <h1>Body</h1>
-  <div class=\\"target\\"></div>
-  <iframe class=\\"iframeTarget\\"></iframe>
-
-
-</body></html>"
-`;
-
-exports[`loader should keep right order when the "injectType" option is "linkTag": errors 1`] = `Array []`;
-
-exports[`loader should keep right order when the "injectType" option is "linkTag": warnings 1`] = `Array []`;
-
-exports[`loader should keep right order when the "injectType" option is "singletonStyleTag": DOM 1`] = `
-"<!DOCTYPE html><html><head>
-  <title>style-loader test</title>
-  <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style>div {
-  background: red;
-}
-@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
-  background: blue;
-}
-@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
-  background: red;
-}
-@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
-  background: blue;
-}
-@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);div {
-  width: 100%;
-  height: 200px;
-}
-</style></head>
-<body>
-  <h1>Body</h1>
-  <div class=\\"target\\"></div>
-  <iframe class=\\"iframeTarget\\"></iframe>
-
-
-</body></html>"
-`;
-
-exports[`loader should keep right order when the "injectType" option is "singletonStyleTag": errors 1`] = `Array []`;
-
-exports[`loader should keep right order when the "injectType" option is "singletonStyleTag": warnings 1`] = `Array []`;
-
-exports[`loader should keep right order when the "injectType" option is "styleTag": DOM 1`] = `
-"<!DOCTYPE html><html><head>
-  <title>style-loader test</title>
-  <style id=\\"existing-style\\">.existing { color: yellow }</style>
-<style>div {
-  background: red;
-}
-</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style>div {
-  background: blue;
-}
-</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style>div {
-  background: red;
-}
-</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style media=\\"screen and (min-width: 2000px)\\">div {
-  background: blue;
-}
-</style><style>@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);</style><style>div {
-  width: 100%;
-  height: 200px;
-}
-</style></head>
-<body>
-  <h1>Body</h1>
-  <div class=\\"target\\"></div>
-  <iframe class=\\"iframeTarget\\"></iframe>
-
-
-</body></html>"
-`;
-
-exports[`loader should keep right order when the "injectType" option is "styleTag": errors 1`] = `Array []`;
-
-exports[`loader should keep right order when the "injectType" option is "styleTag": warnings 1`] = `Array []`;
-
 exports[`loader should not generate source maps when previous loader don't emit them when the "injectType" option is "lazySingletonStyleTag": DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>

diff --git a/test/loader.test.js b/test/loader.test.js
@@ -287,19 +287,6 @@ describe('loader', () => {
       expect(getErrors(stats)).toMatchSnapshot('errors');
     });
 
-    it(`should keep right order when the "injectType" option is "${injectType}"`, async () => {
-      const entry = getEntryByInjectType('order.js', injectType);
-      const compiler = getCompiler(entry, { injectType });
-      const stats = await compile(compiler);
-
-      runInJsDom('main.bundle.js', compiler, stats, (dom) => {
-        expect(dom.serialize()).toMatchSnapshot('DOM');
-      });
-
-      expect(getWarnings(stats)).toMatchSnapshot('warnings');
-      expect(getErrors(stats)).toMatchSnapshot('errors');
-    });
-
     if (['lazyStyleTag', 'lazySingletonStyleTag'].includes(injectType)) {
       it(`should work when ref is negative when the "injectType" option is "${injectType}"`, async () => {
         expect.assertions(3);

diff --git a/test/runtime/__snapshots__/injectStylesIntoStyleTag.test.js.snap b/test/runtime/__snapshots__/injectStylesIntoStyleTag.test.js.snap
@@ -91,6 +91,38 @@ exports[`addStyle should work with updates #11 1`] = `"<head><title>Title</title
 
 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>"`;
 
+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>"`;
+
+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>"`;
+
+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>"`;
+
+exports[`addStyle should work with updates #12 4`] = `"<head><title>Title</title></head><body><h1>Hello world</h1></body>"`;
+
+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>"`;
+
+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>"`;
+
+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>"`;
+
+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>"`;
+
+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>"`;
+
+exports[`addStyle should work with updates #13 6`] = `"<head><title>Title</title><style>.blue { color: black }</style></head><body><h1>Hello world</h1></body>"`;
+
+exports[`addStyle should work with updates #13 7`] = `"<head><title>Title</title></head><body><h1>Hello world</h1></body>"`;
+
+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>"`;
+
+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>"`;
+
+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>"`;
+
+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>"`;
+
+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>"`;
+
 exports[`addStyle should work with updates 1`] = `"<head><title>Title</title><style>.foo { color: red }</style></head><body><h1>Hello world</h1></body>"`;
 
 exports[`addStyle should work with updates 2`] = `"<head><title>Title</title><style>.foo { color: blue }</style></head><body><h1>Hello world</h1></body>"`;
diff --git a/test/runtime/injectStylesIntoStyleTag.test.js b/test/runtime/injectStylesIntoStyleTag.test.js
@@ -555,4 +555,155 @@ describe('addStyle', () => {
 
     expect(document.documentElement.innerHTML).toMatchSnapshot();
   });
+
+  it('should work with updates #12', () => {
+    const update = injectStylesIntoStyleTag(getId(), [
+      ['./order-1.css', '.order { color: red }', ''],
+      [
+        './order.css',
+        '.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
+        '',
+      ],
+      ['./order-2.css', '.order { color: blue }', ''],
+      [
+        './order.css',
+        '.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
+        '',
+      ],
+      ['./order-1.css', '.order { color: red }', ''],
+      [
+        './order.css',
+        '.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
+        '',
+      ],
+      [
+        './order-2.css',
+        '.order { color: blue }',
+        'screen and (min-width: 2000px)',
+      ],
+      [
+        './order.css',
+        '.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
+        '',
+      ],
+    ]);
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+
+    update([
+      ['./order-1.css', '.order { color: orange }', ''],
+      [
+        './order.css',
+        '.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
+        '',
+      ],
+      ['./order-2.css', '.order { color: blue }', ''],
+      [
+        './order.css',
+        '.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
+        '',
+      ],
+      ['./order-1.css', '.order { color: orange }', ''],
+      [
+        './order.css',
+        '.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
+        '',
+      ],
+      [
+        './order-2.css',
+        '.order { color: blue }',
+        'screen and (min-width: 2000px)',
+      ],
+      [
+        './order.css',
+        '.@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");',
+        '',
+      ],
+    ]);
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+  });
+
+  it('should work with updates #12', () => {
+    const update = injectStylesIntoStyleTag(getId(), [
+      ['./style-30.css', '.foo { color: red }', ''],
+      ['./style-31.css', '.bar { color: blue }', ''],
+    ]);
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+
+    update([]);
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+  });
+
+  it('should work with updates #13', () => {
+    const update1 = injectStylesIntoStyleTag(getId(), [
+      ['./style-32.css', '.red { color: red }', ''],
+    ]);
+    const update2 = injectStylesIntoStyleTag(getId(), [
+      ['./style-33.css', '.green { color: green }', ''],
+    ]);
+    const update3 = injectStylesIntoStyleTag(getId(), [
+      ['./style-34.css', '.blue { color: blue }', ''],
+    ]);
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+
+    update1([['./style-32.css', '.red { color: black }', '']]);
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+
+    update2([['./style-33.css', '.green { color: black }', '']]);
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+
+    update3([['./style-34.css', '.blue { color: black }', '']]);
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+
+    update1();
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+
+    update2();
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+
+    update3();
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+  });
+
+  it('should work with updates #14', () => {
+    const update1 = injectStylesIntoStyleTag(getId(), [
+      ['./style-35.css', '.red { color: red }', ''],
+    ]);
+    const update2 = injectStylesIntoStyleTag(getId(), [
+      ['./style-36.css', '.green { color: green }', ''],
+    ]);
+    const update3 = injectStylesIntoStyleTag(getId(), [
+      ['./style-37.css', '.blue { color: blue }', ''],
+    ]);
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+
+    update2([['./style-36.css', '.green { color: black }', '']]);
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+
+    injectStylesIntoStyleTag(getId(), [
+      ['./style-38.css', '.white { color: white }', ''],
+    ]);
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+
+    update1();
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+
+    update3();
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+  });
 });