182 lines
5.2 KiB
JavaScript
182 lines
5.2 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.flattenToken = flattenToken;
|
|
exports.injectCSPNonce = injectCSPNonce;
|
|
exports.isNonNullable = exports.isClientSide = void 0;
|
|
exports.memoResult = memoResult;
|
|
exports.supportLayer = supportLayer;
|
|
exports.supportLogicProps = supportLogicProps;
|
|
exports.supportWhere = supportWhere;
|
|
exports.toStyleStr = toStyleStr;
|
|
exports.token2key = token2key;
|
|
exports.unit = unit;
|
|
exports.where = where;
|
|
var _hash = _interopRequireDefault(require("@emotion/hash"));
|
|
var _canUseDom = _interopRequireDefault(require("@rc-component/util/lib/Dom/canUseDom"));
|
|
var _dynamicCSS = require("@rc-component/util/lib/Dom/dynamicCSS");
|
|
var _StyleContext = require("../StyleContext");
|
|
var _theme = require("../theme");
|
|
// Create a cache for memo concat
|
|
|
|
const resultCache = new WeakMap();
|
|
const RESULT_VALUE = {};
|
|
function memoResult(callback, deps) {
|
|
let current = resultCache;
|
|
for (let i = 0; i < deps.length; i += 1) {
|
|
const dep = deps[i];
|
|
if (!current.has(dep)) {
|
|
current.set(dep, new WeakMap());
|
|
}
|
|
current = current.get(dep);
|
|
}
|
|
if (!current.has(RESULT_VALUE)) {
|
|
current.set(RESULT_VALUE, callback());
|
|
}
|
|
return current.get(RESULT_VALUE);
|
|
}
|
|
|
|
// Create a cache here to avoid always loop generate
|
|
const flattenTokenCache = new WeakMap();
|
|
|
|
/**
|
|
* Flatten token to string, this will auto cache the result when token not change
|
|
*/
|
|
function flattenToken(token) {
|
|
let str = flattenTokenCache.get(token) || '';
|
|
if (!str) {
|
|
Object.keys(token).forEach(key => {
|
|
const value = token[key];
|
|
str += key;
|
|
if (value instanceof _theme.Theme) {
|
|
str += value.id;
|
|
} else if (value && typeof value === 'object') {
|
|
str += flattenToken(value);
|
|
} else {
|
|
str += value;
|
|
}
|
|
});
|
|
|
|
// https://github.com/ant-design/ant-design/issues/48386
|
|
// Should hash the string to avoid style tag name too long
|
|
str = (0, _hash.default)(str);
|
|
|
|
// Put in cache
|
|
flattenTokenCache.set(token, str);
|
|
}
|
|
return str;
|
|
}
|
|
|
|
/**
|
|
* Convert derivative token to key string
|
|
*/
|
|
function token2key(token, salt) {
|
|
return (0, _hash.default)(`${salt}_${flattenToken(token)}`);
|
|
}
|
|
const randomSelectorKey = `random-${Date.now()}-${Math.random()}`.replace(/\./g, '');
|
|
|
|
// Magic `content` for detect selector support
|
|
const checkContent = '_bAmBoO_';
|
|
function supportSelector(styleStr, handleElement, supportCheck) {
|
|
if ((0, _canUseDom.default)()) {
|
|
(0, _dynamicCSS.updateCSS)(styleStr, randomSelectorKey);
|
|
const ele = document.createElement('div');
|
|
ele.style.position = 'fixed';
|
|
ele.style.left = '0';
|
|
ele.style.top = '0';
|
|
handleElement?.(ele);
|
|
document.body.appendChild(ele);
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
ele.innerHTML = 'Test';
|
|
ele.style.zIndex = '9999999';
|
|
}
|
|
const support = supportCheck ? supportCheck(ele) : getComputedStyle(ele).content?.includes(checkContent);
|
|
ele.parentNode?.removeChild(ele);
|
|
(0, _dynamicCSS.removeCSS)(randomSelectorKey);
|
|
return support;
|
|
}
|
|
return false;
|
|
}
|
|
let canLayer = undefined;
|
|
function supportLayer() {
|
|
if (canLayer === undefined) {
|
|
canLayer = supportSelector(`@layer ${randomSelectorKey} { .${randomSelectorKey} { content: "${checkContent}"!important; } }`, ele => {
|
|
ele.className = randomSelectorKey;
|
|
});
|
|
}
|
|
return canLayer;
|
|
}
|
|
let canWhere = undefined;
|
|
function supportWhere() {
|
|
if (canWhere === undefined) {
|
|
canWhere = supportSelector(`:where(.${randomSelectorKey}) { content: "${checkContent}"!important; }`, ele => {
|
|
ele.className = randomSelectorKey;
|
|
});
|
|
}
|
|
return canWhere;
|
|
}
|
|
let canLogic = undefined;
|
|
function supportLogicProps() {
|
|
if (canLogic === undefined) {
|
|
canLogic = supportSelector(`.${randomSelectorKey} { inset-block: 93px !important; }`, ele => {
|
|
ele.className = randomSelectorKey;
|
|
}, ele => getComputedStyle(ele).bottom === '93px');
|
|
}
|
|
return canLogic;
|
|
}
|
|
const isClientSide = exports.isClientSide = (0, _canUseDom.default)();
|
|
function unit(num) {
|
|
if (typeof num === 'number') {
|
|
return `${num}px`;
|
|
}
|
|
return num;
|
|
}
|
|
function toStyleStr(style, tokenKey, styleId, customizeAttrs = {}, plain = false) {
|
|
if (plain) {
|
|
return style;
|
|
}
|
|
const attrs = {
|
|
...customizeAttrs,
|
|
[_StyleContext.ATTR_TOKEN]: tokenKey,
|
|
[_StyleContext.ATTR_MARK]: styleId
|
|
};
|
|
const attrStr = Object.keys(attrs).map(attr => {
|
|
const val = attrs[attr];
|
|
return val ? `${attr}="${val}"` : null;
|
|
}).filter(v => v).join(' ');
|
|
return `<style ${attrStr}>${style}</style>`;
|
|
}
|
|
function where(options) {
|
|
const {
|
|
hashCls,
|
|
hashPriority = 'low'
|
|
} = options || {};
|
|
if (!hashCls) {
|
|
return '';
|
|
}
|
|
const hashSelector = `.${hashCls}`;
|
|
return hashPriority === 'low' ? `:where(${hashSelector})` : hashSelector;
|
|
}
|
|
const isNonNullable = val => {
|
|
return val !== undefined && val !== null;
|
|
};
|
|
exports.isNonNullable = isNonNullable;
|
|
/**
|
|
* Get nonce value and inject it into CSS config if available.
|
|
*/
|
|
function injectCSPNonce(config, nonce) {
|
|
const nonceStr = typeof nonce === 'function' ? nonce() : nonce;
|
|
if (nonceStr) {
|
|
return {
|
|
...config,
|
|
csp: {
|
|
...config.csp,
|
|
nonce: nonceStr
|
|
}
|
|
};
|
|
}
|
|
return config;
|
|
} |