CssLoadingRuntimeModule.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. /*
  2. MIT License http://www.opensource.org/licenses/mit-license.php
  3. Author Tobias Koppers @sokra
  4. */
  5. "use strict";
  6. const { SyncWaterfallHook } = require("tapable");
  7. const Compilation = require("../Compilation");
  8. const RuntimeGlobals = require("../RuntimeGlobals");
  9. const RuntimeModule = require("../RuntimeModule");
  10. const Template = require("../Template");
  11. const compileBooleanMatcher = require("../util/compileBooleanMatcher");
  12. const { chunkHasCss } = require("./CssModulesPlugin");
  13. /** @typedef {import("../Chunk")} Chunk */
  14. /**
  15. * @typedef {Object} JsonpCompilationPluginHooks
  16. * @property {SyncWaterfallHook<[string, Chunk]>} createStylesheet
  17. */
  18. /** @type {WeakMap<Compilation, JsonpCompilationPluginHooks>} */
  19. const compilationHooksMap = new WeakMap();
  20. class CssLoadingRuntimeModule extends RuntimeModule {
  21. /**
  22. * @param {Compilation} compilation the compilation
  23. * @returns {JsonpCompilationPluginHooks} hooks
  24. */
  25. static getCompilationHooks(compilation) {
  26. if (!(compilation instanceof Compilation)) {
  27. throw new TypeError(
  28. "The 'compilation' argument must be an instance of Compilation"
  29. );
  30. }
  31. let hooks = compilationHooksMap.get(compilation);
  32. if (hooks === undefined) {
  33. hooks = {
  34. createStylesheet: new SyncWaterfallHook(["source", "chunk"])
  35. };
  36. compilationHooksMap.set(compilation, hooks);
  37. }
  38. return hooks;
  39. }
  40. constructor(runtimeRequirements, runtimeOptions) {
  41. super("css loading", 10);
  42. this._runtimeRequirements = runtimeRequirements;
  43. this.runtimeOptions = runtimeOptions;
  44. }
  45. /**
  46. * @returns {string} runtime code
  47. */
  48. generate() {
  49. const { compilation, chunk, _runtimeRequirements } = this;
  50. const {
  51. chunkGraph,
  52. runtimeTemplate,
  53. outputOptions: {
  54. crossOriginLoading,
  55. uniqueName,
  56. chunkLoadTimeout: loadTimeout
  57. }
  58. } = compilation;
  59. const fn = RuntimeGlobals.ensureChunkHandlers;
  60. const conditionMap = chunkGraph.getChunkConditionMap(
  61. chunk,
  62. (chunk, chunkGraph) =>
  63. !!chunkGraph.getChunkModulesIterableBySourceType(chunk, "css")
  64. );
  65. const hasCssMatcher = compileBooleanMatcher(conditionMap);
  66. const withLoading =
  67. _runtimeRequirements.has(RuntimeGlobals.ensureChunkHandlers) &&
  68. hasCssMatcher !== false;
  69. const withHmr = _runtimeRequirements.has(
  70. RuntimeGlobals.hmrDownloadUpdateHandlers
  71. );
  72. const initialChunkIdsWithCss = new Set();
  73. const initialChunkIdsWithoutCss = new Set();
  74. for (const c of chunk.getAllInitialChunks()) {
  75. (chunkHasCss(c, chunkGraph)
  76. ? initialChunkIdsWithCss
  77. : initialChunkIdsWithoutCss
  78. ).add(c.id);
  79. }
  80. if (!withLoading && !withHmr && initialChunkIdsWithCss.size === 0) {
  81. return null;
  82. }
  83. const { createStylesheet } =
  84. CssLoadingRuntimeModule.getCompilationHooks(compilation);
  85. const stateExpression = withHmr
  86. ? `${RuntimeGlobals.hmrRuntimeStatePrefix}_css`
  87. : undefined;
  88. const code = Template.asString([
  89. "link = document.createElement('link');",
  90. uniqueName
  91. ? 'link.setAttribute("data-webpack", uniqueName + ":" + key);'
  92. : "",
  93. "link.setAttribute(loadingAttribute, 1);",
  94. 'link.rel = "stylesheet";',
  95. "link.href = url;",
  96. crossOriginLoading
  97. ? Template.asString([
  98. "if (link.src.indexOf(window.location.origin + '/') !== 0) {",
  99. Template.indent(
  100. `link.crossOrigin = ${JSON.stringify(crossOriginLoading)};`
  101. ),
  102. "}"
  103. ])
  104. : ""
  105. ]);
  106. const cc = str => str.charCodeAt(0);
  107. return Template.asString([
  108. "// object to store loaded and loading chunks",
  109. "// undefined = chunk not loaded, null = chunk preloaded/prefetched",
  110. "// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded",
  111. `var installedChunks = ${
  112. stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
  113. }{${Array.from(
  114. initialChunkIdsWithoutCss,
  115. id => `${JSON.stringify(id)}:0`
  116. ).join(",")}};`,
  117. "",
  118. uniqueName
  119. ? `var uniqueName = ${JSON.stringify(
  120. runtimeTemplate.outputOptions.uniqueName
  121. )};`
  122. : "// data-webpack is not used as build has no uniqueName",
  123. `var loadCssChunkData = ${runtimeTemplate.basicFunction(
  124. "target, link, chunkId",
  125. [
  126. `var data, token = "", token2, exports = {}, exportsWithId = [], exportsWithDashes = [], ${
  127. withHmr ? "moduleIds = [], " : ""
  128. }i = 0, cc = 1;`,
  129. "try { if(!link) link = loadStylesheet(chunkId); data = link.sheet.cssRules; data = data[data.length - 1].style; } catch(e) { data = getComputedStyle(document.head); }",
  130. `data = data.getPropertyValue(${
  131. uniqueName
  132. ? runtimeTemplate.concatenation(
  133. "--webpack-",
  134. { expr: "uniqueName" },
  135. "-",
  136. { expr: "chunkId" }
  137. )
  138. : runtimeTemplate.concatenation("--webpack-", { expr: "chunkId" })
  139. });`,
  140. "if(!data) return [];",
  141. "for(; cc; i++) {",
  142. Template.indent([
  143. "cc = data.charCodeAt(i);",
  144. `if(cc == ${cc("(")}) { token2 = token; token = ""; }`,
  145. `else if(cc == ${cc(
  146. ")"
  147. )}) { exports[token2.replace(/^_/, "")] = token.replace(/^_/, ""); token = ""; }`,
  148. `else if(cc == ${cc("/")} || cc == ${cc(
  149. "%"
  150. )}) { token = token.replace(/^_/, ""); exports[token] = token; exportsWithId.push(token); if(cc == ${cc(
  151. "%"
  152. )}) exportsWithDashes.push(token); token = ""; }`,
  153. `else if(!cc || cc == ${cc(
  154. ","
  155. )}) { token = token.replace(/^_/, ""); exportsWithId.forEach(${runtimeTemplate.expressionFunction(
  156. `exports[x] = ${
  157. uniqueName
  158. ? runtimeTemplate.concatenation(
  159. { expr: "uniqueName" },
  160. "-",
  161. { expr: "token" },
  162. "-",
  163. { expr: "exports[x]" }
  164. )
  165. : runtimeTemplate.concatenation({ expr: "token" }, "-", {
  166. expr: "exports[x]"
  167. })
  168. }`,
  169. "x"
  170. )}); exportsWithDashes.forEach(${runtimeTemplate.expressionFunction(
  171. `exports[x] = "--" + exports[x]`,
  172. "x"
  173. )}); ${
  174. RuntimeGlobals.makeNamespaceObject
  175. }(exports); target[token] = (${runtimeTemplate.basicFunction(
  176. "exports, module",
  177. `module.exports = exports;`
  178. )}).bind(null, exports); ${
  179. withHmr ? "moduleIds.push(token); " : ""
  180. }token = ""; exports = {}; exportsWithId.length = 0; }`,
  181. `else if(cc == ${cc("\\")}) { token += data[++i] }`,
  182. `else { token += data[i]; }`
  183. ]),
  184. "}",
  185. `${
  186. withHmr ? `if(target == ${RuntimeGlobals.moduleFactories}) ` : ""
  187. }installedChunks[chunkId] = 0;`,
  188. withHmr ? "return moduleIds;" : ""
  189. ]
  190. )}`,
  191. 'var loadingAttribute = "data-webpack-loading";',
  192. `var loadStylesheet = ${runtimeTemplate.basicFunction(
  193. "chunkId, url, done" + (withHmr ? ", hmr" : ""),
  194. [
  195. 'var link, needAttach, key = "chunk-" + chunkId;',
  196. withHmr ? "if(!hmr) {" : "",
  197. 'var links = document.getElementsByTagName("link");',
  198. "for(var i = 0; i < links.length; i++) {",
  199. Template.indent([
  200. "var l = links[i];",
  201. `if(l.rel == "stylesheet" && (${
  202. withHmr
  203. ? 'l.href.startsWith(url) || l.getAttribute("href").startsWith(url)'
  204. : 'l.href == url || l.getAttribute("href") == url'
  205. }${
  206. uniqueName
  207. ? ' || l.getAttribute("data-webpack") == uniqueName + ":" + key'
  208. : ""
  209. })) { link = l; break; }`
  210. ]),
  211. "}",
  212. "if(!done) return link;",
  213. withHmr ? "}" : "",
  214. "if(!link) {",
  215. Template.indent([
  216. "needAttach = true;",
  217. createStylesheet.call(code, this.chunk)
  218. ]),
  219. "}",
  220. `var onLinkComplete = ${runtimeTemplate.basicFunction(
  221. "prev, event",
  222. Template.asString([
  223. "link.onerror = link.onload = null;",
  224. "link.removeAttribute(loadingAttribute);",
  225. "clearTimeout(timeout);",
  226. 'if(event && event.type != "load") link.parentNode.removeChild(link)',
  227. "done(event);",
  228. "if(prev) return prev(event);"
  229. ])
  230. )};`,
  231. "if(link.getAttribute(loadingAttribute)) {",
  232. Template.indent([
  233. `var timeout = setTimeout(onLinkComplete.bind(null, undefined, { type: 'timeout', target: link }), ${loadTimeout});`,
  234. "link.onerror = onLinkComplete.bind(null, link.onerror);",
  235. "link.onload = onLinkComplete.bind(null, link.onload);"
  236. ]),
  237. "} else onLinkComplete(undefined, { type: 'load', target: link });", // We assume any existing stylesheet is render blocking
  238. withHmr ? "hmr ? document.head.insertBefore(link, hmr) :" : "",
  239. "needAttach && document.head.appendChild(link);",
  240. "return link;"
  241. ]
  242. )};`,
  243. initialChunkIdsWithCss.size > 2
  244. ? `${JSON.stringify(
  245. Array.from(initialChunkIdsWithCss)
  246. )}.forEach(loadCssChunkData.bind(null, ${
  247. RuntimeGlobals.moduleFactories
  248. }, 0));`
  249. : initialChunkIdsWithCss.size > 0
  250. ? `${Array.from(
  251. initialChunkIdsWithCss,
  252. id =>
  253. `loadCssChunkData(${
  254. RuntimeGlobals.moduleFactories
  255. }, 0, ${JSON.stringify(id)});`
  256. ).join("")}`
  257. : "// no initial css",
  258. "",
  259. withLoading
  260. ? Template.asString([
  261. `${fn}.css = ${runtimeTemplate.basicFunction("chunkId, promises", [
  262. "// css chunk loading",
  263. `var installedChunkData = ${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;`,
  264. 'if(installedChunkData !== 0) { // 0 means "already installed".',
  265. Template.indent([
  266. "",
  267. '// a Promise means "currently loading".',
  268. "if(installedChunkData) {",
  269. Template.indent(["promises.push(installedChunkData[2]);"]),
  270. "} else {",
  271. Template.indent([
  272. hasCssMatcher === true
  273. ? "if(true) { // all chunks have CSS"
  274. : `if(${hasCssMatcher("chunkId")}) {`,
  275. Template.indent([
  276. "// setup Promise in chunk cache",
  277. `var promise = new Promise(${runtimeTemplate.expressionFunction(
  278. `installedChunkData = installedChunks[chunkId] = [resolve, reject]`,
  279. "resolve, reject"
  280. )});`,
  281. "promises.push(installedChunkData[2] = promise);",
  282. "",
  283. "// start chunk loading",
  284. `var url = ${RuntimeGlobals.publicPath} + ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
  285. "// create error before stack unwound to get useful stacktrace later",
  286. "var error = new Error();",
  287. `var loadingEnded = ${runtimeTemplate.basicFunction(
  288. "event",
  289. [
  290. `if(${RuntimeGlobals.hasOwnProperty}(installedChunks, chunkId)) {`,
  291. Template.indent([
  292. "installedChunkData = installedChunks[chunkId];",
  293. "if(installedChunkData !== 0) installedChunks[chunkId] = undefined;",
  294. "if(installedChunkData) {",
  295. Template.indent([
  296. 'if(event.type !== "load") {',
  297. Template.indent([
  298. "var errorType = event && event.type;",
  299. "var realSrc = event && event.target && event.target.src;",
  300. "error.message = 'Loading css chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';",
  301. "error.name = 'ChunkLoadError';",
  302. "error.type = errorType;",
  303. "error.request = realSrc;",
  304. "installedChunkData[1](error);"
  305. ]),
  306. "} else {",
  307. Template.indent([
  308. `loadCssChunkData(${RuntimeGlobals.moduleFactories}, link, chunkId);`,
  309. "installedChunkData[0]();"
  310. ]),
  311. "}"
  312. ]),
  313. "}"
  314. ]),
  315. "}"
  316. ]
  317. )};`,
  318. "var link = loadStylesheet(chunkId, url, loadingEnded);"
  319. ]),
  320. "} else installedChunks[chunkId] = 0;"
  321. ]),
  322. "}"
  323. ]),
  324. "}"
  325. ])};`
  326. ])
  327. : "// no chunk loading",
  328. "",
  329. withHmr
  330. ? Template.asString([
  331. "var oldTags = [];",
  332. "var newTags = [];",
  333. `var applyHandler = ${runtimeTemplate.basicFunction("options", [
  334. `return { dispose: ${runtimeTemplate.basicFunction(
  335. "",
  336. []
  337. )}, apply: ${runtimeTemplate.basicFunction("", [
  338. "var moduleIds = [];",
  339. `newTags.forEach(${runtimeTemplate.expressionFunction(
  340. "info[1].sheet.disabled = false",
  341. "info"
  342. )});`,
  343. "while(oldTags.length) {",
  344. Template.indent([
  345. "var oldTag = oldTags.pop();",
  346. "if(oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);"
  347. ]),
  348. "}",
  349. "while(newTags.length) {",
  350. Template.indent([
  351. `var info = newTags.pop();`,
  352. `var chunkModuleIds = loadCssChunkData(${RuntimeGlobals.moduleFactories}, info[1], info[0]);`,
  353. `chunkModuleIds.forEach(${runtimeTemplate.expressionFunction(
  354. "moduleIds.push(id)",
  355. "id"
  356. )});`
  357. ]),
  358. "}",
  359. "return moduleIds;"
  360. ])} };`
  361. ])}`,
  362. `var cssTextKey = ${runtimeTemplate.returningFunction(
  363. `Array.from(link.sheet.cssRules, ${runtimeTemplate.returningFunction(
  364. "r.cssText",
  365. "r"
  366. )}).join()`,
  367. "link"
  368. )}`,
  369. `${
  370. RuntimeGlobals.hmrDownloadUpdateHandlers
  371. }.css = ${runtimeTemplate.basicFunction(
  372. "chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList",
  373. [
  374. "applyHandlers.push(applyHandler);",
  375. `chunkIds.forEach(${runtimeTemplate.basicFunction("chunkId", [
  376. `var filename = ${RuntimeGlobals.getChunkCssFilename}(chunkId);`,
  377. `var url = ${RuntimeGlobals.publicPath} + filename;`,
  378. "var oldTag = loadStylesheet(chunkId, url);",
  379. "if(!oldTag) return;",
  380. `promises.push(new Promise(${runtimeTemplate.basicFunction(
  381. "resolve, reject",
  382. [
  383. `var link = loadStylesheet(chunkId, url + (url.indexOf("?") < 0 ? "?" : "&") + "hmr=" + Date.now(), ${runtimeTemplate.basicFunction(
  384. "event",
  385. [
  386. 'if(event.type !== "load") {',
  387. Template.indent([
  388. "var errorType = event && event.type;",
  389. "var realSrc = event && event.target && event.target.src;",
  390. "error.message = 'Loading css hot update chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';",
  391. "error.name = 'ChunkLoadError';",
  392. "error.type = errorType;",
  393. "error.request = realSrc;",
  394. "reject(error);"
  395. ]),
  396. "} else {",
  397. Template.indent([
  398. "try { if(cssTextKey(oldTag) == cssTextKey(link)) { if(link.parentNode) link.parentNode.removeChild(link); return resolve(); } } catch(e) {}",
  399. "var factories = {};",
  400. "loadCssChunkData(factories, link, chunkId);",
  401. `Object.keys(factories).forEach(${runtimeTemplate.expressionFunction(
  402. "updatedModulesList.push(id)",
  403. "id"
  404. )})`,
  405. "link.sheet.disabled = true;",
  406. "oldTags.push(oldTag);",
  407. "newTags.push([chunkId, link]);",
  408. "resolve();"
  409. ]),
  410. "}"
  411. ]
  412. )}, oldTag);`
  413. ]
  414. )}));`
  415. ])});`
  416. ]
  417. )}`
  418. ])
  419. : "// no hmr"
  420. ]);
  421. }
  422. }
  423. module.exports = CssLoadingRuntimeModule;