CssModulesPlugin.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937
  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(
  579. chunk.groupsIterable,
  580. (chunkGroup) => {
  581. const sortedModules = modulesList
  582. .map((module) => ({
  583. module,
  584. index: chunkGroup.getModulePostOrderIndex(module)
  585. }))
  586. .filter((item) => item.index !== undefined)
  587. .sort(
  588. (a, b) =>
  589. /** @type {number} */ (b.index) - /** @type {number} */ (a.index)
  590. )
  591. .map((item) => item.module);
  592. return { list: sortedModules, set: new Set(sortedModules) };
  593. }
  594. );
  595. if (modulesByChunkGroup.length === 1) {
  596. return modulesByChunkGroup[0].list.reverse();
  597. }
  598. const boundCompareModulesByIdOrIdentifier = compareModulesByIdOrIdentifier(
  599. compilation.chunkGraph
  600. );
  601. /**
  602. * @param {{ list: Module[] }} a a
  603. * @param {{ list: Module[] }} b b
  604. * @returns {-1 | 0 | 1} result
  605. */
  606. const compareModuleLists = ({ list: a }, { list: b }) => {
  607. if (a.length === 0) {
  608. return b.length === 0 ? 0 : 1;
  609. }
  610. if (b.length === 0) return -1;
  611. return boundCompareModulesByIdOrIdentifier(
  612. a[a.length - 1],
  613. b[b.length - 1]
  614. );
  615. };
  616. modulesByChunkGroup.sort(compareModuleLists);
  617. /** @type {Module[]} */
  618. const finalModules = [];
  619. for (;;) {
  620. const failedModules = new Set();
  621. const list = modulesByChunkGroup[0].list;
  622. if (list.length === 0) {
  623. // done, everything empty
  624. break;
  625. }
  626. /** @type {Module} */
  627. let selectedModule = list[list.length - 1];
  628. let hasFailed;
  629. outer: for (;;) {
  630. for (const { list, set } of modulesByChunkGroup) {
  631. if (list.length === 0) continue;
  632. const lastModule = list[list.length - 1];
  633. if (lastModule === selectedModule) continue;
  634. if (!set.has(selectedModule)) continue;
  635. failedModules.add(selectedModule);
  636. if (failedModules.has(lastModule)) {
  637. // There is a conflict, try other alternatives
  638. hasFailed = lastModule;
  639. continue;
  640. }
  641. selectedModule = lastModule;
  642. hasFailed = false;
  643. continue outer; // restart
  644. }
  645. break;
  646. }
  647. if (hasFailed) {
  648. // There is a not resolve-able conflict with the selectedModule
  649. // TODO print better warning
  650. compilation.warnings.push(
  651. new WebpackError(
  652. `chunk ${chunk.name || chunk.id}\nConflicting order between ${
  653. /** @type {Module} */
  654. (hasFailed).readableIdentifier(compilation.requestShortener)
  655. } and ${selectedModule.readableIdentifier(
  656. compilation.requestShortener
  657. )}`
  658. )
  659. );
  660. selectedModule = /** @type {Module} */ (hasFailed);
  661. }
  662. // Insert the selected module into the final modules list
  663. finalModules.push(selectedModule);
  664. // Remove the selected module from all lists
  665. for (const { list, set } of modulesByChunkGroup) {
  666. const lastModule = list[list.length - 1];
  667. if (lastModule === selectedModule) {
  668. list.pop();
  669. } else if (hasFailed && set.has(selectedModule)) {
  670. const idx = list.indexOf(selectedModule);
  671. if (idx >= 0) list.splice(idx, 1);
  672. }
  673. }
  674. modulesByChunkGroup.sort(compareModuleLists);
  675. }
  676. return finalModules;
  677. }
  678. /**
  679. * @param {Chunk} chunk chunk
  680. * @param {ChunkGraph} chunkGraph chunk graph
  681. * @param {Compilation} compilation compilation
  682. * @returns {Module[]} ordered css modules
  683. */
  684. getOrderedChunkCssModules(chunk, chunkGraph, compilation) {
  685. return [
  686. ...this.getModulesInOrder(
  687. chunk,
  688. /** @type {Iterable<Module>} */
  689. (
  690. chunkGraph.getOrderedChunkModulesIterableBySourceType(
  691. chunk,
  692. "css-import",
  693. compareModulesByIdOrIdentifier(chunkGraph)
  694. )
  695. ),
  696. compilation
  697. ),
  698. ...this.getModulesInOrder(
  699. chunk,
  700. /** @type {Iterable<Module>} */
  701. (
  702. chunkGraph.getOrderedChunkModulesIterableBySourceType(
  703. chunk,
  704. "css",
  705. compareModulesByIdOrIdentifier(chunkGraph)
  706. )
  707. ),
  708. compilation
  709. )
  710. ];
  711. }
  712. /**
  713. * @param {CssModule} module css module
  714. * @param {ChunkRenderContext} renderContext options object
  715. * @param {CompilationHooks} hooks hooks
  716. * @returns {Source} css module source
  717. */
  718. renderModule(module, renderContext, hooks) {
  719. const { codeGenerationResults, chunk, undoPath } = renderContext;
  720. const codeGenResult = codeGenerationResults.get(module, chunk.runtime);
  721. const moduleSourceContent =
  722. /** @type {Source} */
  723. (
  724. codeGenResult.sources.get("css") ||
  725. codeGenResult.sources.get("css-import")
  726. );
  727. const cacheEntry = this._moduleFactoryCache.get(moduleSourceContent);
  728. /** @type {Inheritance} */
  729. const inheritance = [[module.cssLayer, module.supports, module.media]];
  730. if (module.inheritance) {
  731. inheritance.push(...module.inheritance);
  732. }
  733. let source;
  734. if (
  735. cacheEntry &&
  736. cacheEntry.undoPath === undoPath &&
  737. cacheEntry.inheritance.every(([layer, supports, media], i) => {
  738. const item = inheritance[i];
  739. if (Array.isArray(item)) {
  740. return layer === item[0] && supports === item[1] && media === item[2];
  741. }
  742. return false;
  743. })
  744. ) {
  745. source = cacheEntry.source;
  746. } else {
  747. const moduleSourceCode =
  748. /** @type {string} */
  749. (moduleSourceContent.source());
  750. const publicPathAutoRegex = new RegExp(
  751. CssUrlDependency.PUBLIC_PATH_AUTO,
  752. "g"
  753. );
  754. /** @type {Source} */
  755. let moduleSource = new ReplaceSource(moduleSourceContent);
  756. let match;
  757. while ((match = publicPathAutoRegex.exec(moduleSourceCode))) {
  758. /** @type {ReplaceSource} */ (moduleSource).replace(
  759. match.index,
  760. (match.index += match[0].length - 1),
  761. undoPath
  762. );
  763. }
  764. for (let i = 0; i < inheritance.length; i++) {
  765. const layer = inheritance[i][0];
  766. const supports = inheritance[i][1];
  767. const media = inheritance[i][2];
  768. if (media) {
  769. moduleSource = new ConcatSource(
  770. `@media ${media} {\n`,
  771. new PrefixSource("\t", moduleSource),
  772. "}\n"
  773. );
  774. }
  775. if (supports) {
  776. moduleSource = new ConcatSource(
  777. `@supports (${supports}) {\n`,
  778. new PrefixSource("\t", moduleSource),
  779. "}\n"
  780. );
  781. }
  782. // Layer can be anonymous
  783. if (layer !== undefined && layer !== null) {
  784. moduleSource = new ConcatSource(
  785. `@layer${layer ? ` ${layer}` : ""} {\n`,
  786. new PrefixSource("\t", moduleSource),
  787. "}\n"
  788. );
  789. }
  790. }
  791. if (moduleSource) {
  792. moduleSource = new ConcatSource(moduleSource, "\n");
  793. }
  794. source = new CachedSource(moduleSource);
  795. this._moduleFactoryCache.set(moduleSourceContent, {
  796. inheritance,
  797. undoPath,
  798. source
  799. });
  800. }
  801. return tryRunOrWebpackError(
  802. () => hooks.renderModulePackage.call(source, module, renderContext),
  803. "CssModulesPlugin.getCompilationHooks().renderModulePackage"
  804. );
  805. }
  806. /**
  807. * @param {RenderContext} renderContext the render context
  808. * @param {CompilationHooks} hooks hooks
  809. * @returns {Source} generated source
  810. */
  811. renderChunk(
  812. {
  813. undoPath,
  814. chunk,
  815. chunkGraph,
  816. codeGenerationResults,
  817. modules,
  818. runtimeTemplate
  819. },
  820. hooks
  821. ) {
  822. const source = new ConcatSource();
  823. for (const module of modules) {
  824. try {
  825. const moduleSource = this.renderModule(
  826. module,
  827. {
  828. undoPath,
  829. chunk,
  830. chunkGraph,
  831. codeGenerationResults,
  832. runtimeTemplate
  833. },
  834. hooks
  835. );
  836. source.add(moduleSource);
  837. } catch (err) {
  838. /** @type {Error} */
  839. (err).message += `\nduring rendering of css ${module.identifier()}`;
  840. throw err;
  841. }
  842. }
  843. chunk.rendered = true;
  844. return source;
  845. }
  846. /**
  847. * @param {Chunk} chunk chunk
  848. * @param {OutputOptions} outputOptions output options
  849. * @returns {TemplatePath} used filename template
  850. */
  851. static getChunkFilenameTemplate(chunk, outputOptions) {
  852. if (chunk.cssFilenameTemplate) {
  853. return chunk.cssFilenameTemplate;
  854. } else if (chunk.canBeInitial()) {
  855. return /** @type {TemplatePath} */ (outputOptions.cssFilename);
  856. }
  857. return /** @type {TemplatePath} */ (outputOptions.cssChunkFilename);
  858. }
  859. /**
  860. * @param {Chunk} chunk chunk
  861. * @param {ChunkGraph} chunkGraph chunk graph
  862. * @returns {boolean} true, when the chunk has css
  863. */
  864. static chunkHasCss(chunk, chunkGraph) {
  865. return (
  866. Boolean(chunkGraph.getChunkModulesIterableBySourceType(chunk, "css")) ||
  867. Boolean(
  868. chunkGraph.getChunkModulesIterableBySourceType(chunk, "css-import")
  869. )
  870. );
  871. }
  872. }
  873. module.exports = CssModulesPlugin;