Skip to content

Commit 2cdb9c3

Browse files
evilebottnawievilebottnawi
authored
fix: compatibility linkTag with ES module syntax (#429)
1 parent 1c443e1 commit 2cdb9c3

File tree

7 files changed

+2718
-2163
lines changed

7 files changed

+2718
-2163
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ module.exports = {
1212
__webpack_nonce__: 'readonly',
1313
},
1414
rules: {
15+
'no-underscore-dangle': 'off',
1516
'no-plusplus': 'off',
1617
'consistent-return': 'off',
1718
'no-param-reassign': 'off',

‎package-lock.json‎

Lines changed: 2617 additions & 2133 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -44,39 +44,39 @@
4444
"schema-utils": "^2.0.1"
4545
},
4646
"devDependencies": {
47-
"@babel/cli": "^7.2.3",
48-
"@babel/core": "^7.4.0",
49-
"@babel/preset-env": "^7.4.2",
50-
"@commitlint/cli": "^8.1.0",
51-
"@commitlint/config-conventional": "^8.1.0",
47+
"@babel/cli": "^7.7.4",
48+
"@babel/core": "^7.7.4",
49+
"@babel/preset-env": "^7.7.4",
50+
"@commitlint/cli": "^8.2.0",
51+
"@commitlint/config-conventional": "^8.2.0",
5252
"@webpack-contrib/defaults": "^5.0.2",
5353
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
54-
"babel-jest": "^24.5.0",
54+
"babel-jest": "^24.9.0",
5555
"commitlint-azure-pipelines-cli": "^1.0.2",
56-
"cross-env": "^5.2.0",
57-
"css-loader": "^3.1.0",
58-
"del": "^5.0.0",
59-
"del-cli": "^2.0.0",
60-
"es-check": "^5.0.0",
61-
"eslint": "^6.1.0",
62-
"eslint-config-prettier": "^6.0.0",
63-
"eslint-plugin-import": "^2.16.0",
64-
"file-loader": "^4.1.0",
65-
"husky": "^3.0.1",
66-
"jest": "^24.0.0",
67-
"jest-junit": "^7.0.0",
68-
"jsdom": "^15.1.1",
69-
"lint-staged": "^9.2.1",
70-
"memory-fs": "^0.4.0",
56+
"cross-env": "^6.0.3",
57+
"css-loader": "^3.2.0",
58+
"del": "^5.1.0",
59+
"del-cli": "^3.0.0",
60+
"es-check": "^5.1.0",
61+
"eslint": "^6.7.1",
62+
"eslint-config-prettier": "^6.7.0",
63+
"eslint-plugin-import": "^2.18.2",
64+
"file-loader": "^5.0.2",
65+
"husky": "^3.1.0",
66+
"jest": "^24.9.0",
67+
"jest-junit": "^9.0.0",
68+
"jsdom": "^15.2.1",
69+
"lint-staged": "^9.5.0",
70+
"memory-fs": "^0.5.0",
7171
"npm-run-all": "^4.1.5",
72-
"prettier": "^1.16.4",
73-
"sass": "^1.22.7",
74-
"sass-loader": "^7.1.0",
72+
"prettier": "^1.19.1",
73+
"sass": "^1.23.7",
74+
"sass-loader": "^8.0.0",
7575
"semver": "^6.3.0",
76-
"standard-version": "^6.0.1",
77-
"webpack": "^4.29.6",
78-
"webpack-cli": "^3.3.6",
79-
"webpack-dev-server": "^3.7.2"
76+
"standard-version": "^7.0.1",
77+
"webpack": "^4.41.2",
78+
"webpack-cli": "^3.3.10",
79+
"webpack-dev-server": "^3.9.0"
8080
},
8181
"keywords": [
8282
"webpack"

‎src/runtime/injectStylesIntoLinkTag.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ module.exports = (url, options) => {
4444
const link = document.createElement('link');
4545

4646
link.rel = 'stylesheet';
47-
link.href = url;
47+
link.href = url.__esModule ? url.default : url;
4848

4949
Object.keys(options.attributes).forEach((key) => {
5050
link.setAttribute(key, options.attributes[key]);

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -362,6 +362,42 @@ exports[`loader should work when the "injectType" option is "lazyStyleTag": erro
362362
363363
exports[`loader should work when the "injectType" option is "lazyStyleTag": warnings 1`] = `Array []`;
364364
365+
exports[`loader should work when the "injectType" option is "linkTag" and "file-loader" uses CommonJS module syntax: DOM 1`] = `
366+
"<!DOCTYPE html><html><head>
367+
<title>style-loader test</title>
368+
<style id=\\"existing-style\\">.existing { color: yellow }</style>
369+
<link rel=\\"stylesheet\\" href=\\"a4197ed8dcb93d681801318bd25a41ed.css\\"><link rel=\\"stylesheet\\" href=\\"b37e8500d4037735f116e83ab5fd79a3.css\\"></head>
370+
<body>
371+
<h1>Body</h1>
372+
<div class=\\"target\\"></div>
373+
<iframe class=\\"iframeTarget\\"></iframe>
374+
375+
376+
</body></html>"
377+
`;
378+
379+
exports[`loader should work when the "injectType" option is "linkTag" and "file-loader" uses CommonJS module syntax: errors 1`] = `Array []`;
380+
381+
exports[`loader should work when the "injectType" option is "linkTag" and "file-loader" uses CommonJS module syntax: warnings 1`] = `Array []`;
382+
383+
exports[`loader should work when the "injectType" option is "linkTag" and "file-loader" uses ES module syntax: DOM 1`] = `
384+
"<!DOCTYPE html><html><head>
385+
<title>style-loader test</title>
386+
<style id=\\"existing-style\\">.existing { color: yellow }</style>
387+
<link rel=\\"stylesheet\\" href=\\"a4197ed8dcb93d681801318bd25a41ed.css\\"><link rel=\\"stylesheet\\" href=\\"b37e8500d4037735f116e83ab5fd79a3.css\\"></head>
388+
<body>
389+
<h1>Body</h1>
390+
<div class=\\"target\\"></div>
391+
<iframe class=\\"iframeTarget\\"></iframe>
392+
393+
394+
</body></html>"
395+
`;
396+
397+
exports[`loader should work when the "injectType" option is "linkTag" and "file-loader" uses ES module syntax: errors 1`] = `Array []`;
398+
399+
exports[`loader should work when the "injectType" option is "linkTag" and "file-loader" uses ES module syntax: warnings 1`] = `Array []`;
400+
365401
exports[`loader should work when the "injectType" option is "linkTag": DOM 1`] = `
366402
"<!DOCTYPE html><html><head>
367403
<title>style-loader test</title>

‎test/helpers/compiler.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,11 @@ const module = (config) => {
2626
options: (config.loader && config.loader.options) || {},
2727
},
2828
shouldUseFileLoader
29-
? { loader: 'file-loader' }
29+
? {
30+
loader: 'file-loader',
31+
options:
32+
(config.fileLoader && config.fileLoader.options) || {},
33+
}
3034
: {
3135
loader: 'css-loader',
3236
options:

‎test/loader.test.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,36 @@ describe('loader', () => {
2525
expect(stats.compilation.errors).toMatchSnapshot('errors');
2626
});
2727

28+
it('should work when the "injectType" option is "linkTag" and "file-loader" uses ES module syntax', async () => {
29+
const testId = './simple.js';
30+
const stats = await compile(testId, {
31+
loader: { options: { injectType: 'linkTag' } },
32+
fileLoader: { options: { esModule: true } },
33+
});
34+
35+
runTestInJsdom(stats, (dom) => {
36+
expect(dom.serialize()).toMatchSnapshot('DOM');
37+
});
38+
39+
expect(stats.compilation.warnings).toMatchSnapshot('warnings');
40+
expect(stats.compilation.errors).toMatchSnapshot('errors');
41+
});
42+
43+
it('should work when the "injectType" option is "linkTag" and "file-loader" uses CommonJS module syntax', async () => {
44+
const testId = './simple.js';
45+
const stats = await compile(testId, {
46+
loader: { options: { injectType: 'linkTag' } },
47+
fileLoader: { options: { esModule: false } },
48+
});
49+
50+
runTestInJsdom(stats, (dom) => {
51+
expect(dom.serialize()).toMatchSnapshot('DOM');
52+
});
53+
54+
expect(stats.compilation.warnings).toMatchSnapshot('warnings');
55+
expect(stats.compilation.errors).toMatchSnapshot('errors');
56+
});
57+
2858
injectTypes.forEach((injectType) => {
2959
it(`should work when the "injectType" option is "${injectType}"`, async () => {
3060
expect.assertions(3);

0 commit comments

Comments
 (0)