useCSSVarRegister.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  2. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  3. import { removeCSS, updateCSS } from "rc-util/es/Dom/dynamicCSS";
  4. import { useContext } from 'react';
  5. import StyleContext, { ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE } from "../StyleContext";
  6. import { isClientSide, toStyleStr } from "../util";
  7. import { transformToken } from "../util/css-variables";
  8. import useGlobalCache from "./useGlobalCache";
  9. import { uniqueHash } from "./useStyleRegister";
  10. export var CSS_VAR_PREFIX = 'cssVar';
  11. var useCSSVarRegister = function useCSSVarRegister(config, fn) {
  12. var key = config.key,
  13. prefix = config.prefix,
  14. unitless = config.unitless,
  15. ignore = config.ignore,
  16. token = config.token,
  17. _config$scope = config.scope,
  18. scope = _config$scope === void 0 ? '' : _config$scope;
  19. var _useContext = useContext(StyleContext),
  20. instanceId = _useContext.cache.instanceId,
  21. container = _useContext.container;
  22. var tokenKey = token._tokenKey;
  23. var stylePath = [].concat(_toConsumableArray(config.path), [key, scope, tokenKey]);
  24. var cache = useGlobalCache(CSS_VAR_PREFIX, stylePath, function () {
  25. var originToken = fn();
  26. var _transformToken = transformToken(originToken, key, {
  27. prefix: prefix,
  28. unitless: unitless,
  29. ignore: ignore,
  30. scope: scope
  31. }),
  32. _transformToken2 = _slicedToArray(_transformToken, 2),
  33. mergedToken = _transformToken2[0],
  34. cssVarsStr = _transformToken2[1];
  35. var styleId = uniqueHash(stylePath, cssVarsStr);
  36. return [mergedToken, cssVarsStr, styleId, key];
  37. }, function (_ref) {
  38. var _ref2 = _slicedToArray(_ref, 3),
  39. styleId = _ref2[2];
  40. if (isClientSide) {
  41. removeCSS(styleId, {
  42. mark: ATTR_MARK,
  43. attachTo: container
  44. });
  45. }
  46. }, function (_ref3) {
  47. var _ref4 = _slicedToArray(_ref3, 3),
  48. cssVarsStr = _ref4[1],
  49. styleId = _ref4[2];
  50. if (!cssVarsStr) {
  51. return;
  52. }
  53. var style = updateCSS(cssVarsStr, styleId, {
  54. mark: ATTR_MARK,
  55. prepend: 'queue',
  56. attachTo: container,
  57. priority: -999
  58. });
  59. style[CSS_IN_JS_INSTANCE] = instanceId;
  60. // Used for `useCacheToken` to remove on batch when token removed
  61. style.setAttribute(ATTR_TOKEN, key);
  62. });
  63. return cache;
  64. };
  65. export var extract = function extract(cache, effectStyles, options) {
  66. var _cache = _slicedToArray(cache, 4),
  67. styleStr = _cache[1],
  68. styleId = _cache[2],
  69. cssVarKey = _cache[3];
  70. var _ref5 = options || {},
  71. plain = _ref5.plain;
  72. if (!styleStr) {
  73. return null;
  74. }
  75. var order = -999;
  76. // ====================== Style ======================
  77. // Used for rc-util
  78. var sharedAttrs = {
  79. 'data-rc-order': 'prependQueue',
  80. 'data-rc-priority': "".concat(order)
  81. };
  82. var styleText = toStyleStr(styleStr, cssVarKey, styleId, sharedAttrs, plain);
  83. return [order, styleId, styleText];
  84. };
  85. export default useCSSVarRegister;