fix: compatibility linkTag with ES module syntax (#429)

webpack-contrib · Nov 28, 2019 · 2cdb9c3 · 2cdb9c3
1 parent 1c443e1
commit 2cdb9c3
Show file tree

Hide file tree

Showing 7 changed files with 2,718 additions and 2,163 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -12,6 +12,7 @@ module.exports = {
         __webpack_nonce__: 'readonly',
       },
       rules: {
+        'no-underscore-dangle': 'off',
         'no-plusplus': 'off',
         'consistent-return': 'off',
         'no-param-reassign': 'off',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,39 +44,39 @@
     "schema-utils": "^2.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.4.0",
-    "@babel/preset-env": "^7.4.2",
-    "@commitlint/cli": "^8.1.0",
-    "@commitlint/config-conventional": "^8.1.0",
+    "@babel/cli": "^7.7.4",
+    "@babel/core": "^7.7.4",
+    "@babel/preset-env": "^7.7.4",
+    "@commitlint/cli": "^8.2.0",
+    "@commitlint/config-conventional": "^8.2.0",
     "@webpack-contrib/defaults": "^5.0.2",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^24.5.0",
+    "babel-jest": "^24.9.0",
     "commitlint-azure-pipelines-cli": "^1.0.2",
-    "cross-env": "^5.2.0",
-    "css-loader": "^3.1.0",
-    "del": "^5.0.0",
-    "del-cli": "^2.0.0",
-    "es-check": "^5.0.0",
-    "eslint": "^6.1.0",
-    "eslint-config-prettier": "^6.0.0",
-    "eslint-plugin-import": "^2.16.0",
-    "file-loader": "^4.1.0",
-    "husky": "^3.0.1",
-    "jest": "^24.0.0",
-    "jest-junit": "^7.0.0",
-    "jsdom": "^15.1.1",
-    "lint-staged": "^9.2.1",
-    "memory-fs": "^0.4.0",
+    "cross-env": "^6.0.3",
+    "css-loader": "^3.2.0",
+    "del": "^5.1.0",
+    "del-cli": "^3.0.0",
+    "es-check": "^5.1.0",
+    "eslint": "^6.7.1",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-plugin-import": "^2.18.2",
+    "file-loader": "^5.0.2",
+    "husky": "^3.1.0",
+    "jest": "^24.9.0",
+    "jest-junit": "^9.0.0",
+    "jsdom": "^15.2.1",
+    "lint-staged": "^9.5.0",
+    "memory-fs": "^0.5.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.16.4",
-    "sass": "^1.22.7",
-    "sass-loader": "^7.1.0",
+    "prettier": "^1.19.1",
+    "sass": "^1.23.7",
+    "sass-loader": "^8.0.0",
     "semver": "^6.3.0",
-    "standard-version": "^6.0.1",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.6",
-    "webpack-dev-server": "^3.7.2"
+    "standard-version": "^7.0.1",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
   },
   "keywords": [
     "webpack"

diff --git a/src/runtime/injectStylesIntoLinkTag.js b/src/runtime/injectStylesIntoLinkTag.js
@@ -44,7 +44,7 @@ module.exports = (url, options) => {
   const link = document.createElement('link');
 
   link.rel = 'stylesheet';
-  link.href = url;
+  link.href = url.__esModule ? url.default : url;
 
   Object.keys(options.attributes).forEach((key) => {
     link.setAttribute(key, options.attributes[key]);

diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
@@ -362,6 +362,42 @@ exports[`loader should work when the "injectType" option is "lazyStyleTag": erro
 
 exports[`loader should work when the "injectType" option is "lazyStyleTag": warnings 1`] = `Array []`;
 
+exports[`loader should work when the "injectType" option is "linkTag" and "file-loader" uses CommonJS module syntax: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<link rel=\\"stylesheet\\" href=\\"a4197ed8dcb93d681801318bd25a41ed.css\\"><link rel=\\"stylesheet\\" href=\\"b37e8500d4037735f116e83ab5fd79a3.css\\"></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`loader should work when the "injectType" option is "linkTag" and "file-loader" uses CommonJS module syntax: errors 1`] = `Array []`;
+
+exports[`loader should work when the "injectType" option is "linkTag" and "file-loader" uses CommonJS module syntax: warnings 1`] = `Array []`;
+
+exports[`loader should work when the "injectType" option is "linkTag" and "file-loader" uses ES module syntax: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<link rel=\\"stylesheet\\" href=\\"a4197ed8dcb93d681801318bd25a41ed.css\\"><link rel=\\"stylesheet\\" href=\\"b37e8500d4037735f116e83ab5fd79a3.css\\"></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`loader should work when the "injectType" option is "linkTag" and "file-loader" uses ES module syntax: errors 1`] = `Array []`;
+
+exports[`loader should work when the "injectType" option is "linkTag" and "file-loader" uses ES module syntax: warnings 1`] = `Array []`;
+
 exports[`loader should work when the "injectType" option is "linkTag": DOM 1`] = `
 "<!DOCTYPE html><html><head>
   <title>style-loader test</title>

diff --git a/test/helpers/compiler.js b/test/helpers/compiler.js
@@ -26,7 +26,11 @@ const module = (config) => {
                 options: (config.loader && config.loader.options) || {},
               },
               shouldUseFileLoader
-                ? { loader: 'file-loader' }
+                ? {
+                    loader: 'file-loader',
+                    options:
+                      (config.fileLoader && config.fileLoader.options) || {},
+                  }
                 : {
                     loader: 'css-loader',
                     options:

diff --git a/test/loader.test.js b/test/loader.test.js
@@ -25,6 +25,36 @@ describe('loader', () => {
     expect(stats.compilation.errors).toMatchSnapshot('errors');
   });
 
+  it('should work when the "injectType" option is "linkTag" and "file-loader" uses ES module syntax', async () => {
+    const testId = './simple.js';
+    const stats = await compile(testId, {
+      loader: { options: { injectType: 'linkTag' } },
+      fileLoader: { options: { esModule: true } },
+    });
+
+    runTestInJsdom(stats, (dom) => {
+      expect(dom.serialize()).toMatchSnapshot('DOM');
+    });
+
+    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    expect(stats.compilation.errors).toMatchSnapshot('errors');
+  });
+
+  it('should work when the "injectType" option is "linkTag" and "file-loader" uses CommonJS module syntax', async () => {
+    const testId = './simple.js';
+    const stats = await compile(testId, {
+      loader: { options: { injectType: 'linkTag' } },
+      fileLoader: { options: { esModule: false } },
+    });
+
+    runTestInJsdom(stats, (dom) => {
+      expect(dom.serialize()).toMatchSnapshot('DOM');
+    });
+
+    expect(stats.compilation.warnings).toMatchSnapshot('warnings');
+    expect(stats.compilation.errors).toMatchSnapshot('errors');
+  });
+
   injectTypes.forEach((injectType) => {
     it(`should work when the "injectType" option is "${injectType}"`, async () => {
       expect.assertions(3);