CssUrlDependency.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. /*
  2. MIT License http://www.opensource.org/licenses/mit-license.php
  3. Author Ivan Kopeykin @vankop
  4. */
  5. "use strict";
  6. const makeSerializable = require("../util/makeSerializable");
  7. const memoize = require("../util/memoize");
  8. const ModuleDependency = require("./ModuleDependency");
  9. /** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
  10. /** @typedef {import("../ChunkGraph")} ChunkGraph */
  11. /** @typedef {import("../Dependency")} Dependency */
  12. /** @typedef {import("../Dependency").UpdateHashContext} UpdateHashContext */
  13. /** @typedef {import("../DependencyTemplate").DependencyTemplateContext} DependencyTemplateContext */
  14. /** @typedef {import("../Module")} Module */
  15. /** @typedef {import("../ModuleGraph")} ModuleGraph */
  16. /** @typedef {import("../ModuleGraphConnection")} ModuleGraphConnection */
  17. /** @typedef {import("../ModuleGraphConnection").ConnectionState} ConnectionState */
  18. /** @typedef {import("../util/Hash")} Hash */
  19. /** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
  20. const getRawDataUrlModule = memoize(() => require("../asset/RawDataUrlModule"));
  21. class CssUrlDependency extends ModuleDependency {
  22. /**
  23. * @param {string} request request
  24. * @param {[number, number]} range range of the argument
  25. * @param {string} cssFunctionKind kind of css function, e. g. url(), image()
  26. */
  27. constructor(request, range, cssFunctionKind) {
  28. super(request);
  29. this.range = range;
  30. this.cssFunctionKind = cssFunctionKind;
  31. }
  32. get type() {
  33. return "css url()";
  34. }
  35. get category() {
  36. return "url";
  37. }
  38. /**
  39. * @param {string} context context directory
  40. * @returns {Module} a module
  41. */
  42. createIgnoredModule(context) {
  43. const RawDataUrlModule = getRawDataUrlModule();
  44. return new RawDataUrlModule("data:,", `ignored-asset`, `(ignored asset)`);
  45. }
  46. serialize(context) {
  47. const { write } = context;
  48. write(this.cssFunctionKind);
  49. super.serialize(context);
  50. }
  51. deserialize(context) {
  52. const { read } = context;
  53. this.cssFunctionKind = read();
  54. super.deserialize(context);
  55. }
  56. }
  57. const cssEscapeString = str => {
  58. let countWhiteOrBracket = 0;
  59. let countQuotation = 0;
  60. let countApostrophe = 0;
  61. for (let i = 0; i < str.length; i++) {
  62. const cc = str.charCodeAt(i);
  63. switch (cc) {
  64. case 9: // tab
  65. case 10: // nl
  66. case 32: // space
  67. case 40: // (
  68. case 41: // )
  69. countWhiteOrBracket++;
  70. break;
  71. case 34:
  72. countQuotation++;
  73. break;
  74. case 39:
  75. countApostrophe++;
  76. break;
  77. }
  78. }
  79. if (countWhiteOrBracket < 2) {
  80. return str.replace(/[\n\t ()'"\\]/g, m => `\\${m}`);
  81. } else if (countQuotation <= countApostrophe) {
  82. return `"${str.replace(/[\n"\\]/g, m => `\\${m}`)}"`;
  83. } else {
  84. return `'${str.replace(/[\n'\\]/g, m => `\\${m}`)}'`;
  85. }
  86. };
  87. CssUrlDependency.Template = class CssUrlDependencyTemplate extends (
  88. ModuleDependency.Template
  89. ) {
  90. /**
  91. * @param {Dependency} dependency the dependency for which the template should be applied
  92. * @param {ReplaceSource} source the current replace source which can be modified
  93. * @param {DependencyTemplateContext} templateContext the context object
  94. * @returns {void}
  95. */
  96. apply(
  97. dependency,
  98. source,
  99. { runtime, moduleGraph, runtimeTemplate, codeGenerationResults }
  100. ) {
  101. const dep = /** @type {CssUrlDependency} */ (dependency);
  102. source.replace(
  103. dep.range[0],
  104. dep.range[1] - 1,
  105. `${dep.cssFunctionKind}(${cssEscapeString(
  106. runtimeTemplate.assetUrl({
  107. publicPath: "",
  108. runtime,
  109. module: moduleGraph.getModule(dep),
  110. codeGenerationResults
  111. })
  112. )})`
  113. );
  114. }
  115. };
  116. makeSerializable(CssUrlDependency, "webpack/lib/dependencies/CssUrlDependency");
  117. module.exports = CssUrlDependency;