dynamicCSS.js 3.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.injectCSS = injectCSS;
  7. exports.removeCSS = removeCSS;
  8. exports.updateCSS = updateCSS;
  9. var _canUseDom = _interopRequireDefault(require("../../_util/canUseDom"));
  10. var MARK_KEY = "vc-util-key";
  11. function getMark() {
  12. var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
  13. mark = _ref.mark;
  14. if (mark) {
  15. return mark.startsWith('data-') ? mark : "data-".concat(mark);
  16. }
  17. return MARK_KEY;
  18. }
  19. function getContainer(option) {
  20. if (option.attachTo) {
  21. return option.attachTo;
  22. }
  23. var head = document.querySelector('head');
  24. return head || document.body;
  25. }
  26. function injectCSS(css) {
  27. var _option$csp;
  28. var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  29. if (!(0, _canUseDom.default)()) {
  30. return null;
  31. }
  32. var styleNode = document.createElement('style');
  33. if ((_option$csp = option.csp) !== null && _option$csp !== void 0 && _option$csp.nonce) {
  34. var _option$csp2;
  35. styleNode.nonce = (_option$csp2 = option.csp) === null || _option$csp2 === void 0 ? void 0 : _option$csp2.nonce;
  36. }
  37. styleNode.innerHTML = css;
  38. var container = getContainer(option);
  39. var firstChild = container.firstChild;
  40. if (option.prepend && container.prepend) {
  41. // Use `prepend` first
  42. container.prepend(styleNode);
  43. } else if (option.prepend && firstChild) {
  44. // Fallback to `insertBefore` like IE not support `prepend`
  45. container.insertBefore(styleNode, firstChild);
  46. } else {
  47. container.appendChild(styleNode);
  48. }
  49. return styleNode;
  50. }
  51. var containerCache = new Map();
  52. function findExistNode(key) {
  53. var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  54. var container = getContainer(option);
  55. return Array.from(containerCache.get(container).children).find(function (node) {
  56. return node.tagName === 'STYLE' && node.getAttribute(getMark(option)) === key;
  57. });
  58. }
  59. function removeCSS(key) {
  60. var _existNode$parentNode;
  61. var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  62. var existNode = findExistNode(key, option);
  63. existNode === null || existNode === void 0 ? void 0 : (_existNode$parentNode = existNode.parentNode) === null || _existNode$parentNode === void 0 ? void 0 : _existNode$parentNode.removeChild(existNode);
  64. }
  65. function updateCSS(css, key) {
  66. var option = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  67. var container = getContainer(option);
  68. // Get real parent
  69. if (!containerCache.has(container)) {
  70. var placeholderStyle = injectCSS('', option);
  71. var parentNode = placeholderStyle.parentNode;
  72. containerCache.set(container, parentNode);
  73. parentNode.removeChild(placeholderStyle);
  74. }
  75. var existNode = findExistNode(key, option);
  76. if (existNode) {
  77. var _option$csp3, _option$csp4;
  78. if ((_option$csp3 = option.csp) !== null && _option$csp3 !== void 0 && _option$csp3.nonce && existNode.nonce !== ((_option$csp4 = option.csp) === null || _option$csp4 === void 0 ? void 0 : _option$csp4.nonce)) {
  79. var _option$csp5;
  80. existNode.nonce = (_option$csp5 = option.csp) === null || _option$csp5 === void 0 ? void 0 : _option$csp5.nonce;
  81. }
  82. if (existNode.innerHTML !== css) {
  83. existNode.innerHTML = css;
  84. }
  85. return existNode;
  86. }
  87. var newNode = injectCSS(css, option);
  88. newNode.setAttribute(getMark(option), key);
  89. return newNode;
  90. }