Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/master'
Browse files Browse the repository at this point in the history
  • Loading branch information
ScriptedAlchemy committed Oct 31, 2020
2 parents 3246bc2 + fdc5e7b commit 39f3332
Show file tree
Hide file tree
Showing 19 changed files with 1,373 additions and 912 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ If you like our work, check out our Redux-based router <a href="https://github.c
<a href="https://www.npmjs.com/package/extract-css-chunks-webpack-plugin">
<img src="https://img.shields.io/npm/v/extract-css-chunks-webpack-plugin.svg" alt="Version" />
</a>

<img src="https://ssl.google-analytics.com/collect?v=1&t=event&ec=email&ea=open&t=event&tid=UA-120967034-1&z=1589684734&cid=9befe819-70e1-278b-50fc-859e6d1970cb&dt=ExtractCssChunks&dp=/email/ExtractCssChunks">
<a href="https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin">
<img src="https://travis-ci.org/faceyspacey/extract-css-chunks-webpack-plugin.svg?branch=master" alt="Build Status" />
</a>
Expand Down
36 changes: 36 additions & 0 deletions index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
declare module 'extract-css-chunks-webpack-plugin' {
import { ChunkData, Plugin } from 'webpack';

class ExtractCssChunksPlugin extends Plugin {
static loader: string;

constructor(options?: ExtractCssChunksPlugin.PluginOptions);
}

namespace ExtractCssChunksPlugin {
interface PluginOptions {
/**
* The filename of the entry chunk.
*/
filename?: string;
/**
* The filename of non-entry chunks.
*/
chunkFilename?: string;
/**
* Generates a file name (or template) based on chunk data.
*/
moduleFilename?: (chunk: ChunkData) => string;
/**
* Remove warnings about conflicting order.
*/
ignoreOrder?: boolean;
/**
* Inserts `<link>` at the given position (https://github.com/faceyspacey/extract-css-chunks-webpack-pluginn#insert).
*/
insert?: string | Function;
}
}

export = ExtractCssChunksPlugin;
}
22 changes: 12 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"extract-css-chunks-webpack-plugin"
],
"main": "dist/cjs.js",
"types": "index.d.ts",
"engines": {
"node": ">= 6.9.0"
},
Expand Down Expand Up @@ -59,7 +60,8 @@
"travis": "npm run ci:coverage"
},
"files": [
"dist"
"dist",
"index.d.ts"
],
"peerDependencies": {
"webpack": "^4.4.0 || ^5.0.0"
Expand All @@ -68,34 +70,34 @@
"loader-utils": "^2.0.0",
"normalize-url": "1.9.1",
"schema-utils": "^1.0.0",
"webpack-external-import": "^2.0.0",
"webpack-external-import": "^2.2.4",
"webpack-sources": "^1.1.0"
},
"devDependencies": {
"@babel/cli": "7.8.4",
"@babel/core": "7.9.0",
"@babel/preset-env": "7.9.0",
"@babel/preset-env": "7.9.5",
"@commitlint/cli": "8.3.5",
"@commitlint/config-conventional": "8.3.4",
"@webpack-contrib/defaults": "6.3.0",
"@webpack-contrib/eslint-config-webpack": "3.0.0",
"babel-eslint": "10.1.0",
"babel-jest": "25.1.0",
"commitizen": "4.0.3",
"babel-jest": "25.5.1",
"commitizen": "4.0.4",
"commitlint-azure-pipelines-cli": "1.0.3",
"cross-env": "7.0.2",
"css-loader": "3.4.2",
"css-loader": "3.5.2",
"cz-conventional-changelog": "3.1.0",
"del": "5.1.0",
"del-cli": "3.0.0",
"es-check": "5.1.0",
"eslint": "6.8.0",
"eslint-config-prettier": "6.10.1",
"eslint-plugin-import": "2.20.1",
"eslint-plugin-import": "2.20.2",
"eslint-plugin-prettier": "3.1.2",
"file-loader": "6.0.0",
"husky": "4.2.3",
"jest": "25.1.0",
"jest": "25.5.4",
"jest-dev-server": "4.4.0",
"jest-junit": "10.0.0",
"jest-puppeteer": "4.4.0",
Expand All @@ -106,8 +108,8 @@
"prettier": "1.19.1",
"puppeteer": "2.1.1",
"serve": "11.3.0",
"standard-version": "7.1.0",
"webpack": "4.42.0",
"standard-version": "8.0.1",
"webpack": "4.43.0",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.10.3"
}
Expand Down
25 changes: 19 additions & 6 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -323,10 +323,13 @@ class ExtractCssChunksPlugin {
}
);
const { insert } = this.options;
const supportsPreload =
'(function() { try { return document.createElement("link").relList.supports("preload"); } catch(e) { return false; }}());';
return Template.asString([
source,
'',
`// ${pluginName} CSS loading`,
`var supportsPreload = ${supportsPreload}`,
`var cssChunks = ${JSON.stringify(chunkMap)};`,
'if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);',
'else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {',
Expand All @@ -340,8 +343,7 @@ class ExtractCssChunksPlugin {
Template.indent([
'var tag = existingLinkTags[i];',
'var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");',
'if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve();',
]),
'if((tag.rel === "stylesheet" || tag.rel === "preload") && (dataHref === href || dataHref === fullhref)) return resolve();', ]),
'}',
'var existingStyleTags = document.getElementsByTagName("style");',
'for(var i = 0; i < existingStyleTags.length; i++) {',
Expand All @@ -352,8 +354,8 @@ class ExtractCssChunksPlugin {
]),
'}',
'var linkTag = document.createElement("link");',
'linkTag.rel = "stylesheet";',
'linkTag.type = "text/css";',
'linkTag.rel = supportsPreload ? "preload": "stylesheet";',
'supportsPreload ? linkTag.as = "style" : linkTag.type = "text/css";',
'linkTag.onload = resolve;',
'linkTag.onerror = function(event) {',
Template.indent([
Expand All @@ -379,11 +381,22 @@ class ExtractCssChunksPlugin {
])
: '',
insert
? 'insert(linkTag);'
? `var insert = ${insert};\ninsert(linkTag);`
: 'var head = document.getElementsByTagName("head")[0]; head.appendChild(linkTag)',
]),
'}).then(function() {',
Template.indent(['installedCssChunks[chunkId] = 0;']),
Template.indent([
'installedCssChunks[chunkId] = 0;',
'if(supportsPreload) {',
Template.indent([
'var execLinkTag = document.createElement("link");',
`execLinkTag.href = ${mainTemplate.requireFn}.p + ${linkHrefPath};`,
'execLinkTag.rel = "stylesheet";',
'execLinkTag.type = "text/css";',
'document.body.appendChild(execLinkTag);',
]),
'}',
]),
'}));',
]),
'}',
Expand Down
3 changes: 2 additions & 1 deletion test/HMR.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ describe('HMR', () => {

jest.spyOn(Date, 'now').mockImplementation(() => 1479427200000);

document.head.innerHTML = '<link rel="stylesheet" href="/dist/main.css" />';
document.head.innerHTML =
'<link rel="preload" as="style" href="/dist/main.css" />';
document.body.innerHTML = '<script src="/dist/main.js"></script>';
});

Expand Down
12 changes: 6 additions & 6 deletions test/__snapshots__/HMR.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`HMR should handle error event 1`] = `"[HMR] css reload %s"`;

exports[`HMR should handle error event 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
exports[`HMR should handle error event 2`] = `"<link rel=\\"preload\\" as=\\"style\\" href=\\"/dist/main.css\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
exports[`HMR should reloads with # link href 1`] = `"[HMR] css reload %s"`;
Expand All @@ -18,22 +18,22 @@ exports[`HMR should reloads with link without href 2`] = `"<link rel=\\"styleshe
exports[`HMR should reloads with locals 1`] = `"[HMR] Detected local css modules. Reload all css"`;
exports[`HMR should reloads with locals 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
exports[`HMR should reloads with locals 2`] = `"<link rel=\\"preload\\" as=\\"style\\" href=\\"/dist/main.css\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
exports[`HMR should reloads with non http/https link href 1`] = `"[HMR] css reload %s"`;
exports[`HMR should reloads with non http/https link href 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"shortcut icon\\" href=\\"data:;base64,=\\">"`;
exports[`HMR should reloads with reloadAll option 1`] = `"[HMR] Reload all css"`;
exports[`HMR should reloads with reloadAll option 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
exports[`HMR should reloads with reloadAll option 2`] = `"<link rel=\\"preload\\" as=\\"style\\" href=\\"/dist/main.css\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
exports[`HMR should works 1`] = `"[HMR] css reload %s"`;
exports[`HMR should works 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
exports[`HMR should works 2`] = `"<link rel=\\"preload\\" as=\\"style\\" href=\\"/dist/main.css\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
exports[`HMR should works with multiple updates 1`] = `"[HMR] css reload %s"`;
exports[`HMR should works with multiple updates 2`] = `"<link rel=\\"stylesheet\\" href=\\"/dist/main.css\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
exports[`HMR should works with multiple updates 2`] = `"<link rel=\\"preload\\" as=\\"style\\" href=\\"/dist/main.css\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200000\\">"`;
exports[`HMR should works with multiple updates 3`] = `"<link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"stylesheet\\" href=\\"http://localhost/dist/main.css?1479427200001\\">"`;
exports[`HMR should works with multiple updates 3`] = `"<link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200000\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"http://localhost/dist/main.css?1479427200001\\">"`;
23 changes: 12 additions & 11 deletions test/cases/insert-function/expected/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
/******/
/******/
/******/ // extract-css-chunks-webpack-plugin CSS loading
/******/ var supportsPreload = (function() { try { return document.createElement("link").relList.supports("preload"); } catch(e) { return false; }}());
/******/ var cssChunks = {"1":1};
/******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
/******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
Expand All @@ -92,7 +93,7 @@
/******/ for(var i = 0; i < existingLinkTags.length; i++) {
/******/ var tag = existingLinkTags[i];
/******/ var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
/******/ if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve();
/******/ if((tag.rel === "stylesheet" || tag.rel === "preload") && (dataHref === href || dataHref === fullhref)) return resolve();
/******/ }
/******/ var existingStyleTags = document.getElementsByTagName("style");
/******/ for(var i = 0; i < existingStyleTags.length; i++) {
Expand All @@ -101,8 +102,8 @@
/******/ if(dataHref === href || dataHref === fullhref) return resolve();
/******/ }
/******/ var linkTag = document.createElement("link");
/******/ linkTag.rel = "stylesheet";
/******/ linkTag.type = "text/css";
/******/ linkTag.rel = supportsPreload ? "preload": "stylesheet";
/******/ supportsPreload ? linkTag.as = "style" : linkTag.type = "text/css";
/******/ linkTag.onload = resolve;
/******/ linkTag.onerror = function(event) {
/******/ var request = event && event.target && event.target.src || fullhref;
Expand All @@ -122,16 +123,16 @@
/******/ reference.parentNode.insertBefore(linkTag, reference);
/******/ }
/******/ };
/******/ if (typeof insert === 'function') { insert(linkTag); }
/******/ else { var target = document.querySelector(function insert(linkTag) {
/******/ const reference = document.querySelector('.hot-reload');
/******/
/******/ if (reference) {
/******/ reference.parentNode.insertBefore(linkTag, reference);
/******/ }
/******/ }); target && insert === 'body' ? target && target.insertBefore(linkTag,target.firstChild) : target.appendChild(linkTag); }
/******/ insert(linkTag);
/******/ }).then(function() {
/******/ installedCssChunks[chunkId] = 0;
/******/ if(supportsPreload) {
/******/ var execLinkTag = document.createElement("link");
/******/ execLinkTag.href = __webpack_require__.p + "" + chunkId + ".css";
/******/ execLinkTag.rel = "stylesheet";
/******/ execLinkTag.type = "text/css";
/******/ document.body.appendChild(execLinkTag);
/******/ }
/******/ }));
/******/ }
/******/
Expand Down
4 changes: 3 additions & 1 deletion test/cases/insert-function/webpack.config.e2e.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,9 @@ module.exports = {
new Self({
filename: '[name].css',
chunkFilename: '[id].css',
insert: 'body',
insert: (linkTag) => {
document.head.appendChild(linkTag)
},
}),
],
devServer: {
Expand Down
19 changes: 13 additions & 6 deletions test/cases/insert-string/expected/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
/******/
/******/
/******/ // extract-css-chunks-webpack-plugin CSS loading
/******/ var supportsPreload = (function() { try { return document.createElement("link").relList.supports("preload"); } catch(e) { return false; }}());
/******/ var cssChunks = {"1":1};
/******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
/******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
Expand All @@ -92,7 +93,7 @@
/******/ for(var i = 0; i < existingLinkTags.length; i++) {
/******/ var tag = existingLinkTags[i];
/******/ var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
/******/ if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return resolve();
/******/ if((tag.rel === "stylesheet" || tag.rel === "preload") && (dataHref === href || dataHref === fullhref)) return resolve();
/******/ }
/******/ var existingStyleTags = document.getElementsByTagName("style");
/******/ for(var i = 0; i < existingStyleTags.length; i++) {
Expand All @@ -101,8 +102,8 @@
/******/ if(dataHref === href || dataHref === fullhref) return resolve();
/******/ }
/******/ var linkTag = document.createElement("link");
/******/ linkTag.rel = "stylesheet";
/******/ linkTag.type = "text/css";
/******/ linkTag.rel = supportsPreload ? "preload": "stylesheet";
/******/ supportsPreload ? linkTag.as = "style" : linkTag.type = "text/css";
/******/ linkTag.onload = resolve;
/******/ linkTag.onerror = function(event) {
/******/ var request = event && event.target && event.target.src || fullhref;
Expand All @@ -115,11 +116,17 @@
/******/ };
/******/ linkTag.href = fullhref;
/******/
/******/ var insert = "body";
/******/ if (typeof insert === 'function') { insert(linkTag); }
/******/ else { var target = document.querySelector("body"); target && insert === 'body' ? target && target.insertBefore(linkTag,target.firstChild) : target.appendChild(linkTag); }
/******/ var insert = body;
/******/ insert(linkTag);
/******/ }).then(function() {
/******/ installedCssChunks[chunkId] = 0;
/******/ if(supportsPreload) {
/******/ var execLinkTag = document.createElement("link");
/******/ execLinkTag.href = __webpack_require__.p + "" + chunkId + ".css";
/******/ execLinkTag.rel = "stylesheet";
/******/ execLinkTag.type = "text/css";
/******/ document.body.appendChild(execLinkTag);
/******/ }
/******/ }));
/******/ }
/******/
Expand Down
2 changes: 1 addition & 1 deletion test/cases/insert-string/webpack.config.e2e.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ module.exports = {
new Self({
filename: '[name].css',
chunkFilename: '[id].css',
insert: 'body',
insert: '(linkTag) => { document.head.appendChild(linkTag) }',
}),
],
devServer: {
Expand Down
2 changes: 1 addition & 1 deletion test/cases/publicpath-emptystring/expected/main.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
body {
background: red;
background-image: url(cd0bb358c45b584743d8ce4991777c42.svg);
background-image: url(c9e192c015437a21dea1faa1d30f4941.svg);
}

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
body {
background: green;
background-image: url(../../cd0bb358c45b584743d8ce4991777c42.svg);
background-image: url(../../c9e192c015437a21dea1faa1d30f4941.svg);
}

2 changes: 1 addition & 1 deletion test/cases/publicpath-function/expected/nested/style.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
body {
background: red;
background-image: url(../cd0bb358c45b584743d8ce4991777c42.svg);
background-image: url(../c9e192c015437a21dea1faa1d30f4941.svg);
}

2 changes: 1 addition & 1 deletion test/cases/publicpath-trailing-slash/expected/main.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
body {
background: red;
background-image: url(/static/img/cd0bb358c45b584743d8ce4991777c42.svg);
background-image: url(/static/img/c9e192c015437a21dea1faa1d30f4941.svg);
}

2 changes: 1 addition & 1 deletion test/cases/simple-publicpath/expected/main.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
body {
background: red;
background-image: url(/static/img/cd0bb358c45b584743d8ce4991777c42.svg);
background-image: url(/static/img/c9e192c015437a21dea1faa1d30f4941.svg);
}

2 changes: 1 addition & 1 deletion test/cases/split-chunks/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// eslint-disable-next-line import/no-extraneous-dependencies
// eslint-disable-next-line
import 'bootstrap.css';
import './style.css';
4 changes: 0 additions & 4 deletions test/cases/split-chunks/node_modules/bootstrap.css

This file was deleted.

Loading

0 comments on commit 39f3332

Please sign in to comment.