util.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.flattenToken = flattenToken;
  7. exports.supportLayer = supportLayer;
  8. exports.supportLogicProps = supportLogicProps;
  9. exports.supportWhere = supportWhere;
  10. exports.token2key = token2key;
  11. var _hash = _interopRequireDefault(require("@emotion/hash"));
  12. var _dynamicCSS = require("../../vc-util/Dom/dynamicCSS");
  13. var _canUseDom = _interopRequireDefault(require("../canUseDom"));
  14. var _theme = require("./theme");
  15. // Create a cache here to avoid always loop generate
  16. const flattenTokenCache = new WeakMap();
  17. function flattenToken(token) {
  18. let str = flattenTokenCache.get(token) || '';
  19. if (!str) {
  20. Object.keys(token).forEach(key => {
  21. const value = token[key];
  22. str += key;
  23. if (value instanceof _theme.Theme) {
  24. str += value.id;
  25. } else if (value && typeof value === 'object') {
  26. str += flattenToken(value);
  27. } else {
  28. str += value;
  29. }
  30. });
  31. // Put in cache
  32. flattenTokenCache.set(token, str);
  33. }
  34. return str;
  35. }
  36. /**
  37. * Convert derivative token to key string
  38. */
  39. function token2key(token, salt) {
  40. return (0, _hash.default)(`${salt}_${flattenToken(token)}`);
  41. }
  42. const randomSelectorKey = `random-${Date.now()}-${Math.random()}`.replace(/\./g, '');
  43. // Magic `content` for detect selector support
  44. const checkContent = '_bAmBoO_';
  45. function supportSelector(styleStr, handleElement, supportCheck) {
  46. var _a, _b;
  47. if ((0, _canUseDom.default)()) {
  48. (0, _dynamicCSS.updateCSS)(styleStr, randomSelectorKey);
  49. const ele = document.createElement('div');
  50. ele.style.position = 'fixed';
  51. ele.style.left = '0';
  52. ele.style.top = '0';
  53. handleElement === null || handleElement === void 0 ? void 0 : handleElement(ele);
  54. document.body.appendChild(ele);
  55. if (process.env.NODE_ENV !== 'production') {
  56. ele.innerHTML = 'Test';
  57. ele.style.zIndex = '9999999';
  58. }
  59. const support = supportCheck ? supportCheck(ele) : (_a = getComputedStyle(ele).content) === null || _a === void 0 ? void 0 : _a.includes(checkContent);
  60. (_b = ele.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ele);
  61. (0, _dynamicCSS.removeCSS)(randomSelectorKey);
  62. return support;
  63. }
  64. return false;
  65. }
  66. let canLayer = undefined;
  67. function supportLayer() {
  68. if (canLayer === undefined) {
  69. canLayer = supportSelector(`@layer ${randomSelectorKey} { .${randomSelectorKey} { content: "${checkContent}"!important; } }`, ele => {
  70. ele.className = randomSelectorKey;
  71. });
  72. }
  73. return canLayer;
  74. }
  75. let canWhere = undefined;
  76. function supportWhere() {
  77. if (canWhere === undefined) {
  78. canWhere = supportSelector(`:where(.${randomSelectorKey}) { content: "${checkContent}"!important; }`, ele => {
  79. ele.className = randomSelectorKey;
  80. });
  81. }
  82. return canWhere;
  83. }
  84. let canLogic = undefined;
  85. function supportLogicProps() {
  86. if (canLogic === undefined) {
  87. canLogic = supportSelector(`.${randomSelectorKey} { inset-block: 93px !important; }`, ele => {
  88. ele.className = randomSelectorKey;
  89. }, ele => getComputedStyle(ele).bottom === '93px');
  90. }
  91. return canLogic;
  92. }