CssModulesPlugin.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934
  1. /*
  2. MIT License http://www.opensource.org/licenses/mit-license.php
  3. Author Tobias Koppers @sokra
  4. */
  5. "use strict";
  6. const { SyncHook, SyncWaterfallHook } = require("tapable");
  7. const {
  8. CachedSource,
  9. ConcatSource,
  10. PrefixSource,
  11. RawSource,
  12. ReplaceSource
  13. } = require("webpack-sources");
  14. const Compilation = require("../Compilation");
  15. const CssModule = require("../CssModule");
  16. const { tryRunOrWebpackError } = require("../HookWebpackError");
  17. const HotUpdateChunk = require("../HotUpdateChunk");
  18. const {
  19. CSS_MODULE_TYPE,
  20. CSS_MODULE_TYPE_AUTO,
  21. CSS_MODULE_TYPE_GLOBAL,
  22. CSS_MODULE_TYPE_MODULE
  23. } = require("../ModuleTypeConstants");
  24. const NormalModule = require("../NormalModule");
  25. const RuntimeGlobals = require("../RuntimeGlobals");
  26. const SelfModuleFactory = require("../SelfModuleFactory");
  27. const Template = require("../Template");
  28. const WebpackError = require("../WebpackError");
  29. const CssIcssExportDependency = require("../dependencies/CssIcssExportDependency");
  30. const CssIcssImportDependency = require("../dependencies/CssIcssImportDependency");
  31. const CssIcssSymbolDependency = require("../dependencies/CssIcssSymbolDependency");
  32. const CssImportDependency = require("../dependencies/CssImportDependency");
  33. const CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifierDependency");
  34. const CssSelfLocalIdentifierDependency = require("../dependencies/CssSelfLocalIdentifierDependency");
  35. const CssUrlDependency = require("../dependencies/CssUrlDependency");
  36. const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
  37. const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
  38. const { compareModulesByIdOrIdentifier } = require("../util/comparators");
  39. const createSchemaValidation = require("../util/create-schema-validation");
  40. const createHash = require("../util/createHash");
  41. const { getUndoPath } = require("../util/identifier");
  42. const memoize = require("../util/memoize");
  43. const nonNumericOnlyHash = require("../util/nonNumericOnlyHash");
  44. const removeBOM = require("../util/removeBOM");
  45. const CssGenerator = require("./CssGenerator");
  46. const CssParser = require("./CssParser");
  47. /** @typedef {import("webpack-sources").Source} Source */
  48. /** @typedef {import("../../declarations/WebpackOptions").HashFunction} HashFunction */
  49. /** @typedef {import("../../declarations/WebpackOptions").OutputNormalized} OutputOptions */
  50. /** @typedef {import("../Chunk")} Chunk */
  51. /** @typedef {import("../ChunkGraph")} ChunkGraph */
  52. /** @typedef {import("../CodeGenerationResults")} CodeGenerationResults */
  53. /** @typedef {import("../Compilation").ChunkHashContext} ChunkHashContext */
  54. /** @typedef {import("../Compiler")} Compiler */
  55. /** @typedef {import("../CssModule").Inheritance} Inheritance */
  56. /** @typedef {import("../CssModule").CSSModuleCreateData} CSSModuleCreateData */
  57. /** @typedef {import("../Module")} Module */
  58. /** @typedef {import("../Module").BuildInfo} BuildInfo */
  59. /** @typedef {import("../Template").RuntimeTemplate} RuntimeTemplate */
  60. /** @typedef {import("../TemplatedPathPlugin").TemplatePath} TemplatePath */
  61. /** @typedef {import("../util/Hash")} Hash */
  62. /** @typedef {import("../util/memoize")} Memoize */
  63. /**
  64. * @typedef {object} RenderContext
  65. * @property {Chunk} chunk the chunk
  66. * @property {ChunkGraph} chunkGraph the chunk graph
  67. * @property {CodeGenerationResults} codeGenerationResults results of code generation
  68. * @property {RuntimeTemplate} runtimeTemplate the runtime template
  69. * @property {string} uniqueName the unique name
  70. * @property {string} undoPath undo path to css file
  71. * @property {CssModule[]} modules modules
  72. */
  73. /**
  74. * @typedef {object} ChunkRenderContext
  75. * @property {Chunk} chunk the chunk
  76. * @property {ChunkGraph} chunkGraph the chunk graph
  77. * @property {CodeGenerationResults} codeGenerationResults results of code generation
  78. * @property {RuntimeTemplate} runtimeTemplate the runtime template
  79. * @property {string} undoPath undo path to css file
  80. */
  81. /**
  82. * @typedef {object} CompilationHooks
  83. * @property {SyncWaterfallHook<[Source, Module, ChunkRenderContext]>} renderModulePackage
  84. * @property {SyncHook<[Chunk, Hash, ChunkHashContext]>} chunkHash
  85. */
  86. const getCssLoadingRuntimeModule = memoize(() =>
  87. require("./CssLoadingRuntimeModule")
  88. );
  89. /**
  90. * @param {string} name name
  91. * @returns {{ oneOf: [{ $ref: string }], definitions: import("../../schemas/WebpackOptions.json")["definitions"] }} schema
  92. */
  93. const getSchema = name => {
  94. const { definitions } = require("../../schemas/WebpackOptions.json");
  95. return {
  96. definitions,
  97. oneOf: [{ $ref: `#/definitions/${name}` }]
  98. };
  99. };
  100. const generatorValidationOptions = {
  101. name: "Css Modules Plugin",
  102. baseDataPath: "generator"
  103. };
  104. const validateGeneratorOptions = {
  105. css: createSchemaValidation(
  106. require("../../schemas/plugins/css/CssGeneratorOptions.check"),
  107. () => getSchema("CssGeneratorOptions"),
  108. generatorValidationOptions
  109. ),
  110. "css/auto": createSchemaValidation(
  111. require("../../schemas/plugins/css/CssAutoGeneratorOptions.check"),
  112. () => getSchema("CssAutoGeneratorOptions"),
  113. generatorValidationOptions
  114. ),
  115. "css/module": createSchemaValidation(
  116. require("../../schemas/plugins/css/CssModuleGeneratorOptions.check"),
  117. () => getSchema("CssModuleGeneratorOptions"),
  118. generatorValidationOptions
  119. ),
  120. "css/global": createSchemaValidation(
  121. require("../../schemas/plugins/css/CssGlobalGeneratorOptions.check"),
  122. () => getSchema("CssGlobalGeneratorOptions"),
  123. generatorValidationOptions
  124. )
  125. };
  126. const parserValidationOptions = {
  127. name: "Css Modules Plugin",
  128. baseDataPath: "parser"
  129. };
  130. const validateParserOptions = {
  131. css: createSchemaValidation(
  132. require("../../schemas/plugins/css/CssParserOptions.check"),
  133. () => getSchema("CssParserOptions"),
  134. parserValidationOptions
  135. ),
  136. "css/auto": createSchemaValidation(
  137. require("../../schemas/plugins/css/CssAutoParserOptions.check"),
  138. () => getSchema("CssAutoParserOptions"),
  139. parserValidationOptions
  140. ),
  141. "css/module": createSchemaValidation(
  142. require("../../schemas/plugins/css/CssModuleParserOptions.check"),
  143. () => getSchema("CssModuleParserOptions"),
  144. parserValidationOptions
  145. ),
  146. "css/global": createSchemaValidation(
  147. require("../../schemas/plugins/css/CssGlobalParserOptions.check"),
  148. () => getSchema("CssGlobalParserOptions"),
  149. parserValidationOptions
  150. )
  151. };
  152. /** @type {WeakMap<Compilation, CompilationHooks>} */
  153. const compilationHooksMap = new WeakMap();
  154. const PLUGIN_NAME = "CssModulesPlugin";
  155. class CssModulesPlugin {
  156. /**
  157. * @param {Compilation} compilation the compilation
  158. * @returns {CompilationHooks} the attached hooks
  159. */
  160. static getCompilationHooks(compilation) {
  161. if (!(compilation instanceof Compilation)) {
  162. throw new TypeError(
  163. "The 'compilation' argument must be an instance of Compilation"
  164. );
  165. }
  166. let hooks = compilationHooksMap.get(compilation);
  167. if (hooks === undefined) {
  168. hooks = {
  169. renderModulePackage: new SyncWaterfallHook([
  170. "source",
  171. "module",
  172. "renderContext"
  173. ]),
  174. chunkHash: new SyncHook(["chunk", "hash", "context"])
  175. };
  176. compilationHooksMap.set(compilation, hooks);
  177. }
  178. return hooks;
  179. }
  180. constructor() {
  181. /** @type {WeakMap<Source, { undoPath: string, inheritance: Inheritance, source: CachedSource }>} */
  182. this._moduleFactoryCache = new WeakMap();
  183. }
  184. /**
  185. * Apply the plugin
  186. * @param {Compiler} compiler the compiler instance
  187. * @returns {void}
  188. */
  189. apply(compiler) {
  190. compiler.hooks.compilation.tap(
  191. PLUGIN_NAME,
  192. (compilation, { normalModuleFactory }) => {
  193. const hooks = CssModulesPlugin.getCompilationHooks(compilation);
  194. const selfFactory = new SelfModuleFactory(compilation.moduleGraph);
  195. compilation.dependencyFactories.set(
  196. CssImportDependency,
  197. normalModuleFactory
  198. );
  199. compilation.dependencyTemplates.set(
  200. CssImportDependency,
  201. new CssImportDependency.Template()
  202. );
  203. compilation.dependencyFactories.set(
  204. CssUrlDependency,
  205. normalModuleFactory
  206. );
  207. compilation.dependencyTemplates.set(
  208. CssUrlDependency,
  209. new CssUrlDependency.Template()
  210. );
  211. compilation.dependencyTemplates.set(
  212. CssLocalIdentifierDependency,
  213. new CssLocalIdentifierDependency.Template()
  214. );
  215. compilation.dependencyFactories.set(
  216. CssSelfLocalIdentifierDependency,
  217. selfFactory
  218. );
  219. compilation.dependencyTemplates.set(
  220. CssSelfLocalIdentifierDependency,
  221. new CssSelfLocalIdentifierDependency.Template()
  222. );
  223. compilation.dependencyFactories.set(
  224. CssIcssImportDependency,
  225. normalModuleFactory
  226. );
  227. compilation.dependencyTemplates.set(
  228. CssIcssImportDependency,
  229. new CssIcssImportDependency.Template()
  230. );
  231. compilation.dependencyTemplates.set(
  232. CssIcssExportDependency,
  233. new CssIcssExportDependency.Template()
  234. );
  235. compilation.dependencyTemplates.set(
  236. CssIcssSymbolDependency,
  237. new CssIcssSymbolDependency.Template()
  238. );
  239. compilation.dependencyTemplates.set(
  240. StaticExportsDependency,
  241. new StaticExportsDependency.Template()
  242. );
  243. for (const type of [
  244. CSS_MODULE_TYPE,
  245. CSS_MODULE_TYPE_GLOBAL,
  246. CSS_MODULE_TYPE_MODULE,
  247. CSS_MODULE_TYPE_AUTO
  248. ]) {
  249. normalModuleFactory.hooks.createParser
  250. .for(type)
  251. .tap(PLUGIN_NAME, parserOptions => {
  252. validateParserOptions[type](parserOptions);
  253. const { url, import: importOption, namedExports } = parserOptions;
  254. switch (type) {
  255. case CSS_MODULE_TYPE:
  256. return new CssParser({
  257. importOption,
  258. url,
  259. namedExports
  260. });
  261. case CSS_MODULE_TYPE_GLOBAL:
  262. return new CssParser({
  263. defaultMode: "global",
  264. importOption,
  265. url,
  266. namedExports
  267. });
  268. case CSS_MODULE_TYPE_MODULE:
  269. return new CssParser({
  270. defaultMode: "local",
  271. importOption,
  272. url,
  273. namedExports
  274. });
  275. case CSS_MODULE_TYPE_AUTO:
  276. return new CssParser({
  277. defaultMode: "auto",
  278. importOption,
  279. url,
  280. namedExports
  281. });
  282. }
  283. });
  284. normalModuleFactory.hooks.createGenerator
  285. .for(type)
  286. .tap(PLUGIN_NAME, generatorOptions => {
  287. validateGeneratorOptions[type](generatorOptions);
  288. return new CssGenerator(
  289. generatorOptions,
  290. compilation.moduleGraph
  291. );
  292. });
  293. normalModuleFactory.hooks.createModuleClass
  294. .for(type)
  295. .tap(PLUGIN_NAME, (createData, resolveData) => {
  296. if (resolveData.dependencies.length > 0) {
  297. // When CSS is imported from CSS there is only one dependency
  298. const dependency = resolveData.dependencies[0];
  299. if (dependency instanceof CssImportDependency) {
  300. const parent =
  301. /** @type {CssModule} */
  302. (compilation.moduleGraph.getParentModule(dependency));
  303. if (parent instanceof CssModule) {
  304. /** @type {import("../CssModule").Inheritance | undefined} */
  305. let inheritance;
  306. if (
  307. parent.cssLayer !== undefined ||
  308. parent.supports ||
  309. parent.media
  310. ) {
  311. if (!inheritance) {
  312. inheritance = [];
  313. }
  314. inheritance.push([
  315. parent.cssLayer,
  316. parent.supports,
  317. parent.media
  318. ]);
  319. }
  320. if (parent.inheritance) {
  321. if (!inheritance) {
  322. inheritance = [];
  323. }
  324. inheritance.push(...parent.inheritance);
  325. }
  326. return new CssModule(
  327. /** @type {CSSModuleCreateData} */
  328. ({
  329. ...createData,
  330. cssLayer: dependency.layer,
  331. supports: dependency.supports,
  332. media: dependency.media,
  333. inheritance
  334. })
  335. );
  336. }
  337. return new CssModule(
  338. /** @type {CSSModuleCreateData} */
  339. ({
  340. ...createData,
  341. cssLayer: dependency.layer,
  342. supports: dependency.supports,
  343. media: dependency.media
  344. })
  345. );
  346. }
  347. }
  348. return new CssModule(
  349. /** @type {CSSModuleCreateData} */
  350. (createData)
  351. );
  352. });
  353. NormalModule.getCompilationHooks(compilation).processResult.tap(
  354. PLUGIN_NAME,
  355. (result, module) => {
  356. if (module.type === type) {
  357. const [source, ...rest] = result;
  358. return [removeBOM(source), ...rest];
  359. }
  360. return result;
  361. }
  362. );
  363. }
  364. JavascriptModulesPlugin.getCompilationHooks(
  365. compilation
  366. ).renderModuleContent.tap(PLUGIN_NAME, (source, module) => {
  367. if (module instanceof CssModule && module.hot) {
  368. const cssData = /** @type {BuildInfo} */ (module.buildInfo).cssData;
  369. if (!cssData) {
  370. return source;
  371. }
  372. const exports = cssData.exports;
  373. const stringifiedExports = JSON.stringify(
  374. JSON.stringify(
  375. [...exports].reduce((obj, [key, value]) => {
  376. obj[key] = value;
  377. return obj;
  378. }, /** @type {Record<string, string>} */ ({}))
  379. )
  380. );
  381. const hmrCode = Template.asString([
  382. "",
  383. `var __webpack_css_exports__ = ${stringifiedExports};`,
  384. "// only invalidate when locals change",
  385. "if (module.hot.data && module.hot.data.__webpack_css_exports__ && module.hot.data.__webpack_css_exports__ != __webpack_css_exports__) {",
  386. Template.indent("module.hot.invalidate();"),
  387. "} else {",
  388. Template.indent("module.hot.accept();"),
  389. "}",
  390. "module.hot.dispose(function(data) { data.__webpack_css_exports__ = __webpack_css_exports__; });"
  391. ]);
  392. return new ConcatSource(source, "\n", new RawSource(hmrCode));
  393. }
  394. return source;
  395. });
  396. const orderedCssModulesPerChunk = new WeakMap();
  397. compilation.hooks.afterCodeGeneration.tap(PLUGIN_NAME, () => {
  398. const { chunkGraph } = compilation;
  399. for (const chunk of compilation.chunks) {
  400. if (CssModulesPlugin.chunkHasCss(chunk, chunkGraph)) {
  401. orderedCssModulesPerChunk.set(
  402. chunk,
  403. this.getOrderedChunkCssModules(chunk, chunkGraph, compilation)
  404. );
  405. }
  406. }
  407. });
  408. compilation.hooks.chunkHash.tap(PLUGIN_NAME, (chunk, hash, context) => {
  409. hooks.chunkHash.call(chunk, hash, context);
  410. });
  411. compilation.hooks.contentHash.tap(PLUGIN_NAME, chunk => {
  412. const {
  413. chunkGraph,
  414. codeGenerationResults,
  415. moduleGraph,
  416. runtimeTemplate,
  417. outputOptions: {
  418. hashSalt,
  419. hashDigest,
  420. hashDigestLength,
  421. hashFunction
  422. }
  423. } = compilation;
  424. const hash = createHash(/** @type {HashFunction} */ (hashFunction));
  425. if (hashSalt) hash.update(hashSalt);
  426. hooks.chunkHash.call(chunk, hash, {
  427. chunkGraph,
  428. codeGenerationResults,
  429. moduleGraph,
  430. runtimeTemplate
  431. });
  432. const modules = orderedCssModulesPerChunk.get(chunk);
  433. if (modules) {
  434. for (const module of modules) {
  435. hash.update(chunkGraph.getModuleHash(module, chunk.runtime));
  436. }
  437. }
  438. const digest = /** @type {string} */ (hash.digest(hashDigest));
  439. chunk.contentHash.css = nonNumericOnlyHash(
  440. digest,
  441. /** @type {number} */
  442. (hashDigestLength)
  443. );
  444. });
  445. compilation.hooks.renderManifest.tap(PLUGIN_NAME, (result, options) => {
  446. const { chunkGraph } = compilation;
  447. const { hash, chunk, codeGenerationResults, runtimeTemplate } =
  448. options;
  449. if (chunk instanceof HotUpdateChunk) return result;
  450. /** @type {CssModule[] | undefined} */
  451. const modules = orderedCssModulesPerChunk.get(chunk);
  452. if (modules !== undefined) {
  453. const { path: filename, info } = compilation.getPathWithInfo(
  454. CssModulesPlugin.getChunkFilenameTemplate(
  455. chunk,
  456. compilation.outputOptions
  457. ),
  458. {
  459. hash,
  460. runtime: chunk.runtime,
  461. chunk,
  462. contentHashType: "css"
  463. }
  464. );
  465. const undoPath = getUndoPath(
  466. filename,
  467. /** @type {string} */
  468. (compilation.outputOptions.path),
  469. false
  470. );
  471. result.push({
  472. render: () =>
  473. this.renderChunk(
  474. {
  475. chunk,
  476. chunkGraph,
  477. codeGenerationResults,
  478. uniqueName:
  479. /** @type {string} */
  480. (compilation.outputOptions.uniqueName),
  481. undoPath,
  482. modules,
  483. runtimeTemplate
  484. },
  485. hooks
  486. ),
  487. filename,
  488. info,
  489. identifier: `css${chunk.id}`,
  490. hash: chunk.contentHash.css
  491. });
  492. }
  493. return result;
  494. });
  495. const globalChunkLoading = compilation.outputOptions.chunkLoading;
  496. /**
  497. * @param {Chunk} chunk the chunk
  498. * @returns {boolean} true, when enabled
  499. */
  500. const isEnabledForChunk = chunk => {
  501. const options = chunk.getEntryOptions();
  502. const chunkLoading =
  503. options && options.chunkLoading !== undefined
  504. ? options.chunkLoading
  505. : globalChunkLoading;
  506. return chunkLoading === "jsonp" || chunkLoading === "import";
  507. };
  508. const onceForChunkSet = new WeakSet();
  509. /**
  510. * @param {Chunk} chunk chunk to check
  511. * @param {Set<string>} set runtime requirements
  512. */
  513. const handler = (chunk, set) => {
  514. if (onceForChunkSet.has(chunk)) return;
  515. onceForChunkSet.add(chunk);
  516. if (!isEnabledForChunk(chunk)) return;
  517. set.add(RuntimeGlobals.makeNamespaceObject);
  518. const CssLoadingRuntimeModule = getCssLoadingRuntimeModule();
  519. compilation.addRuntimeModule(chunk, new CssLoadingRuntimeModule(set));
  520. };
  521. compilation.hooks.runtimeRequirementInTree
  522. .for(RuntimeGlobals.hasCssModules)
  523. .tap(PLUGIN_NAME, handler);
  524. compilation.hooks.runtimeRequirementInTree
  525. .for(RuntimeGlobals.ensureChunkHandlers)
  526. .tap(PLUGIN_NAME, (chunk, set, { chunkGraph }) => {
  527. if (!isEnabledForChunk(chunk)) return;
  528. if (
  529. !chunkGraph.hasModuleInGraph(
  530. chunk,
  531. m =>
  532. m.type === CSS_MODULE_TYPE ||
  533. m.type === CSS_MODULE_TYPE_GLOBAL ||
  534. m.type === CSS_MODULE_TYPE_MODULE ||
  535. m.type === CSS_MODULE_TYPE_AUTO
  536. )
  537. ) {
  538. return;
  539. }
  540. set.add(RuntimeGlobals.hasOwnProperty);
  541. set.add(RuntimeGlobals.publicPath);
  542. set.add(RuntimeGlobals.getChunkCssFilename);
  543. });
  544. compilation.hooks.runtimeRequirementInTree
  545. .for(RuntimeGlobals.hmrDownloadUpdateHandlers)
  546. .tap(PLUGIN_NAME, (chunk, set, { chunkGraph }) => {
  547. if (!isEnabledForChunk(chunk)) return;
  548. if (
  549. !chunkGraph.hasModuleInGraph(
  550. chunk,
  551. m =>
  552. m.type === CSS_MODULE_TYPE ||
  553. m.type === CSS_MODULE_TYPE_GLOBAL ||
  554. m.type === CSS_MODULE_TYPE_MODULE ||
  555. m.type === CSS_MODULE_TYPE_AUTO
  556. )
  557. ) {
  558. return;
  559. }
  560. set.add(RuntimeGlobals.publicPath);
  561. set.add(RuntimeGlobals.getChunkCssFilename);
  562. });
  563. }
  564. );
  565. }
  566. /**
  567. * @param {Chunk} chunk chunk
  568. * @param {Iterable<Module>} modules unordered modules
  569. * @param {Compilation} compilation compilation
  570. * @returns {Module[]} ordered modules
  571. */
  572. getModulesInOrder(chunk, modules, compilation) {
  573. if (!modules) return [];
  574. /** @type {Module[]} */
  575. const modulesList = [...modules];
  576. // Get ordered list of modules per chunk group
  577. // Lists are in reverse order to allow to use Array.pop()
  578. const modulesByChunkGroup = Array.from(chunk.groupsIterable, chunkGroup => {
  579. const sortedModules = modulesList
  580. .map(module => ({
  581. module,
  582. index: chunkGroup.getModulePostOrderIndex(module)
  583. }))
  584. .filter(item => item.index !== undefined)
  585. .sort(
  586. (a, b) =>
  587. /** @type {number} */ (b.index) - /** @type {number} */ (a.index)
  588. )
  589. .map(item => item.module);
  590. return { list: sortedModules, set: new Set(sortedModules) };
  591. });
  592. if (modulesByChunkGroup.length === 1) {
  593. return modulesByChunkGroup[0].list.reverse();
  594. }
  595. const boundCompareModulesByIdOrIdentifier = compareModulesByIdOrIdentifier(
  596. compilation.chunkGraph
  597. );
  598. /**
  599. * @param {{ list: Module[] }} a a
  600. * @param {{ list: Module[] }} b b
  601. * @returns {-1 | 0 | 1} result
  602. */
  603. const compareModuleLists = ({ list: a }, { list: b }) => {
  604. if (a.length === 0) {
  605. return b.length === 0 ? 0 : 1;
  606. }
  607. if (b.length === 0) return -1;
  608. return boundCompareModulesByIdOrIdentifier(
  609. a[a.length - 1],
  610. b[b.length - 1]
  611. );
  612. };
  613. modulesByChunkGroup.sort(compareModuleLists);
  614. /** @type {Module[]} */
  615. const finalModules = [];
  616. for (;;) {
  617. const failedModules = new Set();
  618. const list = modulesByChunkGroup[0].list;
  619. if (list.length === 0) {
  620. // done, everything empty
  621. break;
  622. }
  623. /** @type {Module} */
  624. let selectedModule = list[list.length - 1];
  625. let hasFailed;
  626. outer: for (;;) {
  627. for (const { list, set } of modulesByChunkGroup) {
  628. if (list.length === 0) continue;
  629. const lastModule = list[list.length - 1];
  630. if (lastModule === selectedModule) continue;
  631. if (!set.has(selectedModule)) continue;
  632. failedModules.add(selectedModule);
  633. if (failedModules.has(lastModule)) {
  634. // There is a conflict, try other alternatives
  635. hasFailed = lastModule;
  636. continue;
  637. }
  638. selectedModule = lastModule;
  639. hasFailed = false;
  640. continue outer; // restart
  641. }
  642. break;
  643. }
  644. if (hasFailed) {
  645. // There is a not resolve-able conflict with the selectedModule
  646. // TODO print better warning
  647. compilation.warnings.push(
  648. new WebpackError(
  649. `chunk ${chunk.name || chunk.id}\nConflicting order between ${
  650. /** @type {Module} */
  651. (hasFailed).readableIdentifier(compilation.requestShortener)
  652. } and ${selectedModule.readableIdentifier(
  653. compilation.requestShortener
  654. )}`
  655. )
  656. );
  657. selectedModule = /** @type {Module} */ (hasFailed);
  658. }
  659. // Insert the selected module into the final modules list
  660. finalModules.push(selectedModule);
  661. // Remove the selected module from all lists
  662. for (const { list, set } of modulesByChunkGroup) {
  663. const lastModule = list[list.length - 1];
  664. if (lastModule === selectedModule) {
  665. list.pop();
  666. } else if (hasFailed && set.has(selectedModule)) {
  667. const idx = list.indexOf(selectedModule);
  668. if (idx >= 0) list.splice(idx, 1);
  669. }
  670. }
  671. modulesByChunkGroup.sort(compareModuleLists);
  672. }
  673. return finalModules;
  674. }
  675. /**
  676. * @param {Chunk} chunk chunk
  677. * @param {ChunkGraph} chunkGraph chunk graph
  678. * @param {Compilation} compilation compilation
  679. * @returns {Module[]} ordered css modules
  680. */
  681. getOrderedChunkCssModules(chunk, chunkGraph, compilation) {
  682. return [
  683. ...this.getModulesInOrder(
  684. chunk,
  685. /** @type {Iterable<Module>} */
  686. (
  687. chunkGraph.getOrderedChunkModulesIterableBySourceType(
  688. chunk,
  689. "css-import",
  690. compareModulesByIdOrIdentifier(chunkGraph)
  691. )
  692. ),
  693. compilation
  694. ),
  695. ...this.getModulesInOrder(
  696. chunk,
  697. /** @type {Iterable<Module>} */
  698. (
  699. chunkGraph.getOrderedChunkModulesIterableBySourceType(
  700. chunk,
  701. "css",
  702. compareModulesByIdOrIdentifier(chunkGraph)
  703. )
  704. ),
  705. compilation
  706. )
  707. ];
  708. }
  709. /**
  710. * @param {CssModule} module css module
  711. * @param {ChunkRenderContext} renderContext options object
  712. * @param {CompilationHooks} hooks hooks
  713. * @returns {Source} css module source
  714. */
  715. renderModule(module, renderContext, hooks) {
  716. const { codeGenerationResults, chunk, undoPath } = renderContext;
  717. const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
  718. const moduleSourceContent =
  719. /** @type {Source} */
  720. (
  721. codeGenResult.sources.get("css") ||
  722. codeGenResult.sources.get("css-import")
  723. );
  724. const cacheEntry = this._moduleFactoryCache.get(moduleSourceContent);
  725. /** @type {Inheritance} */
  726. const inheritance = [[module.cssLayer, module.supports, module.media]];
  727. if (module.inheritance) {
  728. inheritance.push(...module.inheritance);
  729. }
  730. let source;
  731. if (
  732. cacheEntry &&
  733. cacheEntry.undoPath === undoPath &&
  734. cacheEntry.inheritance.every(([layer, supports, media], i) => {
  735. const item = inheritance[i];
  736. if (Array.isArray(item)) {
  737. return layer === item[0] && supports === item[1] && media === item[2];
  738. }
  739. return false;
  740. })
  741. ) {
  742. source = cacheEntry.source;
  743. } else {
  744. const moduleSourceCode =
  745. /** @type {string} */
  746. (moduleSourceContent.source());
  747. const publicPathAutoRegex = new RegExp(
  748. CssUrlDependency.PUBLIC_PATH_AUTO,
  749. "g"
  750. );
  751. /** @type {Source} */
  752. let moduleSource = new ReplaceSource(moduleSourceContent);
  753. let match;
  754. while ((match = publicPathAutoRegex.exec(moduleSourceCode))) {
  755. /** @type {ReplaceSource} */ (moduleSource).replace(
  756. match.index,
  757. (match.index += match[0].length - 1),
  758. undoPath
  759. );
  760. }
  761. for (let i = 0; i < inheritance.length; i++) {
  762. const layer = inheritance[i][0];
  763. const supports = inheritance[i][1];
  764. const media = inheritance[i][2];
  765. if (media) {
  766. moduleSource = new ConcatSource(
  767. `@media ${media} {\n`,
  768. new PrefixSource("\t", moduleSource),
  769. "}\n"
  770. );
  771. }
  772. if (supports) {
  773. moduleSource = new ConcatSource(
  774. `@supports (${supports}) {\n`,
  775. new PrefixSource("\t", moduleSource),
  776. "}\n"
  777. );
  778. }
  779. // Layer can be anonymous
  780. if (layer !== undefined && layer !== null) {
  781. moduleSource = new ConcatSource(
  782. `@layer${layer ? ` ${layer}` : ""} {\n`,
  783. new PrefixSource("\t", moduleSource),
  784. "}\n"
  785. );
  786. }
  787. }
  788. if (moduleSource) {
  789. moduleSource = new ConcatSource(moduleSource, "\n");
  790. }
  791. source = new CachedSource(moduleSource);
  792. this._moduleFactoryCache.set(moduleSourceContent, {
  793. inheritance,
  794. undoPath,
  795. source
  796. });
  797. }
  798. return tryRunOrWebpackError(
  799. () => hooks.renderModulePackage.call(source, module, renderContext),
  800. "CssModulesPlugin.getCompilationHooks().renderModulePackage"
  801. );
  802. }
  803. /**
  804. * @param {RenderContext} renderContext the render context
  805. * @param {CompilationHooks} hooks hooks
  806. * @returns {Source} generated source
  807. */
  808. renderChunk(
  809. {
  810. undoPath,
  811. chunk,
  812. chunkGraph,
  813. codeGenerationResults,
  814. modules,
  815. runtimeTemplate
  816. },
  817. hooks
  818. ) {
  819. const source = new ConcatSource();
  820. for (const module of modules) {
  821. try {
  822. const moduleSource = this.renderModule(
  823. module,
  824. {
  825. undoPath,
  826. chunk,
  827. chunkGraph,
  828. codeGenerationResults,
  829. runtimeTemplate
  830. },
  831. hooks
  832. );
  833. source.add(moduleSource);
  834. } catch (err) {
  835. /** @type {Error} */
  836. (err).message += `\nduring rendering of css ${module.identifier()}`;
  837. throw err;
  838. }
  839. }
  840. chunk.rendered = true;
  841. return source;
  842. }
  843. /**
  844. * @param {Chunk} chunk chunk
  845. * @param {OutputOptions} outputOptions output options
  846. * @returns {TemplatePath} used filename template
  847. */
  848. static getChunkFilenameTemplate(chunk, outputOptions) {
  849. if (chunk.cssFilenameTemplate) {
  850. return chunk.cssFilenameTemplate;
  851. } else if (chunk.canBeInitial()) {
  852. return /** @type {TemplatePath} */ (outputOptions.cssFilename);
  853. }
  854. return /** @type {TemplatePath} */ (outputOptions.cssChunkFilename);
  855. }
  856. /**
  857. * @param {Chunk} chunk chunk
  858. * @param {ChunkGraph} chunkGraph chunk graph
  859. * @returns {boolean} true, when the chunk has css
  860. */
  861. static chunkHasCss(chunk, chunkGraph) {
  862. return (
  863. Boolean(chunkGraph.getChunkModulesIterableBySourceType(chunk, "css")) ||
  864. Boolean(
  865. chunkGraph.getChunkModulesIterableBySourceType(chunk, "css-import")
  866. )
  867. );
  868. }
  869. }
  870. module.exports = CssModulesPlugin;