Skip to content

Commit

Permalink
fix: compatibility linkTag with ES module syntax (#429)
Browse files Browse the repository at this point in the history
  • Loading branch information
evilebottnawi authored Nov 28, 2019
1 parent 1c443e1 commit 2cdb9c3
Show file tree
Hide file tree
Showing 7 changed files with 2,718 additions and 2,163 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ module.exports = {
__webpack_nonce__: 'readonly',
},
rules: {
'no-underscore-dangle': 'off',
'no-plusplus': 'off',
'consistent-return': 'off',
'no-param-reassign': 'off',
Expand Down
4,750 changes: 2,617 additions & 2,133 deletions package-lock.json

Large diffs are not rendered by default.

56 changes: 28 additions & 28 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion src/runtime/injectStylesIntoLinkTag.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand Down
36 changes: 36 additions & 0 deletions test/__snapshots__/loader.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 5 additions & 1 deletion test/helpers/compiler.js
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
30 changes: 30 additions & 0 deletions test/loader.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit 2cdb9c3

Please sign in to comment.