fix: added the insert option when it is a module to `addBuildDepend…

…ency` (#527)
webpack-contrib · Jul 20, 2021 · 3963c0b · 3963c0b
1 parent 6e70da0
commit 3963c0b
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 0 deletions.
diff --git a/src/utils.js b/src/utils.js
@@ -132,6 +132,8 @@ function getImportInsertBySelectorCode(
   if (insertType === "module-path") {
     const modulePath = stringifyRequest(loaderContext, `${options.insert}`);
 
+    loaderContext.addBuildDependency(options.insert);
+
     return esModule
       ? `import insertFn from ${modulePath};`
       : `var insertFn = require(${modulePath});`;

diff --git a/test/__snapshots__/insert-option.test.js.snap b/test/__snapshots__/insert-option.test.js.snap
@@ -1,5 +1,119 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "lazySingletonStyleTag" and insert is object: DOM 1`] = `
+"<!DOCTYPE html><html><head><style>body {
+  color: red;
+}
+h1 {
+  color: blue;
+}
+</style>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "lazySingletonStyleTag" and insert is object: errors 1`] = `Array []`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "lazySingletonStyleTag" and insert is object: warnings 1`] = `Array []`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "lazyStyleTag" and insert is object: DOM 1`] = `
+"<!DOCTYPE html><html><head><style>body {
+  color: red;
+}
+</style><style>h1 {
+  color: blue;
+}
+</style>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "lazyStyleTag" and insert is object: errors 1`] = `Array []`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "lazyStyleTag" and insert is object: warnings 1`] = `Array []`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "linkTag" and insert is object: DOM 1`] = `
+"<!DOCTYPE html><html><head><link rel=\\"stylesheet\\" href=\\"style.css\\"><link rel=\\"stylesheet\\" href=\\"style-other.css\\">
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "linkTag" and insert is object: errors 1`] = `Array []`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "linkTag" and insert is object: warnings 1`] = `Array []`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "singletonStyleTag" and insert is object: DOM 1`] = `
+"<!DOCTYPE html><html><head><style>body {
+  color: red;
+}
+h1 {
+  color: blue;
+}
+</style>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "singletonStyleTag" and insert is object: errors 1`] = `Array []`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "singletonStyleTag" and insert is object: warnings 1`] = `Array []`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "styleTag" and insert is object: DOM 1`] = `
+"<!DOCTYPE html><html><head><style>body {
+  color: red;
+}
+</style><style>h1 {
+  color: blue;
+}
+</style>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+</head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "styleTag" and insert is object: errors 1`] = `Array []`;
+
+exports[`"insert" option should insert function added to buildDependencies when the "injectType" option is "styleTag" and insert is object: warnings 1`] = `Array []`;
+
 exports[`"insert" option should insert styles into "body" bottom when the "injectType" option is "lazySingletonStyleTag": DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>

diff --git a/test/insert-option.test.js b/test/insert-option.test.js
@@ -154,6 +154,27 @@ describe('"insert" option', () => {
       expect(getErrors(stats)).toMatchSnapshot("errors");
     });
 
+    it(`should insert function added to buildDependencies when the "injectType" option is "${injectType}" and insert is object`, async () => {
+      expect.assertions(4);
+
+      const insertFn = require.resolve("./fixtures/insertFn.js");
+      const entry = getEntryByInjectType("simple.js", injectType);
+      const compiler = getCompiler(entry, {
+        injectType,
+        insert: insertFn,
+      });
+      const stats = await compile(compiler);
+      const { buildDependencies } = stats.compilation;
+
+      runInJsDom("main.bundle.js", compiler, stats, (dom) => {
+        expect(dom.serialize()).toMatchSnapshot("DOM");
+      });
+
+      expect(buildDependencies.has(insertFn)).toBe(true);
+      expect(getWarnings(stats)).toMatchSnapshot("warnings");
+      expect(getErrors(stats)).toMatchSnapshot("errors");
+    });
+
     it(`should insert styles into before "#existing-style" id when the "injectType" option is "${injectType}"`, async () => {
       expect.assertions(3);