util.js 2.7 KB

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