440 lines
19 KiB
JavaScript
440 lines
19 KiB
JavaScript
"use strict";
|
||
|
||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
||
Object.defineProperty(exports, "__esModule", {
|
||
value: true
|
||
});
|
||
exports.STYLE_PREFIX = void 0;
|
||
exports.default = useStyleRegister;
|
||
exports.extract = void 0;
|
||
exports.normalizeStyle = normalizeStyle;
|
||
exports.parseStyle = void 0;
|
||
exports.uniqueHash = uniqueHash;
|
||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
||
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
||
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
||
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
||
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
||
var _hash = _interopRequireDefault(require("@emotion/hash"));
|
||
var _dynamicCSS = require("rc-util/lib/Dom/dynamicCSS");
|
||
var React = _interopRequireWildcard(require("react"));
|
||
var _unitless = _interopRequireDefault(require("@emotion/unitless"));
|
||
var _stylis = require("stylis");
|
||
var _linters = require("../linters");
|
||
var _StyleContext = _interopRequireWildcard(require("../StyleContext"));
|
||
var _util = require("../util");
|
||
var _cacheMapUtil = require("../util/cacheMapUtil");
|
||
var _useGlobalCache3 = _interopRequireDefault(require("./useGlobalCache"));
|
||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
||
// @ts-ignore
|
||
|
||
var SKIP_CHECK = '_skip_check_';
|
||
var MULTI_VALUE = '_multi_value_';
|
||
// ============================================================================
|
||
// == Parser ==
|
||
// ============================================================================
|
||
// Preprocessor style content to browser support one
|
||
function normalizeStyle(styleStr) {
|
||
var serialized = (0, _stylis.serialize)((0, _stylis.compile)(styleStr), _stylis.stringify);
|
||
return serialized.replace(/\{%%%\:[^;];}/g, ';');
|
||
}
|
||
function isCompoundCSSProperty(value) {
|
||
return (0, _typeof2.default)(value) === 'object' && value && (SKIP_CHECK in value || MULTI_VALUE in value);
|
||
}
|
||
|
||
// 注入 hash 值
|
||
function injectSelectorHash(key, hashId, hashPriority) {
|
||
if (!hashId) {
|
||
return key;
|
||
}
|
||
var hashClassName = ".".concat(hashId);
|
||
var hashSelector = hashPriority === 'low' ? ":where(".concat(hashClassName, ")") : hashClassName;
|
||
|
||
// 注入 hashId
|
||
var keys = key.split(',').map(function (k) {
|
||
var _firstPath$match;
|
||
var fullPath = k.trim().split(/\s+/);
|
||
|
||
// 如果 Selector 第一个是 HTML Element，那我们就插到它的后面。反之，就插到最前面。
|
||
var firstPath = fullPath[0] || '';
|
||
var htmlElement = ((_firstPath$match = firstPath.match(/^\w+/)) === null || _firstPath$match === void 0 ? void 0 : _firstPath$match[0]) || '';
|
||
firstPath = "".concat(htmlElement).concat(hashSelector).concat(firstPath.slice(htmlElement.length));
|
||
return [firstPath].concat((0, _toConsumableArray2.default)(fullPath.slice(1))).join(' ');
|
||
});
|
||
return keys.join(',');
|
||
}
|
||
// Parse CSSObject to style content
|
||
var parseStyle = exports.parseStyle = function parseStyle(interpolation) {
|
||
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||
var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
|
||
root: true,
|
||
parentSelectors: []
|
||
},
|
||
root = _ref.root,
|
||
injectHash = _ref.injectHash,
|
||
parentSelectors = _ref.parentSelectors;
|
||
var hashId = config.hashId,
|
||
layer = config.layer,
|
||
path = config.path,
|
||
hashPriority = config.hashPriority,
|
||
_config$transformers = config.transformers,
|
||
transformers = _config$transformers === void 0 ? [] : _config$transformers,
|
||
_config$linters = config.linters,
|
||
linters = _config$linters === void 0 ? [] : _config$linters;
|
||
var styleStr = '';
|
||
var effectStyle = {};
|
||
function parseKeyframes(keyframes) {
|
||
var animationName = keyframes.getName(hashId);
|
||
if (!effectStyle[animationName]) {
|
||
var _parseStyle = parseStyle(keyframes.style, config, {
|
||
root: false,
|
||
parentSelectors: parentSelectors
|
||
}),
|
||
_parseStyle2 = (0, _slicedToArray2.default)(_parseStyle, 1),
|
||
_parsedStr = _parseStyle2[0];
|
||
effectStyle[animationName] = "@keyframes ".concat(keyframes.getName(hashId)).concat(_parsedStr);
|
||
}
|
||
}
|
||
function flattenList(list) {
|
||
var fullList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
||
list.forEach(function (item) {
|
||
if (Array.isArray(item)) {
|
||
flattenList(item, fullList);
|
||
} else if (item) {
|
||
fullList.push(item);
|
||
}
|
||
});
|
||
return fullList;
|
||
}
|
||
var flattenStyleList = flattenList(Array.isArray(interpolation) ? interpolation : [interpolation]);
|
||
flattenStyleList.forEach(function (originStyle) {
|
||
// Only root level can use raw string
|
||
var style = typeof originStyle === 'string' && !root ? {} : originStyle;
|
||
if (typeof style === 'string') {
|
||
styleStr += "".concat(style, "\n");
|
||
} else if (style._keyframe) {
|
||
// Keyframe
|
||
parseKeyframes(style);
|
||
} else {
|
||
var mergedStyle = transformers.reduce(function (prev, trans) {
|
||
var _trans$visit;
|
||
return (trans === null || trans === void 0 || (_trans$visit = trans.visit) === null || _trans$visit === void 0 ? void 0 : _trans$visit.call(trans, prev)) || prev;
|
||
}, style);
|
||
|
||
// Normal CSSObject
|
||
Object.keys(mergedStyle).forEach(function (key) {
|
||
var value = mergedStyle[key];
|
||
if ((0, _typeof2.default)(value) === 'object' && value && (key !== 'animationName' || !value._keyframe) && !isCompoundCSSProperty(value)) {
|
||
var subInjectHash = false;
|
||
|
||
// 当成嵌套对象来处理
|
||
var mergedKey = key.trim();
|
||
// Whether treat child as root. In most case it is false.
|
||
var nextRoot = false;
|
||
|
||
// 拆分多个选择器
|
||
if ((root || injectHash) && hashId) {
|
||
if (mergedKey.startsWith('@')) {
|
||
// 略过媒体查询，交给子节点继续插入 hashId
|
||
subInjectHash = true;
|
||
} else if (mergedKey === '&') {
|
||
// 抹掉 root selector 上的单个 &
|
||
mergedKey = injectSelectorHash('', hashId, hashPriority);
|
||
} else {
|
||
// 注入 hashId
|
||
mergedKey = injectSelectorHash(key, hashId, hashPriority);
|
||
}
|
||
} else if (root && !hashId && (mergedKey === '&' || mergedKey === '')) {
|
||
// In case of `{ '&': { a: { color: 'red' } } }` or `{ '': { a: { color: 'red' } } }` without hashId,
|
||
// we will get `&{a:{color:red;}}` or `{a:{color:red;}}` string for stylis to compile.
|
||
// But it does not conform to stylis syntax,
|
||
// and finally we will get `{color:red;}` as css, which is wrong.
|
||
// So we need to remove key in root, and treat child `{ a: { color: 'red' } }` as root.
|
||
mergedKey = '';
|
||
nextRoot = true;
|
||
}
|
||
var _parseStyle3 = parseStyle(value, config, {
|
||
root: nextRoot,
|
||
injectHash: subInjectHash,
|
||
parentSelectors: [].concat((0, _toConsumableArray2.default)(parentSelectors), [mergedKey])
|
||
}),
|
||
_parseStyle4 = (0, _slicedToArray2.default)(_parseStyle3, 2),
|
||
_parsedStr2 = _parseStyle4[0],
|
||
childEffectStyle = _parseStyle4[1];
|
||
effectStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, effectStyle), childEffectStyle);
|
||
styleStr += "".concat(mergedKey).concat(_parsedStr2);
|
||
} else {
|
||
var _value;
|
||
function appendStyle(cssKey, cssValue) {
|
||
if (process.env.NODE_ENV !== 'production' && ((0, _typeof2.default)(value) !== 'object' || !(value !== null && value !== void 0 && value[SKIP_CHECK]))) {
|
||
[_linters.contentQuotesLinter, _linters.hashedAnimationLinter].concat((0, _toConsumableArray2.default)(linters)).forEach(function (linter) {
|
||
return linter(cssKey, cssValue, {
|
||
path: path,
|
||
hashId: hashId,
|
||
parentSelectors: parentSelectors
|
||
});
|
||
});
|
||
}
|
||
|
||
// 如果是样式则直接插入
|
||
var styleName = cssKey.replace(/[A-Z]/g, function (match) {
|
||
return "-".concat(match.toLowerCase());
|
||
});
|
||
|
||
// Auto suffix with px
|
||
var formatValue = cssValue;
|
||
if (!_unitless.default[cssKey] && typeof formatValue === 'number' && formatValue !== 0) {
|
||
formatValue = "".concat(formatValue, "px");
|
||
}
|
||
|
||
// handle animationName & Keyframe value
|
||
if (cssKey === 'animationName' && cssValue !== null && cssValue !== void 0 && cssValue._keyframe) {
|
||
parseKeyframes(cssValue);
|
||
formatValue = cssValue.getName(hashId);
|
||
}
|
||
styleStr += "".concat(styleName, ":").concat(formatValue, ";");
|
||
}
|
||
var actualValue = (_value = value === null || value === void 0 ? void 0 : value.value) !== null && _value !== void 0 ? _value : value;
|
||
if ((0, _typeof2.default)(value) === 'object' && value !== null && value !== void 0 && value[MULTI_VALUE] && Array.isArray(actualValue)) {
|
||
actualValue.forEach(function (item) {
|
||
appendStyle(key, item);
|
||
});
|
||
} else {
|
||
appendStyle(key, actualValue);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
if (!root) {
|
||
styleStr = "{".concat(styleStr, "}");
|
||
} else if (layer) {
|
||
// fixme: https://github.com/thysultan/stylis/pull/339
|
||
if (styleStr) {
|
||
styleStr = "@layer ".concat(layer.name, " {").concat(styleStr, "}");
|
||
}
|
||
if (layer.dependencies) {
|
||
effectStyle["@layer ".concat(layer.name)] = layer.dependencies.map(function (deps) {
|
||
return "@layer ".concat(deps, ", ").concat(layer.name, ";");
|
||
}).join('\n');
|
||
}
|
||
}
|
||
return [styleStr, effectStyle];
|
||
};
|
||
|
||
// ============================================================================
|
||
// == Register ==
|
||
// ============================================================================
|
||
function uniqueHash(path, styleStr) {
|
||
return (0, _hash.default)("".concat(path.join('%')).concat(styleStr));
|
||
}
|
||
function Empty() {
|
||
return null;
|
||
}
|
||
var STYLE_PREFIX = exports.STYLE_PREFIX = 'style';
|
||
/**
|
||
* Register a style to the global style sheet.
|
||
*/
|
||
function useStyleRegister(info, styleFn) {
|
||
var token = info.token,
|
||
path = info.path,
|
||
hashId = info.hashId,
|
||
layer = info.layer,
|
||
nonce = info.nonce,
|
||
clientOnly = info.clientOnly,
|
||
_info$order = info.order,
|
||
order = _info$order === void 0 ? 0 : _info$order;
|
||
var _React$useContext = React.useContext(_StyleContext.default),
|
||
autoClear = _React$useContext.autoClear,
|
||
mock = _React$useContext.mock,
|
||
defaultCache = _React$useContext.defaultCache,
|
||
hashPriority = _React$useContext.hashPriority,
|
||
container = _React$useContext.container,
|
||
ssrInline = _React$useContext.ssrInline,
|
||
transformers = _React$useContext.transformers,
|
||
linters = _React$useContext.linters,
|
||
cache = _React$useContext.cache,
|
||
enableLayer = _React$useContext.layer;
|
||
var tokenKey = token._tokenKey;
|
||
var fullPath = [tokenKey];
|
||
if (enableLayer) {
|
||
fullPath.push('layer');
|
||
}
|
||
fullPath.push.apply(fullPath, (0, _toConsumableArray2.default)(path));
|
||
|
||
// Check if need insert style
|
||
var isMergedClientSide = _util.isClientSide;
|
||
if (process.env.NODE_ENV !== 'production' && mock !== undefined) {
|
||
isMergedClientSide = mock === 'client';
|
||
}
|
||
var _useGlobalCache = (0, _useGlobalCache3.default)(STYLE_PREFIX, fullPath,
|
||
// Create cache if needed
|
||
function () {
|
||
var cachePath = fullPath.join('|');
|
||
|
||
// Get style from SSR inline style directly
|
||
if ((0, _cacheMapUtil.existPath)(cachePath)) {
|
||
var _getStyleAndHash = (0, _cacheMapUtil.getStyleAndHash)(cachePath),
|
||
_getStyleAndHash2 = (0, _slicedToArray2.default)(_getStyleAndHash, 2),
|
||
inlineCacheStyleStr = _getStyleAndHash2[0],
|
||
styleHash = _getStyleAndHash2[1];
|
||
if (inlineCacheStyleStr) {
|
||
return [inlineCacheStyleStr, tokenKey, styleHash, {}, clientOnly, order];
|
||
}
|
||
}
|
||
|
||
// Generate style
|
||
var styleObj = styleFn();
|
||
var _parseStyle5 = parseStyle(styleObj, {
|
||
hashId: hashId,
|
||
hashPriority: hashPriority,
|
||
layer: enableLayer ? layer : undefined,
|
||
path: path.join('-'),
|
||
transformers: transformers,
|
||
linters: linters
|
||
}),
|
||
_parseStyle6 = (0, _slicedToArray2.default)(_parseStyle5, 2),
|
||
parsedStyle = _parseStyle6[0],
|
||
effectStyle = _parseStyle6[1];
|
||
var styleStr = normalizeStyle(parsedStyle);
|
||
var styleId = uniqueHash(fullPath, styleStr);
|
||
return [styleStr, tokenKey, styleId, effectStyle, clientOnly, order];
|
||
},
|
||
// Remove cache if no need
|
||
function (_ref2, fromHMR) {
|
||
var _ref3 = (0, _slicedToArray2.default)(_ref2, 3),
|
||
styleId = _ref3[2];
|
||
if ((fromHMR || autoClear) && _util.isClientSide) {
|
||
(0, _dynamicCSS.removeCSS)(styleId, {
|
||
mark: _StyleContext.ATTR_MARK,
|
||
attachTo: container
|
||
});
|
||
}
|
||
},
|
||
// Effect: Inject style here
|
||
function (_ref4) {
|
||
var _ref5 = (0, _slicedToArray2.default)(_ref4, 4),
|
||
styleStr = _ref5[0],
|
||
_ = _ref5[1],
|
||
styleId = _ref5[2],
|
||
effectStyle = _ref5[3];
|
||
if (isMergedClientSide && styleStr !== _cacheMapUtil.CSS_FILE_STYLE) {
|
||
var mergedCSSConfig = {
|
||
mark: _StyleContext.ATTR_MARK,
|
||
prepend: enableLayer ? false : 'queue',
|
||
attachTo: container,
|
||
priority: order
|
||
};
|
||
var nonceStr = typeof nonce === 'function' ? nonce() : nonce;
|
||
if (nonceStr) {
|
||
mergedCSSConfig.csp = {
|
||
nonce: nonceStr
|
||
};
|
||
}
|
||
|
||
// ================= Split Effect Style =================
|
||
// We will split effectStyle here since @layer should be at the top level
|
||
var effectLayerKeys = [];
|
||
var effectRestKeys = [];
|
||
Object.keys(effectStyle).forEach(function (key) {
|
||
if (key.startsWith('@layer')) {
|
||
effectLayerKeys.push(key);
|
||
} else {
|
||
effectRestKeys.push(key);
|
||
}
|
||
});
|
||
|
||
// ================= Inject Layer Style =================
|
||
// Inject layer style
|
||
effectLayerKeys.forEach(function (effectKey) {
|
||
(0, _dynamicCSS.updateCSS)(normalizeStyle(effectStyle[effectKey]), "_layer-".concat(effectKey), (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedCSSConfig), {}, {
|
||
prepend: true
|
||
}));
|
||
});
|
||
|
||
// ==================== Inject Style ====================
|
||
// Inject style
|
||
var style = (0, _dynamicCSS.updateCSS)(styleStr, styleId, mergedCSSConfig);
|
||
style[_StyleContext.CSS_IN_JS_INSTANCE] = cache.instanceId;
|
||
|
||
// Used for `useCacheToken` to remove on batch when token removed
|
||
style.setAttribute(_StyleContext.ATTR_TOKEN, tokenKey);
|
||
|
||
// Debug usage. Dev only
|
||
if (process.env.NODE_ENV !== 'production') {
|
||
style.setAttribute(_StyleContext.ATTR_CACHE_PATH, fullPath.join('|'));
|
||
}
|
||
|
||
// ================ Inject Effect Style =================
|
||
// Inject client side effect style
|
||
effectRestKeys.forEach(function (effectKey) {
|
||
(0, _dynamicCSS.updateCSS)(normalizeStyle(effectStyle[effectKey]), "_effect-".concat(effectKey), mergedCSSConfig);
|
||
});
|
||
}
|
||
}),
|
||
_useGlobalCache2 = (0, _slicedToArray2.default)(_useGlobalCache, 3),
|
||
cachedStyleStr = _useGlobalCache2[0],
|
||
cachedTokenKey = _useGlobalCache2[1],
|
||
cachedStyleId = _useGlobalCache2[2];
|
||
return function (node) {
|
||
var styleNode;
|
||
if (!ssrInline || isMergedClientSide || !defaultCache) {
|
||
styleNode = /*#__PURE__*/React.createElement(Empty, null);
|
||
} else {
|
||
styleNode = /*#__PURE__*/React.createElement("style", (0, _extends2.default)({}, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _StyleContext.ATTR_TOKEN, cachedTokenKey), _StyleContext.ATTR_MARK, cachedStyleId), {
|
||
dangerouslySetInnerHTML: {
|
||
__html: cachedStyleStr
|
||
}
|
||
}));
|
||
}
|
||
return /*#__PURE__*/React.createElement(React.Fragment, null, styleNode, node);
|
||
};
|
||
}
|
||
var extract = exports.extract = function extract(cache, effectStyles, options) {
|
||
var _cache = (0, _slicedToArray2.default)(cache, 6),
|
||
styleStr = _cache[0],
|
||
tokenKey = _cache[1],
|
||
styleId = _cache[2],
|
||
effectStyle = _cache[3],
|
||
clientOnly = _cache[4],
|
||
order = _cache[5];
|
||
var _ref7 = options || {},
|
||
plain = _ref7.plain;
|
||
|
||
// Skip client only style
|
||
if (clientOnly) {
|
||
return null;
|
||
}
|
||
var keyStyleText = styleStr;
|
||
|
||
// ====================== Share ======================
|
||
// Used for rc-util
|
||
var sharedAttrs = {
|
||
'data-rc-order': 'prependQueue',
|
||
'data-rc-priority': "".concat(order)
|
||
};
|
||
|
||
// ====================== Style ======================
|
||
keyStyleText = (0, _util.toStyleStr)(styleStr, tokenKey, styleId, sharedAttrs, plain);
|
||
|
||
// =============== Create effect style ===============
|
||
if (effectStyle) {
|
||
Object.keys(effectStyle).forEach(function (effectKey) {
|
||
// Effect style can be reused
|
||
if (!effectStyles[effectKey]) {
|
||
effectStyles[effectKey] = true;
|
||
var effectStyleStr = normalizeStyle(effectStyle[effectKey]);
|
||
var effectStyleHTML = (0, _util.toStyleStr)(effectStyleStr, tokenKey, "_effect-".concat(effectKey), sharedAttrs, plain);
|
||
if (effectKey.startsWith('@layer')) {
|
||
keyStyleText = effectStyleHTML + keyStyleText;
|
||
} else {
|
||
keyStyleText += effectStyleHTML;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
return [order, styleId, keyStyleText];
|
||
}; |