Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@ant-design/cssinjs
Advanced tools
@ant-design/cssinjs - npm Package Compare versions
Comparing version 1.2.0 to 1.3.0
@@ -1,3 +0,3 @@ | ||
| export type KeyType = string | number; | ||
| type ValueType = [number, any]; | ||
| export declare type KeyType = string | number; | ||
| declare type ValueType = [number, any]; | ||
| declare class Entity { | ||
@@ -4,0 +4,0 @@ /** @private Internal cache map. Do not access this directly */ |
| import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck"; | ||
| import _createClass from "@babel/runtime/helpers/esm/createClass"; | ||
| import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; | ||
| // [times, realValue] | ||
| var Entity = /*#__PURE__*/function () { | ||
| function Entity() { | ||
| _classCallCheck(this, Entity); | ||
| this.cache = new Map(); | ||
| _defineProperty(this, "cache", new Map()); | ||
| } | ||
| _createClass(Entity, [{ | ||
@@ -19,2 +24,3 @@ key: "get", | ||
| var nextValue = valueFn(prevValue); | ||
| if (nextValue === null) { | ||
@@ -27,4 +33,6 @@ this.cache.delete(path); | ||
| }]); | ||
| return Entity; | ||
| }(); | ||
| export default Entity; |
@@ -5,13 +5,15 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; | ||
| import hash from '@emotion/hash'; | ||
| import { ATTR_TOKEN, CSS_IN_JS_INSTANCE, CSS_IN_JS_INSTANCE_ID } from '../StyleContext'; | ||
| import useGlobalCache from './useGlobalCache'; | ||
| import { flattenToken, token2key } from '../util'; | ||
| var EMPTY_OVERRIDE = {}; | ||
| // Generate different prefix to make user selector break in production env. | ||
| import { ATTR_TOKEN, CSS_IN_JS_INSTANCE, CSS_IN_JS_INSTANCE_ID } from "../StyleContext"; | ||
| import useGlobalCache from "./useGlobalCache"; | ||
| import { flattenToken, token2key } from "../util"; | ||
| var EMPTY_OVERRIDE = {}; // Generate different prefix to make user selector break in production env. | ||
| // This helps developer not to do style override directly on the hash id. | ||
| var hashPrefix = process.env.NODE_ENV !== 'production' ? 'css-dev-only-do-not-override' : 'css'; | ||
| var tokenKeys = new Map(); | ||
| function recordCleanToken(tokenKey) { | ||
| tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) + 1); | ||
| } | ||
| function removeStyleTags(key) { | ||
@@ -23,2 +25,3 @@ if (typeof document !== 'undefined') { | ||
| var _style$parentNode; | ||
| (_style$parentNode = style.parentNode) === null || _style$parentNode === void 0 ? void 0 : _style$parentNode.removeChild(style); | ||
@@ -28,4 +31,5 @@ } | ||
| } | ||
| } | ||
| // Remove will check current keys first | ||
| } // Remove will check current keys first | ||
| function cleanTokenStyle(tokenKey) { | ||
@@ -38,2 +42,3 @@ tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) - 1); | ||
| }); | ||
| if (cleanableKeyList.length < tokenKeyList.length) { | ||
@@ -53,10 +58,12 @@ cleanableKeyList.forEach(function (key) { | ||
| */ | ||
| export default function useCacheToken(theme, tokens) { | ||
| var option = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; | ||
| var _option$salt = option.salt, | ||
| salt = _option$salt === void 0 ? '' : _option$salt, | ||
| _option$override = option.override, | ||
| override = _option$override === void 0 ? EMPTY_OVERRIDE : _option$override, | ||
| formatToken = option.formatToken; | ||
| // Basic - We do basic cache here | ||
| salt = _option$salt === void 0 ? '' : _option$salt, | ||
| _option$override = option.override, | ||
| override = _option$override === void 0 ? EMPTY_OVERRIDE : _option$override, | ||
| formatToken = option.formatToken; // Basic - We do basic cache here | ||
| var mergedToken = React.useMemo(function () { | ||
@@ -72,10 +79,12 @@ return Object.assign.apply(Object, [{}].concat(_toConsumableArray(tokens))); | ||
| var cachedToken = useGlobalCache('token', [salt, theme.id, tokenStr, overrideTokenStr], function () { | ||
| var derivativeToken = theme.getDerivativeToken(mergedToken); | ||
| // Merge with override | ||
| var mergedDerivativeToken = _objectSpread(_objectSpread({}, derivativeToken), override); | ||
| // Format if needed | ||
| var derivativeToken = theme.getDerivativeToken(mergedToken); // Merge with override | ||
| var mergedDerivativeToken = _objectSpread(_objectSpread({}, derivativeToken), override); // Format if needed | ||
| if (formatToken) { | ||
| mergedDerivativeToken = formatToken(mergedDerivativeToken); | ||
| } | ||
| // Optimize for `useStyleRegister` performance | ||
| } // Optimize for `useStyleRegister` performance | ||
| var tokenKey = token2key(mergedDerivativeToken, salt); | ||
@@ -86,2 +95,3 @@ mergedDerivativeToken._tokenKey = tokenKey; | ||
| mergedDerivativeToken._hashId = hashId; // Not used | ||
| return [mergedDerivativeToken, hashId]; | ||
@@ -88,0 +98,0 @@ }, function (cache) { |
| import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray"; | ||
| import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray"; | ||
| import * as React from 'react'; | ||
| import StyleContext from '../StyleContext'; | ||
| import useHMR from './useHMR'; | ||
| import StyleContext from "../StyleContext"; | ||
| import useHMR from "./useHMR"; | ||
| export default function useClientCache(prefix, keyPath, cacheFn, onCacheRemove) { | ||
| var _React$useContext = React.useContext(StyleContext), | ||
| globalCache = _React$useContext.cache; | ||
| globalCache = _React$useContext.cache; | ||
| var fullPath = [prefix].concat(_toConsumableArray(keyPath)); | ||
| var HMRUpdate = useHMR(); | ||
| // Create cache | ||
| var HMRUpdate = useHMR(); // Create cache | ||
| React.useMemo(function () { | ||
| globalCache.update(fullPath, function (prevCache) { | ||
| var _ref = prevCache || [], | ||
| _ref2 = _slicedToArray(_ref, 2), | ||
| _ref2$ = _ref2[0], | ||
| times = _ref2$ === void 0 ? 0 : _ref2$, | ||
| cache = _ref2[1]; | ||
| // HMR should always ignore cache since developer may change it | ||
| _ref2 = _slicedToArray(_ref, 2), | ||
| _ref2$ = _ref2[0], | ||
| times = _ref2$ === void 0 ? 0 : _ref2$, | ||
| cache = _ref2[1]; // HMR should always ignore cache since developer may change it | ||
| var tmpCache = cache; | ||
| if (process.env.NODE_ENV !== 'production' && cache && HMRUpdate) { | ||
@@ -25,8 +28,12 @@ onCacheRemove === null || onCacheRemove === void 0 ? void 0 : onCacheRemove(tmpCache, HMRUpdate); | ||
| } | ||
| var mergedCache = tmpCache || cacheFn(); | ||
| return [times + 1, mergedCache]; | ||
| }); | ||
| }, /* eslint-disable react-hooks/exhaustive-deps */ | ||
| [fullPath.join('_')]); | ||
| // Remove if no need anymore | ||
| }, | ||
| /* eslint-disable react-hooks/exhaustive-deps */ | ||
| [fullPath.join('_')] | ||
| /* eslint-enable */ | ||
| ); // Remove if no need anymore | ||
| React.useEffect(function () { | ||
@@ -36,7 +43,9 @@ return function () { | ||
| var _ref3 = prevCache || [], | ||
| _ref4 = _slicedToArray(_ref3, 2), | ||
| _ref4$ = _ref4[0], | ||
| times = _ref4$ === void 0 ? 0 : _ref4$, | ||
| cache = _ref4[1]; | ||
| _ref4 = _slicedToArray(_ref3, 2), | ||
| _ref4$ = _ref4[0], | ||
| times = _ref4$ === void 0 ? 0 : _ref4$, | ||
| cache = _ref4[1]; | ||
| var nextCount = times - 1; | ||
| if (nextCount === 0) { | ||
@@ -46,2 +55,3 @@ onCacheRemove === null || onCacheRemove === void 0 ? void 0 : onCacheRemove(cache, false); | ||
| } | ||
| return [times - 1, cache]; | ||
@@ -48,0 +58,0 @@ }); |
| function useProdHMR() { | ||
| return false; | ||
| } | ||
| var webpackHMR = false; | ||
| function useDevHMR() { | ||
| return webpackHMR; | ||
| } | ||
| export default process.env.NODE_ENV === 'production' ? useProdHMR : useDevHMR; | ||
| // Webpack `module.hot.accept` do not support any deps update trigger | ||
| export default process.env.NODE_ENV === 'production' ? useProdHMR : useDevHMR; // Webpack `module.hot.accept` do not support any deps update trigger | ||
| // We have to hack handler to force mark as HRM | ||
| if (process.env.NODE_ENV !== 'production' && typeof module !== 'undefined' && module && module.hot) { | ||
| var win = window; | ||
| if (typeof win.webpackHotUpdate === 'function') { | ||
| var originWebpackHotUpdate = win.webpackHotUpdate; | ||
| win.webpackHotUpdate = function () { | ||
@@ -16,0 +21,0 @@ webpackHMR = true; |
@@ -5,9 +5,9 @@ import * as React from 'react'; | ||
| import type Cache from '../Cache'; | ||
| import type { Theme } from '..'; | ||
| import type { Theme, Transformer } from '..'; | ||
| import type Keyframes from '../Keyframes'; | ||
| declare const SKIP_CHECK = "_skip_check_"; | ||
| export type CSSProperties = Omit<CSS.PropertiesFallback<number | string>, 'animationName'> & { | ||
| export declare type CSSProperties = Omit<CSS.PropertiesFallback<number | string>, 'animationName'> & { | ||
| animationName?: CSS.PropertiesFallback<number | string>['animationName'] | Keyframes; | ||
| }; | ||
| export type CSSPropertiesWithMultiValues = { | ||
| export declare type CSSPropertiesWithMultiValues = { | ||
| [K in keyof CSSProperties]: CSSProperties[K] | Extract<CSSProperties[K], string>[] | { | ||
@@ -18,9 +18,9 @@ [SKIP_CHECK]: boolean; | ||
| }; | ||
| export type CSSPseudos = { | ||
| export declare type CSSPseudos = { | ||
| [K in CSS.Pseudos]?: CSSObject; | ||
| }; | ||
| type ArrayCSSInterpolation = CSSInterpolation[]; | ||
| export type InterpolationPrimitive = null | undefined | boolean | number | string | CSSObject; | ||
| export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation | Keyframes; | ||
| export type CSSOthersObject = Record<string, CSSInterpolation>; | ||
| declare type ArrayCSSInterpolation = CSSInterpolation[]; | ||
| export declare type InterpolationPrimitive = null | undefined | boolean | number | string | CSSObject; | ||
| export declare type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation | Keyframes; | ||
| export declare type CSSOthersObject = Record<string, CSSInterpolation>; | ||
| export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject { | ||
@@ -35,2 +35,3 @@ } | ||
| path?: string; | ||
| transformers?: Transformer[]; | ||
| } | ||
@@ -37,0 +38,0 @@ export interface ParseInfo { |
@@ -0,1 +1,2 @@ | ||
| import _extends from "@babel/runtime/helpers/esm/extends"; | ||
| import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; | ||
@@ -9,9 +10,9 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; | ||
| import canUseDom from "rc-util/es/Dom/canUseDom"; | ||
| import hash from '@emotion/hash'; | ||
| // @ts-ignore | ||
| import hash from '@emotion/hash'; // @ts-ignore | ||
| import unitless from '@emotion/unitless'; | ||
| import { compile, serialize, stringify } from 'stylis'; | ||
| import useGlobalCache from './useGlobalCache'; | ||
| import StyleContext, { ATTR_MARK, ATTR_TOKEN, ATTR_DEV_CACHE_PATH, CSS_IN_JS_INSTANCE, CSS_IN_JS_INSTANCE_ID } from '../StyleContext'; | ||
| import { styleValidate, supportLayer } from '../util'; | ||
| import useGlobalCache from "./useGlobalCache"; | ||
| import StyleContext, { ATTR_MARK, ATTR_TOKEN, ATTR_DEV_CACHE_PATH, CSS_IN_JS_INSTANCE, CSS_IN_JS_INSTANCE_ID } from "../StyleContext"; | ||
| import { styleValidate, supportLayer } from "../util"; | ||
| var isClientSide = canUseDom(); | ||
@@ -27,7 +28,9 @@ var SKIP_CHECK = '_skip_check_'; | ||
| } | ||
| function isCompoundCSSProperty(value) { | ||
| return _typeof(value) === 'object' && value && SKIP_CHECK in value; | ||
| } | ||
| export var animationStatistics = {}; | ||
| // 注入 hash 值 | ||
| export var animationStatistics = {}; // 注入 hash 值 | ||
| function injectSelectorHash(key, hashId, hashPriority) { | ||
@@ -37,9 +40,11 @@ if (!hashId) { | ||
| } | ||
| var hashClassName = ".".concat(hashId); | ||
| var hashSelector = hashPriority === 'low' ? ":where(".concat(hashClassName, ")") : hashClassName; | ||
| // 注入 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 fullPath = k.trim().split(/\s+/); // 如果 Selector 第一个是 HTML Element，那我们就插到它的后面。反之，就插到最前面。 | ||
| var firstPath = fullPath[0] || ''; | ||
@@ -52,2 +57,3 @@ var htmlElement = ((_firstPath$match = firstPath.match(/^\w+/)) === null || _firstPath$match === void 0 ? void 0 : _firstPath$match[0]) || ''; | ||
| } | ||
| // Global effect style will mount once and not removed | ||
@@ -59,30 +65,39 @@ // The effect will not save in SSR cache (e.g. keyframes) | ||
| */ | ||
| export var _cf = process.env.NODE_ENV !== 'production' ? function () { | ||
| return globalEffectStyleKeys.clear(); | ||
| } : undefined; | ||
| // Parse CSSObject to style content | ||
| } : undefined; // Parse CSSObject to style content | ||
| export var 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 | ||
| }, | ||
| root = _ref.root, | ||
| injectHash = _ref.injectHash; | ||
| root: true | ||
| }, | ||
| root = _ref.root, | ||
| injectHash = _ref.injectHash; | ||
| var hashId = config.hashId, | ||
| layer = config.layer, | ||
| path = config.path, | ||
| hashPriority = config.hashPriority; | ||
| layer = config.layer, | ||
| path = config.path, | ||
| hashPriority = config.hashPriority, | ||
| _config$transformers = config.transformers, | ||
| transformers = _config$transformers === void 0 ? [] : _config$transformers; | ||
| var styleStr = ''; | ||
| var effectStyle = {}; | ||
| function parseKeyframes(keyframes) { | ||
| var animationName = keyframes.getName(hashId); | ||
| if (!effectStyle[animationName]) { | ||
| var _parseStyle = parseStyle(keyframes.style, config, { | ||
| root: false | ||
| }), | ||
| _parseStyle2 = _slicedToArray(_parseStyle, 1), | ||
| parsedStr = _parseStyle2[0]; | ||
| effectStyle[animationName] = "@keyframes ".concat(keyframes.getName(hashId)).concat(parsedStr); | ||
| root: false | ||
| }), | ||
| _parseStyle2 = _slicedToArray(_parseStyle, 1), | ||
| _parsedStr = _parseStyle2[0]; | ||
| effectStyle[animationName] = "@keyframes ".concat(keyframes.getName(hashId)).concat(_parsedStr); | ||
| } | ||
| } | ||
| function flattenList(list) { | ||
@@ -99,2 +114,3 @@ var fullList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; | ||
| } | ||
| var flattenStyleList = flattenList(Array.isArray(interpolation) ? interpolation : [interpolation]); | ||
@@ -104,2 +120,3 @@ flattenStyleList.forEach(function (originStyle) { | ||
| var style = typeof originStyle === 'string' && !root ? {} : originStyle; | ||
| if (typeof style === 'string') { | ||
@@ -111,12 +128,18 @@ styleStr += "".concat(style, "\n"); | ||
| } else { | ||
| // Normal CSSObject | ||
| Object.keys(style).forEach(function (key) { | ||
| var value = style[key]; | ||
| var mergedStyle = transformers.reduce(function (prev, trans) { | ||
| var _trans$visit; | ||
| return (trans === null || trans === void 0 ? 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 (_typeof(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; | ||
| // 拆分多个选择器 | ||
| 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) { | ||
@@ -139,17 +162,21 @@ if (mergedKey.startsWith('@')) { | ||
| } | ||
| var _parseStyle3 = parseStyle(value, _objectSpread(_objectSpread({}, config), {}, { | ||
| path: "".concat(path, " -> ").concat(mergedKey) | ||
| }), { | ||
| root: nextRoot, | ||
| injectHash: subInjectHash | ||
| }), | ||
| _parseStyle4 = _slicedToArray(_parseStyle3, 2), | ||
| parsedStr = _parseStyle4[0], | ||
| childEffectStyle = _parseStyle4[1]; | ||
| path: "".concat(path, " -> ").concat(mergedKey) | ||
| }), { | ||
| root: nextRoot, | ||
| injectHash: subInjectHash | ||
| }), | ||
| _parseStyle4 = _slicedToArray(_parseStyle3, 2), | ||
| _parsedStr2 = _parseStyle4[0], | ||
| childEffectStyle = _parseStyle4[1]; | ||
| effectStyle = _objectSpread(_objectSpread({}, effectStyle), childEffectStyle); | ||
| styleStr += "".concat(mergedKey).concat(parsedStr); | ||
| styleStr += "".concat(mergedKey).concat(_parsedStr2); | ||
| } else { | ||
| var _value$value; | ||
| var actualValue = (_value$value = value === null || value === void 0 ? void 0 : value.value) !== null && _value$value !== void 0 ? _value$value : value; | ||
| if (process.env.NODE_ENV !== 'production' && (_typeof(value) !== 'object' || !(value === null || value === void 0 ? void 0 : value[SKIP_CHECK]))) { | ||
| var _value; | ||
| var actualValue = (_value = value === null || value === void 0 ? void 0 : value.value) !== null && _value !== void 0 ? _value : value; | ||
| if (process.env.NODE_ENV !== 'production' && (_typeof(value) !== 'object' || !(value !== null && value !== void 0 && value[SKIP_CHECK]))) { | ||
| styleValidate(key, actualValue, { | ||
@@ -159,17 +186,21 @@ path: path, | ||
| }); | ||
| } | ||
| // 如果是样式则直接插入 | ||
| } // 如果是样式则直接插入 | ||
| var styleName = key.replace(/[A-Z]/g, function (match) { | ||
| return "-".concat(match.toLowerCase()); | ||
| }); | ||
| // Auto suffix with px | ||
| }); // Auto suffix with px | ||
| var formatValue = actualValue; | ||
| if (!unitless[key] && typeof formatValue === 'number' && formatValue !== 0) { | ||
| formatValue = "".concat(formatValue, "px"); | ||
| } | ||
| // handle animationName & Keyframe value | ||
| if (key === 'animationName' && (value === null || value === void 0 ? void 0 : value._keyframe)) { | ||
| } // handle animationName & Keyframe value | ||
| if (key === 'animationName' && value !== null && value !== void 0 && value._keyframe) { | ||
| parseKeyframes(value); | ||
| formatValue = value.getName(hashId); | ||
| } | ||
| styleStr += "".concat(styleName, ":").concat(formatValue, ";"); | ||
@@ -180,2 +211,3 @@ } | ||
| }); | ||
| if (!root) { | ||
@@ -186,4 +218,4 @@ styleStr = "{".concat(styleStr, "}"); | ||
| var layerName = layerCells[layerCells.length - 1].trim(); | ||
| styleStr = "@layer ".concat(layerName, " {").concat(styleStr, "}"); | ||
| // Order of layer if needed | ||
| styleStr = "@layer ".concat(layerName, " {").concat(styleStr, "}"); // Order of layer if needed | ||
| if (layerCells.length > 1) { | ||
@@ -194,10 +226,12 @@ // zombieJ: stylis do not support layer order, so we need to handle it manually. | ||
| } | ||
| return [styleStr, effectStyle]; | ||
| }; | ||
| // ============================================================================ | ||
| }; // ============================================================================ | ||
| // == Register == | ||
| // ============================================================================ | ||
| function uniqueHash(path, styleStr) { | ||
| return hash("".concat(path.join('%')).concat(styleStr)); | ||
| } | ||
| function Empty() { | ||
@@ -209,87 +243,102 @@ return null; | ||
| */ | ||
| export default function useStyleRegister(info, styleFn) { | ||
| var token = info.token, | ||
| path = info.path, | ||
| hashId = info.hashId, | ||
| layer = info.layer; | ||
| path = info.path, | ||
| hashId = info.hashId, | ||
| layer = info.layer; | ||
| var _React$useContext = React.useContext(StyleContext), | ||
| autoClear = _React$useContext.autoClear, | ||
| mock = _React$useContext.mock, | ||
| defaultCache = _React$useContext.defaultCache, | ||
| hashPriority = _React$useContext.hashPriority, | ||
| container = _React$useContext.container, | ||
| ssrInline = _React$useContext.ssrInline; | ||
| 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; | ||
| var tokenKey = token._tokenKey; | ||
| var fullPath = [tokenKey].concat(_toConsumableArray(path)); | ||
| // Check if need insert style | ||
| var fullPath = [tokenKey].concat(_toConsumableArray(path)); // Check if need insert style | ||
| var isMergedClientSide = isClientSide; | ||
| if (process.env.NODE_ENV !== 'production' && mock !== undefined) { | ||
| isMergedClientSide = mock === 'client'; | ||
| } | ||
| var _useGlobalCache = useGlobalCache('style', fullPath, | ||
| // Create cache if needed | ||
| function () { | ||
| var styleObj = styleFn(); | ||
| var _parseStyle5 = parseStyle(styleObj, { | ||
| hashId: hashId, | ||
| hashPriority: hashPriority, | ||
| layer: layer, | ||
| path: path.join('-') | ||
| }), | ||
| var _useGlobalCache = useGlobalCache('style', fullPath, // Create cache if needed | ||
| function () { | ||
| var styleObj = styleFn(); | ||
| var _parseStyle5 = parseStyle(styleObj, { | ||
| hashId: hashId, | ||
| hashPriority: hashPriority, | ||
| layer: layer, | ||
| path: path.join('-'), | ||
| transformers: transformers | ||
| }), | ||
| _parseStyle6 = _slicedToArray(_parseStyle5, 2), | ||
| parsedStyle = _parseStyle6[0], | ||
| effectStyle = _parseStyle6[1]; | ||
| var styleStr = normalizeStyle(parsedStyle); | ||
| var styleId = uniqueHash(fullPath, styleStr); | ||
| // Clear animation statistics | ||
| animationStatistics = {}; | ||
| if (isMergedClientSide) { | ||
| var style = updateCSS(styleStr, styleId, { | ||
| mark: ATTR_MARK, | ||
| prepend: 'queue', | ||
| attachTo: container | ||
| }); | ||
| style[CSS_IN_JS_INSTANCE] = CSS_IN_JS_INSTANCE_ID; | ||
| // Used for `useCacheToken` to remove on batch when token removed | ||
| style.setAttribute(ATTR_TOKEN, tokenKey); | ||
| // Dev usage to find which cache path made this easily | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| style.setAttribute(ATTR_DEV_CACHE_PATH, fullPath.join('|')); | ||
| var styleStr = normalizeStyle(parsedStyle); | ||
| var styleId = uniqueHash(fullPath, styleStr); // Clear animation statistics | ||
| animationStatistics = {}; | ||
| if (isMergedClientSide) { | ||
| var style = updateCSS(styleStr, styleId, { | ||
| mark: ATTR_MARK, | ||
| prepend: 'queue', | ||
| attachTo: container | ||
| }); | ||
| style[CSS_IN_JS_INSTANCE] = CSS_IN_JS_INSTANCE_ID; // Used for `useCacheToken` to remove on batch when token removed | ||
| style.setAttribute(ATTR_TOKEN, tokenKey); // Dev usage to find which cache path made this easily | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| style.setAttribute(ATTR_DEV_CACHE_PATH, fullPath.join('|')); | ||
| } // Inject client side effect style | ||
| Object.keys(effectStyle).forEach(function (effectKey) { | ||
| if (!globalEffectStyleKeys.has(effectKey)) { | ||
| globalEffectStyleKeys.add(effectKey); // Inject | ||
| updateCSS(normalizeStyle(effectStyle[effectKey]), "_effect-".concat(effectKey), { | ||
| mark: ATTR_MARK, | ||
| prepend: 'queue', | ||
| attachTo: container | ||
| }); | ||
| } | ||
| // Inject client side effect style | ||
| Object.keys(effectStyle).forEach(function (effectKey) { | ||
| if (!globalEffectStyleKeys.has(effectKey)) { | ||
| globalEffectStyleKeys.add(effectKey); | ||
| // Inject | ||
| updateCSS(normalizeStyle(effectStyle[effectKey]), "_effect-".concat(effectKey), { | ||
| mark: ATTR_MARK, | ||
| prepend: 'queue', | ||
| attachTo: container | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| return [styleStr, tokenKey, styleId]; | ||
| }, | ||
| // Remove cache if no need | ||
| function (_ref2, fromHMR) { | ||
| var _ref3 = _slicedToArray(_ref2, 3), | ||
| }); | ||
| } | ||
| return [styleStr, tokenKey, styleId]; | ||
| }, // Remove cache if no need | ||
| function (_ref2, fromHMR) { | ||
| var _ref3 = _slicedToArray(_ref2, 3), | ||
| styleId = _ref3[2]; | ||
| if ((fromHMR || autoClear) && isClientSide) { | ||
| removeCSS(styleId, { | ||
| mark: ATTR_MARK | ||
| }); | ||
| } | ||
| }), | ||
| _useGlobalCache2 = _slicedToArray(_useGlobalCache, 3), | ||
| cachedStyleStr = _useGlobalCache2[0], | ||
| cachedTokenKey = _useGlobalCache2[1], | ||
| cachedStyleId = _useGlobalCache2[2]; | ||
| if ((fromHMR || autoClear) && isClientSide) { | ||
| removeCSS(styleId, { | ||
| mark: ATTR_MARK | ||
| }); | ||
| } | ||
| }), | ||
| _useGlobalCache2 = _slicedToArray(_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 { | ||
| var _objectSpread2; | ||
| styleNode = /*#__PURE__*/React.createElement("style", _objectSpread(_objectSpread({}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, ATTR_TOKEN, cachedTokenKey), _defineProperty(_objectSpread2, ATTR_MARK, cachedStyleId), _objectSpread2)), {}, { | ||
| var _ref4; | ||
| styleNode = /*#__PURE__*/React.createElement("style", _extends({}, (_ref4 = {}, _defineProperty(_ref4, ATTR_TOKEN, cachedTokenKey), _defineProperty(_ref4, ATTR_MARK, cachedStyleId), _ref4), { | ||
| dangerouslySetInnerHTML: { | ||
@@ -300,8 +349,9 @@ __html: cachedStyleStr | ||
| } | ||
| return /*#__PURE__*/React.createElement(React.Fragment, null, styleNode, node); | ||
| }; | ||
| } | ||
| // ============================================================================ | ||
| } // ============================================================================ | ||
| // == SSR == | ||
| // ============================================================================ | ||
| export function extractStyle(cache) { | ||
@@ -311,10 +361,11 @@ // prefix with `style` is used for `useStyleRegister` to cache style context | ||
| return key.startsWith('style%'); | ||
| }); | ||
| // const tokenStyles: Record<string, string[]> = {}; | ||
| }); // const tokenStyles: Record<string, string[]> = {}; | ||
| var styleText = ''; | ||
| styleKeys.forEach(function (key) { | ||
| var _cache$cache$get$ = _slicedToArray(cache.cache.get(key)[1], 3), | ||
| styleStr = _cache$cache$get$[0], | ||
| tokenKey = _cache$cache$get$[1], | ||
| styleId = _cache$cache$get$[2]; | ||
| var _ = _slicedToArray(cache.cache.get(key)[1], 3), | ||
| styleStr = _[0], | ||
| tokenKey = _[1], | ||
| styleId = _[2]; | ||
| styleText += "<style ".concat(ATTR_TOKEN, "=\"").concat(tokenKey, "\" ").concat(ATTR_MARK, "=\"").concat(styleId, "\">").concat(styleStr, "</style>"); | ||
@@ -321,0 +372,0 @@ }); |
@@ -8,3 +8,5 @@ import useStyleRegister, { extractStyle } from './hooks/useStyleRegister'; | ||
| import { createTheme, Theme } from './theme'; | ||
| export { Theme, createTheme, useStyleRegister, useCacheToken, createCache, StyleProvider, Keyframes, extractStyle, }; | ||
| export type { TokenType, CSSObject, CSSInterpolation, DerivativeFunc }; | ||
| import legacyLogicalPropertiesTransformer from './transformers/legacyLogicalProperties'; | ||
| import type { Transformer } from './transformers/interface'; | ||
| export { Theme, createTheme, useStyleRegister, useCacheToken, createCache, StyleProvider, Keyframes, extractStyle, legacyLogicalPropertiesTransformer, }; | ||
| export type { TokenType, CSSObject, CSSInterpolation, DerivativeFunc, Transformer, }; |
@@ -1,6 +0,8 @@ | ||
| import useStyleRegister, { extractStyle } from './hooks/useStyleRegister'; | ||
| import useCacheToken from './hooks/useCacheToken'; | ||
| import { StyleProvider, createCache } from './StyleContext'; | ||
| import Keyframes from './Keyframes'; | ||
| import { createTheme, Theme } from './theme'; | ||
| export { Theme, createTheme, useStyleRegister, useCacheToken, createCache, StyleProvider, Keyframes, extractStyle }; | ||
| import useStyleRegister, { extractStyle } from "./hooks/useStyleRegister"; | ||
| import useCacheToken from "./hooks/useCacheToken"; | ||
| import { StyleProvider, createCache } from "./StyleContext"; | ||
| import Keyframes from "./Keyframes"; | ||
| import { createTheme, Theme } from "./theme"; | ||
| import legacyLogicalPropertiesTransformer from "./transformers/legacyLogicalProperties"; | ||
| export { Theme, createTheme, useStyleRegister, useCacheToken, createCache, StyleProvider, Keyframes, extractStyle, // Transformer | ||
| legacyLogicalPropertiesTransformer }; |
| import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck"; | ||
| import _createClass from "@babel/runtime/helpers/esm/createClass"; | ||
| import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; | ||
| var Keyframe = /*#__PURE__*/function () { | ||
| function Keyframe(name, style) { | ||
| _classCallCheck(this, Keyframe); | ||
| this.name = void 0; | ||
| this.style = void 0; | ||
| this._keyframe = true; | ||
| _defineProperty(this, "name", void 0); | ||
| _defineProperty(this, "style", void 0); | ||
| _defineProperty(this, "_keyframe", true); | ||
| this.name = name; | ||
| this.style = style; | ||
| } | ||
| _createClass(Keyframe, [{ | ||
@@ -19,4 +26,6 @@ key: "getName", | ||
| }]); | ||
| return Keyframe; | ||
| }(); | ||
| export default Keyframe; |
| import * as React from 'react'; | ||
| import CacheEntity from './Cache'; | ||
| import type { Transformer } from './transformers/interface'; | ||
| export declare const ATTR_TOKEN = "data-token-hash"; | ||
@@ -9,3 +10,3 @@ export declare const ATTR_MARK = "data-css-hash"; | ||
| export declare function createCache(): CacheEntity; | ||
| export type HashPriority = 'low' | 'high'; | ||
| export declare type HashPriority = 'low' | 'high'; | ||
| export interface StyleContextProps { | ||
@@ -28,5 +29,7 @@ autoClear?: boolean; | ||
| ssrInline?: boolean; | ||
| /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */ | ||
| transformers?: Transformer[]; | ||
| } | ||
| declare const StyleContext: React.Context<StyleContextProps>; | ||
| export type StyleProviderProps = Partial<StyleContextProps> & { | ||
| export declare type StyleProviderProps = Partial<StyleContextProps> & { | ||
| children?: React.ReactNode; | ||
@@ -33,0 +36,0 @@ }; |
@@ -7,7 +7,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; | ||
| import shallowEqual from 'shallowequal'; | ||
| import CacheEntity from './Cache'; | ||
| import CacheEntity from "./Cache"; | ||
| export var ATTR_TOKEN = 'data-token-hash'; | ||
| export var ATTR_MARK = 'data-css-hash'; | ||
| export var ATTR_DEV_CACHE_PATH = 'data-dev-cache-path'; | ||
| // Mark css-in-js instance in style element | ||
| export var ATTR_DEV_CACHE_PATH = 'data-dev-cache-path'; // Mark css-in-js instance in style element | ||
| export var CSS_IN_JS_INSTANCE = '__cssinjs_instance__'; | ||
@@ -20,13 +20,15 @@ export var CSS_IN_JS_INSTANCE_ID = Math.random().toString(12).slice(2); | ||
| Array.from(styles).forEach(function (style) { | ||
| style[CSS_IN_JS_INSTANCE] = style[CSS_IN_JS_INSTANCE] || CSS_IN_JS_INSTANCE_ID; | ||
| // Not force move if no head | ||
| style[CSS_IN_JS_INSTANCE] = style[CSS_IN_JS_INSTANCE] || CSS_IN_JS_INSTANCE_ID; // Not force move if no head | ||
| document.head.insertBefore(style, firstChild); | ||
| }); | ||
| // Deduplicate of moved styles | ||
| }); // Deduplicate of moved styles | ||
| var styleHash = {}; | ||
| Array.from(document.querySelectorAll("style[".concat(ATTR_MARK, "]"))).forEach(function (style) { | ||
| var hash = style.getAttribute(ATTR_MARK); | ||
| if (styleHash[hash]) { | ||
| if (style[CSS_IN_JS_INSTANCE] === CSS_IN_JS_INSTANCE_ID) { | ||
| var _style$parentNode; | ||
| (_style$parentNode = style.parentNode) === null || _style$parentNode === void 0 ? void 0 : _style$parentNode.removeChild(style); | ||
@@ -39,2 +41,3 @@ } | ||
| } | ||
| return new CacheEntity(); | ||
@@ -49,8 +52,11 @@ } | ||
| var children = props.children, | ||
| restProps = _objectWithoutProperties(props, _excluded); | ||
| restProps = _objectWithoutProperties(props, _excluded); | ||
| var parentContext = React.useContext(StyleContext); | ||
| var context = useMemo(function () { | ||
| var mergedContext = _objectSpread({}, parentContext); | ||
| Object.keys(restProps).forEach(function (key) { | ||
| var value = restProps[key]; | ||
| if (restProps[key] !== undefined) { | ||
@@ -57,0 +63,0 @@ mergedContext[key] = value; |
@@ -1,3 +0,3 @@ | ||
| import ThemeCache from './ThemeCache'; | ||
| import Theme from './Theme'; | ||
| import ThemeCache from "./ThemeCache"; | ||
| import Theme from "./Theme"; | ||
| var cacheThemes = new ThemeCache(); | ||
@@ -7,10 +7,12 @@ /** | ||
| */ | ||
| export default function createTheme(derivatives) { | ||
| var derivativeArr = Array.isArray(derivatives) ? derivatives : [derivatives]; | ||
| // Create new theme if not exist | ||
| var derivativeArr = Array.isArray(derivatives) ? derivatives : [derivatives]; // Create new theme if not exist | ||
| if (!cacheThemes.has(derivativeArr)) { | ||
| cacheThemes.set(derivativeArr, new Theme(derivativeArr)); | ||
| } | ||
| // Get theme from cache and return | ||
| } // Get theme from cache and return | ||
| return cacheThemes.get(derivativeArr); | ||
| } |
@@ -1,3 +0,3 @@ | ||
| export { default as createTheme } from './createTheme'; | ||
| export { default as Theme } from './Theme'; | ||
| export { default as ThemeCache } from './ThemeCache'; | ||
| export { default as createTheme } from "./createTheme"; | ||
| export { default as Theme } from "./Theme"; | ||
| export { default as ThemeCache } from "./ThemeCache"; |
@@ -1,2 +0,2 @@ | ||
| export type TokenType = object; | ||
| export type DerivativeFunc<DesignToken extends TokenType, DerivativeToken extends TokenType> = (designToken: DesignToken, derivativeToken?: DerivativeToken) => DerivativeToken; | ||
| export declare type TokenType = object; | ||
| export declare type DerivativeFunc<DesignToken extends TokenType, DerivativeToken extends TokenType> = (designToken: DesignToken, derivativeToken?: DerivativeToken) => DerivativeToken; |
| import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck"; | ||
| import _createClass from "@babel/runtime/helpers/esm/createClass"; | ||
| import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; | ||
| import { warning } from "rc-util/es/warning"; | ||
@@ -9,14 +10,21 @@ var uuid = 0; | ||
| */ | ||
| var Theme = /*#__PURE__*/function () { | ||
| function Theme(derivatives) { | ||
| _classCallCheck(this, Theme); | ||
| this.derivatives = void 0; | ||
| this.id = void 0; | ||
| _defineProperty(this, "derivatives", void 0); | ||
| _defineProperty(this, "id", void 0); | ||
| this.derivatives = Array.isArray(derivatives) ? derivatives : [derivatives]; | ||
| this.id = uuid; | ||
| if (derivatives.length === 0) { | ||
| warning(derivatives.length > 0, '[Ant Design CSS-in-JS] Theme should have at least one derivative function.'); | ||
| } | ||
| uuid += 1; | ||
| } | ||
| _createClass(Theme, [{ | ||
@@ -30,4 +38,6 @@ key: "getDerivativeToken", | ||
| }]); | ||
| return Theme; | ||
| }(); | ||
| export { Theme as default }; |
| import type Theme from './Theme'; | ||
| import type { DerivativeFunc } from './interface'; | ||
| type DerivativeOptions = DerivativeFunc<any, any>[]; | ||
| declare type DerivativeOptions = DerivativeFunc<any, any>[]; | ||
| export declare function sameDerivativeOption(left: DerivativeOptions, right: DerivativeOptions): boolean; | ||
@@ -5,0 +5,0 @@ export default class ThemeCache { |
| import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray"; | ||
| import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck"; | ||
| import _createClass from "@babel/runtime/helpers/esm/createClass"; | ||
| import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; | ||
| // ================================== Cache ================================== | ||
| export function sameDerivativeOption(left, right) { | ||
@@ -8,2 +10,3 @@ if (left.length !== right.length) { | ||
| } | ||
| for (var i = 0; i < left.length; i++) { | ||
@@ -14,10 +17,16 @@ if (left[i] !== right[i]) { | ||
| } | ||
| return true; | ||
| } | ||
| var ThemeCache = /*#__PURE__*/function () { | ||
| function ThemeCache() { | ||
| _classCallCheck(this, ThemeCache); | ||
| this.cache = void 0; | ||
| this.keys = void 0; | ||
| this.cacheCallTimes = void 0; | ||
| _defineProperty(this, "cache", void 0); | ||
| _defineProperty(this, "keys", void 0); | ||
| _defineProperty(this, "cacheCallTimes", void 0); | ||
| this.cache = new Map(); | ||
@@ -27,2 +36,3 @@ this.keys = []; | ||
| } | ||
| _createClass(ThemeCache, [{ | ||
@@ -37,2 +47,3 @@ key: "size", | ||
| var _cache2, _cache3; | ||
| var updateCallTimes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
@@ -47,8 +58,11 @@ var cache = { | ||
| var _cache, _cache$map; | ||
| cache = (_cache = cache) === null || _cache === void 0 ? void 0 : (_cache$map = _cache.map) === null || _cache$map === void 0 ? void 0 : _cache$map.get(derivative); | ||
| } | ||
| }); | ||
| if (((_cache2 = cache) === null || _cache2 === void 0 ? void 0 : _cache2.value) && updateCallTimes) { | ||
| if ((_cache2 = cache) !== null && _cache2 !== void 0 && _cache2.value && updateCallTimes) { | ||
| cache.value[1] = this.cacheCallTimes++; | ||
| } | ||
| return (_cache3 = cache) === null || _cache3 === void 0 ? void 0 : _cache3.value; | ||
@@ -60,2 +74,3 @@ } | ||
| var _this$internalGet; | ||
| return (_this$internalGet = this.internalGet(derivativeOption, true)) === null || _this$internalGet === void 0 ? void 0 : _this$internalGet[0]; | ||
@@ -72,2 +87,3 @@ } | ||
| var _this = this; | ||
| // New cache | ||
@@ -77,15 +93,20 @@ if (!this.has(derivativeOption)) { | ||
| var _this$keys$reduce = this.keys.reduce(function (result, key) { | ||
| var _result = _slicedToArray(result, 2), | ||
| var _result = _slicedToArray(result, 2), | ||
| callTimes = _result[1]; | ||
| if (_this.internalGet(key)[1] < callTimes) { | ||
| return [key, _this.internalGet(key)[1]]; | ||
| } | ||
| return result; | ||
| }, [this.keys[0], this.cacheCallTimes]), | ||
| _this$keys$reduce2 = _slicedToArray(_this$keys$reduce, 1), | ||
| targetKey = _this$keys$reduce2[0]; | ||
| if (_this.internalGet(key)[1] < callTimes) { | ||
| return [key, _this.internalGet(key)[1]]; | ||
| } | ||
| return result; | ||
| }, [this.keys[0], this.cacheCallTimes]), | ||
| _this$keys$reduce2 = _slicedToArray(_this$keys$reduce, 1), | ||
| targetKey = _this$keys$reduce2[0]; | ||
| this.delete(targetKey); | ||
| } | ||
| this.keys.push(derivativeOption); | ||
| } | ||
| var cache = this.cache; | ||
@@ -99,2 +120,3 @@ derivativeOption.forEach(function (derivative, index) { | ||
| var cacheValue = cache.get(derivative); | ||
| if (!cacheValue) { | ||
@@ -107,2 +129,3 @@ cache.set(derivative, { | ||
| } | ||
| cache = cache.get(derivative).map; | ||
@@ -116,4 +139,6 @@ } | ||
| var cache = currentCache.get(derivatives[0]); | ||
| if (derivatives.length === 1) { | ||
| var _cache$value; | ||
| if (!cache.map) { | ||
@@ -126,8 +151,12 @@ currentCache.delete(derivatives[0]); | ||
| } | ||
| return (_cache$value = cache.value) === null || _cache$value === void 0 ? void 0 : _cache$value[0]; | ||
| } | ||
| var result = this.deleteByPath(cache.map, derivatives.slice(1)); | ||
| if ((!cache.map || cache.map.size === 0) && !cache.value) { | ||
| currentCache.delete(derivatives[0]); | ||
| } | ||
| return result; | ||
@@ -145,9 +174,14 @@ } | ||
| } | ||
| return undefined; | ||
| } | ||
| }]); | ||
| return ThemeCache; | ||
| }(); | ||
| ThemeCache.MAX_CACHE_SIZE = 20; | ||
| ThemeCache.MAX_CACHE_OFFSET = 5; | ||
| _defineProperty(ThemeCache, "MAX_CACHE_SIZE", 20); | ||
| _defineProperty(ThemeCache, "MAX_CACHE_OFFSET", 5); | ||
| export { ThemeCache as default }; |
@@ -11,2 +11,3 @@ import _typeof from "@babel/runtime/helpers/esm/typeof"; | ||
| str += key; | ||
| if (value && _typeof(value) === 'object') { | ||
@@ -23,2 +24,3 @@ str += flattenToken(value); | ||
| */ | ||
| export function token2key(token, slat) { | ||
@@ -33,3 +35,4 @@ return hash("".concat(slat, "_").concat(flattenToken(token))); | ||
| var path = info.path, | ||
| hashId = info.hashId; | ||
| hashId = info.hashId; | ||
| switch (key) { | ||
@@ -40,6 +43,9 @@ case 'content': | ||
| var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset']; | ||
| if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) { | ||
| warning("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"".concat(value, "\"'`"), path); | ||
| } | ||
| return; | ||
| case 'marginLeft': | ||
@@ -65,2 +71,3 @@ case 'marginRight': | ||
| return; | ||
| case 'margin': | ||
@@ -75,2 +82,3 @@ case 'padding': | ||
| }); | ||
| if (valueArr.length === 4 && valueArr[1] !== valueArr[3]) { | ||
@@ -80,3 +88,5 @@ warning("You seem to be using '".concat(key, "' property with different left ").concat(key, " and right ").concat(key, ", which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties."), path); | ||
| } | ||
| return; | ||
| case 'clear': | ||
@@ -87,3 +97,5 @@ case 'textAlign': | ||
| } | ||
| return; | ||
| case 'borderRadius': | ||
@@ -98,19 +110,24 @@ if (typeof value === 'string') { | ||
| } | ||
| var radiusArr = group.split(' ').map(function (item) { | ||
| return item.trim(); | ||
| }); | ||
| // borderRadius: '2px 4px' | ||
| }); // borderRadius: '2px 4px' | ||
| if (radiusArr.length >= 2 && radiusArr[0] !== radiusArr[1]) { | ||
| return true; | ||
| } | ||
| // borderRadius: '4px 4px 2px' | ||
| } // borderRadius: '4px 4px 2px' | ||
| if (radiusArr.length === 3 && radiusArr[1] !== radiusArr[2]) { | ||
| return true; | ||
| } | ||
| // borderRadius: '4px 4px 2px 4px' | ||
| } // borderRadius: '4px 4px 2px 4px' | ||
| if (radiusArr.length === 4 && radiusArr[2] !== radiusArr[3]) { | ||
| return true; | ||
| } | ||
| return result; | ||
| }, false); | ||
| if (invalid) { | ||
@@ -120,3 +137,5 @@ warning("You seem to be using non-logical value '".concat(value, "' of ").concat(key, ", which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties."), path); | ||
| } | ||
| return; | ||
| case 'animation': | ||
@@ -126,2 +145,3 @@ if (hashId && value !== 'none') { | ||
| } | ||
| default: | ||
@@ -133,23 +153,31 @@ return; | ||
| var layerWidth = '903px'; | ||
| function supportSelector(styleStr, handleElement) { | ||
| if (canUseDom()) { | ||
| var _ele$parentNode; | ||
| updateCSS(styleStr, layerKey); | ||
| var ele = document.createElement('div'); | ||
| ele.style.position = 'fixed'; | ||
| ele.style.left = '0'; | ||
| ele.style.top = '0'; | ||
| handleElement === null || handleElement === void 0 ? void 0 : handleElement(ele); | ||
| document.body.appendChild(ele); | ||
| var _ele = document.createElement('div'); | ||
| _ele.style.position = 'fixed'; | ||
| _ele.style.left = '0'; | ||
| _ele.style.top = '0'; | ||
| handleElement === null || handleElement === void 0 ? void 0 : handleElement(_ele); | ||
| document.body.appendChild(_ele); | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| ele.innerHTML = 'Test'; | ||
| ele.style.zIndex = '9999999'; | ||
| _ele.innerHTML = 'Test'; | ||
| _ele.style.zIndex = '9999999'; | ||
| } | ||
| var support = getComputedStyle(ele).width === layerWidth; | ||
| (_ele$parentNode = ele.parentNode) === null || _ele$parentNode === void 0 ? void 0 : _ele$parentNode.removeChild(ele); | ||
| var support = getComputedStyle(_ele).width === layerWidth; | ||
| (_ele$parentNode = _ele.parentNode) === null || _ele$parentNode === void 0 ? void 0 : _ele$parentNode.removeChild(_ele); | ||
| removeCSS(layerKey); | ||
| return support; | ||
| } | ||
| return false; | ||
| } | ||
| var canLayer = undefined; | ||
@@ -162,3 +190,4 @@ export function supportLayer() { | ||
| } | ||
| return canLayer; | ||
| } |
@@ -1,3 +0,3 @@ | ||
| export type KeyType = string | number; | ||
| type ValueType = [number, any]; | ||
| export declare type KeyType = string | number; | ||
| declare type ValueType = [number, any]; | ||
| declare class Entity { | ||
@@ -4,0 +4,0 @@ /** @private Internal cache map. Do not access this directly */ |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -8,9 +9,16 @@ value: true | ||
| exports.default = void 0; | ||
| var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); | ||
| var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| // [times, realValue] | ||
| var Entity = /*#__PURE__*/function () { | ||
| function Entity() { | ||
| (0, _classCallCheck2.default)(this, Entity); | ||
| this.cache = new Map(); | ||
| (0, _defineProperty2.default)(this, "cache", new Map()); | ||
| } | ||
| (0, _createClass2.default)(Entity, [{ | ||
@@ -27,2 +35,3 @@ key: "get", | ||
| var nextValue = valueFn(prevValue); | ||
| if (nextValue === null) { | ||
@@ -37,3 +46,4 @@ this.cache.delete(path); | ||
| }(); | ||
| var _default = Entity; | ||
| exports.default = _default; |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| var _typeof = require("@babel/runtime/helpers/typeof"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -9,19 +11,31 @@ value: true | ||
| exports.default = useCacheToken; | ||
| var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); | ||
| var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); | ||
| var React = _interopRequireWildcard(require("react")); | ||
| var _hash = _interopRequireDefault(require("@emotion/hash")); | ||
| var _StyleContext = require("../StyleContext"); | ||
| var _useGlobalCache = _interopRequireDefault(require("./useGlobalCache")); | ||
| var _util = require("../util"); | ||
| function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } | ||
| function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| var EMPTY_OVERRIDE = {}; | ||
| // Generate different prefix to make user selector break in production env. | ||
| var EMPTY_OVERRIDE = {}; // Generate different prefix to make user selector break in production env. | ||
| // This helps developer not to do style override directly on the hash id. | ||
| var hashPrefix = process.env.NODE_ENV !== 'production' ? 'css-dev-only-do-not-override' : 'css'; | ||
| var tokenKeys = new Map(); | ||
| function recordCleanToken(tokenKey) { | ||
| tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) + 1); | ||
| } | ||
| function removeStyleTags(key) { | ||
@@ -33,2 +47,3 @@ if (typeof document !== 'undefined') { | ||
| var _style$parentNode; | ||
| (_style$parentNode = style.parentNode) === null || _style$parentNode === void 0 ? void 0 : _style$parentNode.removeChild(style); | ||
@@ -38,4 +53,5 @@ } | ||
| } | ||
| } | ||
| // Remove will check current keys first | ||
| } // Remove will check current keys first | ||
| function cleanTokenStyle(tokenKey) { | ||
@@ -48,2 +64,3 @@ tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) - 1); | ||
| }); | ||
| if (cleanableKeyList.length < tokenKeyList.length) { | ||
@@ -63,10 +80,12 @@ cleanableKeyList.forEach(function (key) { | ||
| */ | ||
| function useCacheToken(theme, tokens) { | ||
| var option = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; | ||
| var _option$salt = option.salt, | ||
| salt = _option$salt === void 0 ? '' : _option$salt, | ||
| _option$override = option.override, | ||
| override = _option$override === void 0 ? EMPTY_OVERRIDE : _option$override, | ||
| formatToken = option.formatToken; | ||
| // Basic - We do basic cache here | ||
| salt = _option$salt === void 0 ? '' : _option$salt, | ||
| _option$override = option.override, | ||
| override = _option$override === void 0 ? EMPTY_OVERRIDE : _option$override, | ||
| formatToken = option.formatToken; // Basic - We do basic cache here | ||
| var mergedToken = React.useMemo(function () { | ||
@@ -82,10 +101,11 @@ return Object.assign.apply(Object, [{}].concat((0, _toConsumableArray2.default)(tokens))); | ||
| var cachedToken = (0, _useGlobalCache.default)('token', [salt, theme.id, tokenStr, overrideTokenStr], function () { | ||
| var derivativeToken = theme.getDerivativeToken(mergedToken); | ||
| // Merge with override | ||
| var mergedDerivativeToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, derivativeToken), override); | ||
| // Format if needed | ||
| var derivativeToken = theme.getDerivativeToken(mergedToken); // Merge with override | ||
| var mergedDerivativeToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, derivativeToken), override); // Format if needed | ||
| if (formatToken) { | ||
| mergedDerivativeToken = formatToken(mergedDerivativeToken); | ||
| } | ||
| // Optimize for `useStyleRegister` performance | ||
| } // Optimize for `useStyleRegister` performance | ||
| var tokenKey = (0, _util.token2key)(mergedDerivativeToken, salt); | ||
@@ -96,2 +116,3 @@ mergedDerivativeToken._tokenKey = tokenKey; | ||
| mergedDerivativeToken._hashId = hashId; // Not used | ||
| return [mergedDerivativeToken, hashId]; | ||
@@ -98,0 +119,0 @@ }, function (cache) { |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| var _typeof = require("@babel/runtime/helpers/typeof"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -9,24 +11,35 @@ value: true | ||
| exports.default = useClientCache; | ||
| var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); | ||
| var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); | ||
| var React = _interopRequireWildcard(require("react")); | ||
| var _StyleContext = _interopRequireDefault(require("../StyleContext")); | ||
| var _useHMR = _interopRequireDefault(require("./useHMR")); | ||
| function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } | ||
| function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| function useClientCache(prefix, keyPath, cacheFn, onCacheRemove) { | ||
| var _React$useContext = React.useContext(_StyleContext.default), | ||
| globalCache = _React$useContext.cache; | ||
| globalCache = _React$useContext.cache; | ||
| var fullPath = [prefix].concat((0, _toConsumableArray2.default)(keyPath)); | ||
| var HMRUpdate = (0, _useHMR.default)(); | ||
| // Create cache | ||
| var HMRUpdate = (0, _useHMR.default)(); // Create cache | ||
| React.useMemo(function () { | ||
| globalCache.update(fullPath, function (prevCache) { | ||
| var _ref = prevCache || [], | ||
| _ref2 = (0, _slicedToArray2.default)(_ref, 2), | ||
| _ref2$ = _ref2[0], | ||
| times = _ref2$ === void 0 ? 0 : _ref2$, | ||
| cache = _ref2[1]; | ||
| // HMR should always ignore cache since developer may change it | ||
| _ref2 = (0, _slicedToArray2.default)(_ref, 2), | ||
| _ref2$ = _ref2[0], | ||
| times = _ref2$ === void 0 ? 0 : _ref2$, | ||
| cache = _ref2[1]; // HMR should always ignore cache since developer may change it | ||
| var tmpCache = cache; | ||
| if (process.env.NODE_ENV !== 'production' && cache && HMRUpdate) { | ||
@@ -36,8 +49,12 @@ onCacheRemove === null || onCacheRemove === void 0 ? void 0 : onCacheRemove(tmpCache, HMRUpdate); | ||
| } | ||
| var mergedCache = tmpCache || cacheFn(); | ||
| return [times + 1, mergedCache]; | ||
| }); | ||
| }, /* eslint-disable react-hooks/exhaustive-deps */ | ||
| [fullPath.join('_')]); | ||
| // Remove if no need anymore | ||
| }, | ||
| /* eslint-disable react-hooks/exhaustive-deps */ | ||
| [fullPath.join('_')] | ||
| /* eslint-enable */ | ||
| ); // Remove if no need anymore | ||
| React.useEffect(function () { | ||
@@ -47,7 +64,9 @@ return function () { | ||
| var _ref3 = prevCache || [], | ||
| _ref4 = (0, _slicedToArray2.default)(_ref3, 2), | ||
| _ref4$ = _ref4[0], | ||
| times = _ref4$ === void 0 ? 0 : _ref4$, | ||
| cache = _ref4[1]; | ||
| _ref4 = (0, _slicedToArray2.default)(_ref3, 2), | ||
| _ref4$ = _ref4[0], | ||
| times = _ref4$ === void 0 ? 0 : _ref4$, | ||
| cache = _ref4[1]; | ||
| var nextCount = times - 1; | ||
| if (nextCount === 0) { | ||
@@ -57,2 +76,3 @@ onCacheRemove === null || onCacheRemove === void 0 ? void 0 : onCacheRemove(cache, false); | ||
| } | ||
| return [times - 1, cache]; | ||
@@ -59,0 +79,0 @@ }); |
@@ -7,16 +7,25 @@ "use strict"; | ||
| exports.default = void 0; | ||
| function useProdHMR() { | ||
| return false; | ||
| } | ||
| var webpackHMR = false; | ||
| function useDevHMR() { | ||
| return webpackHMR; | ||
| } | ||
| var _default = process.env.NODE_ENV === 'production' ? useProdHMR : useDevHMR; // Webpack `module.hot.accept` do not support any deps update trigger | ||
| // We have to hack handler to force mark as HRM | ||
| exports.default = _default; | ||
| if (process.env.NODE_ENV !== 'production' && typeof module !== 'undefined' && module && module.hot) { | ||
| var win = window; | ||
| if (typeof win.webpackHotUpdate === 'function') { | ||
| var originWebpackHotUpdate = win.webpackHotUpdate; | ||
| win.webpackHotUpdate = function () { | ||
@@ -23,0 +32,0 @@ webpackHMR = true; |
@@ -5,9 +5,9 @@ import * as React from 'react'; | ||
| import type Cache from '../Cache'; | ||
| import type { Theme } from '..'; | ||
| import type { Theme, Transformer } from '..'; | ||
| import type Keyframes from '../Keyframes'; | ||
| declare const SKIP_CHECK = "_skip_check_"; | ||
| export type CSSProperties = Omit<CSS.PropertiesFallback<number | string>, 'animationName'> & { | ||
| export declare type CSSProperties = Omit<CSS.PropertiesFallback<number | string>, 'animationName'> & { | ||
| animationName?: CSS.PropertiesFallback<number | string>['animationName'] | Keyframes; | ||
| }; | ||
| export type CSSPropertiesWithMultiValues = { | ||
| export declare type CSSPropertiesWithMultiValues = { | ||
| [K in keyof CSSProperties]: CSSProperties[K] | Extract<CSSProperties[K], string>[] | { | ||
@@ -18,9 +18,9 @@ [SKIP_CHECK]: boolean; | ||
| }; | ||
| export type CSSPseudos = { | ||
| export declare type CSSPseudos = { | ||
| [K in CSS.Pseudos]?: CSSObject; | ||
| }; | ||
| type ArrayCSSInterpolation = CSSInterpolation[]; | ||
| export type InterpolationPrimitive = null | undefined | boolean | number | string | CSSObject; | ||
| export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation | Keyframes; | ||
| export type CSSOthersObject = Record<string, CSSInterpolation>; | ||
| declare type ArrayCSSInterpolation = CSSInterpolation[]; | ||
| export declare type InterpolationPrimitive = null | undefined | boolean | number | string | CSSObject; | ||
| export declare type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation | Keyframes; | ||
| export declare type CSSOthersObject = Record<string, CSSInterpolation>; | ||
| export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject { | ||
@@ -35,2 +35,3 @@ } | ||
| path?: string; | ||
| transformers?: Transformer[]; | ||
| } | ||
@@ -37,0 +38,0 @@ export interface ParseInfo { |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| var _typeof3 = require("@babel/runtime/helpers/typeof"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -13,22 +15,41 @@ value: true | ||
| exports.parseStyle = void 0; | ||
| var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); | ||
| 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 React = _interopRequireWildcard(require("react")); | ||
| var _dynamicCSS = require("rc-util/lib/Dom/dynamicCSS"); | ||
| var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom")); | ||
| var _hash = _interopRequireDefault(require("@emotion/hash")); | ||
| var _unitless = _interopRequireDefault(require("@emotion/unitless")); | ||
| var _stylis = require("stylis"); | ||
| var _useGlobalCache3 = _interopRequireDefault(require("./useGlobalCache")); | ||
| var _StyleContext = _interopRequireWildcard(require("../StyleContext")); | ||
| var _util = require("../util"); | ||
| function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } | ||
| function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| // @ts-ignore | ||
| var isClientSide = (0, _canUseDom.default)(); | ||
| var SKIP_CHECK = '_skip_check_'; | ||
| // ============================================================================ | ||
@@ -42,8 +63,11 @@ // == Parser == | ||
| } | ||
| function isCompoundCSSProperty(value) { | ||
| return (0, _typeof2.default)(value) === 'object' && value && SKIP_CHECK in value; | ||
| } | ||
| var animationStatistics = {}; | ||
| // 注入 hash 值 | ||
| var animationStatistics = {}; // 注入 hash 值 | ||
| exports.animationStatistics = animationStatistics; | ||
| function injectSelectorHash(key, hashId, hashPriority) { | ||
@@ -53,9 +77,11 @@ if (!hashId) { | ||
| } | ||
| var hashClassName = ".".concat(hashId); | ||
| var hashSelector = hashPriority === 'low' ? ":where(".concat(hashClassName, ")") : hashClassName; | ||
| // 注入 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 fullPath = k.trim().split(/\s+/); // 如果 Selector 第一个是 HTML Element，那我们就插到它的后面。反之，就插到最前面。 | ||
| var firstPath = fullPath[0] || ''; | ||
@@ -68,2 +94,3 @@ var htmlElement = ((_firstPath$match = firstPath.match(/^\w+/)) === null || _firstPath$match === void 0 ? void 0 : _firstPath$match[0]) || ''; | ||
| } | ||
| // Global effect style will mount once and not removed | ||
@@ -75,31 +102,42 @@ // The effect will not save in SSR cache (e.g. keyframes) | ||
| */ | ||
| var _cf = process.env.NODE_ENV !== 'production' ? function () { | ||
| return globalEffectStyleKeys.clear(); | ||
| } : undefined; | ||
| // Parse CSSObject to style content | ||
| } : undefined; // Parse CSSObject to style content | ||
| exports._cf = _cf; | ||
| var 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 | ||
| }, | ||
| root = _ref.root, | ||
| injectHash = _ref.injectHash; | ||
| root: true | ||
| }, | ||
| root = _ref.root, | ||
| injectHash = _ref.injectHash; | ||
| var hashId = config.hashId, | ||
| layer = config.layer, | ||
| path = config.path, | ||
| hashPriority = config.hashPriority; | ||
| layer = config.layer, | ||
| path = config.path, | ||
| hashPriority = config.hashPriority, | ||
| _config$transformers = config.transformers, | ||
| transformers = _config$transformers === void 0 ? [] : _config$transformers; | ||
| var styleStr = ''; | ||
| var effectStyle = {}; | ||
| function parseKeyframes(keyframes) { | ||
| var animationName = keyframes.getName(hashId); | ||
| if (!effectStyle[animationName]) { | ||
| var _parseStyle = parseStyle(keyframes.style, config, { | ||
| root: false | ||
| }), | ||
| _parseStyle2 = (0, _slicedToArray2.default)(_parseStyle, 1), | ||
| parsedStr = _parseStyle2[0]; | ||
| effectStyle[animationName] = "@keyframes ".concat(keyframes.getName(hashId)).concat(parsedStr); | ||
| root: false | ||
| }), | ||
| _parseStyle2 = (0, _slicedToArray2.default)(_parseStyle, 1), | ||
| _parsedStr = _parseStyle2[0]; | ||
| effectStyle[animationName] = "@keyframes ".concat(keyframes.getName(hashId)).concat(_parsedStr); | ||
| } | ||
| } | ||
| function flattenList(list) { | ||
@@ -116,2 +154,3 @@ var fullList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; | ||
| } | ||
| var flattenStyleList = flattenList(Array.isArray(interpolation) ? interpolation : [interpolation]); | ||
@@ -121,2 +160,3 @@ flattenStyleList.forEach(function (originStyle) { | ||
| var style = typeof originStyle === 'string' && !root ? {} : originStyle; | ||
| if (typeof style === 'string') { | ||
@@ -128,12 +168,18 @@ styleStr += "".concat(style, "\n"); | ||
| } else { | ||
| // Normal CSSObject | ||
| Object.keys(style).forEach(function (key) { | ||
| var value = style[key]; | ||
| var mergedStyle = transformers.reduce(function (prev, trans) { | ||
| var _trans$visit; | ||
| return (trans === null || trans === void 0 ? 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; | ||
| // 拆分多个选择器 | ||
| 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) { | ||
@@ -156,17 +202,21 @@ if (mergedKey.startsWith('@')) { | ||
| } | ||
| var _parseStyle3 = parseStyle(value, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, config), {}, { | ||
| path: "".concat(path, " -> ").concat(mergedKey) | ||
| }), { | ||
| root: nextRoot, | ||
| injectHash: subInjectHash | ||
| }), | ||
| _parseStyle4 = (0, _slicedToArray2.default)(_parseStyle3, 2), | ||
| parsedStr = _parseStyle4[0], | ||
| childEffectStyle = _parseStyle4[1]; | ||
| effectStyle = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, effectStyle), childEffectStyle); | ||
| styleStr += "".concat(mergedKey).concat(parsedStr); | ||
| var _parseStyle3 = parseStyle(value, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, config), {}, { | ||
| path: "".concat(path, " -> ").concat(mergedKey) | ||
| }), { | ||
| root: nextRoot, | ||
| injectHash: subInjectHash | ||
| }), | ||
| _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$value; | ||
| var actualValue = (_value$value = value === null || value === void 0 ? void 0 : value.value) !== null && _value$value !== void 0 ? _value$value : value; | ||
| if (process.env.NODE_ENV !== 'production' && ((0, _typeof2.default)(value) !== 'object' || !(value === null || value === void 0 ? void 0 : value[SKIP_CHECK]))) { | ||
| var _value; | ||
| var actualValue = (_value = value === null || value === void 0 ? void 0 : value.value) !== null && _value !== void 0 ? _value : value; | ||
| if (process.env.NODE_ENV !== 'production' && ((0, _typeof2.default)(value) !== 'object' || !(value !== null && value !== void 0 && value[SKIP_CHECK]))) { | ||
| (0, _util.styleValidate)(key, actualValue, { | ||
@@ -176,17 +226,21 @@ path: path, | ||
| }); | ||
| } | ||
| // 如果是样式则直接插入 | ||
| } // 如果是样式则直接插入 | ||
| var styleName = key.replace(/[A-Z]/g, function (match) { | ||
| return "-".concat(match.toLowerCase()); | ||
| }); | ||
| // Auto suffix with px | ||
| }); // Auto suffix with px | ||
| var formatValue = actualValue; | ||
| if (!_unitless.default[key] && typeof formatValue === 'number' && formatValue !== 0) { | ||
| formatValue = "".concat(formatValue, "px"); | ||
| } | ||
| // handle animationName & Keyframe value | ||
| if (key === 'animationName' && (value === null || value === void 0 ? void 0 : value._keyframe)) { | ||
| } // handle animationName & Keyframe value | ||
| if (key === 'animationName' && value !== null && value !== void 0 && value._keyframe) { | ||
| parseKeyframes(value); | ||
| formatValue = value.getName(hashId); | ||
| } | ||
| styleStr += "".concat(styleName, ":").concat(formatValue, ";"); | ||
@@ -197,2 +251,3 @@ } | ||
| }); | ||
| if (!root) { | ||
@@ -203,4 +258,4 @@ styleStr = "{".concat(styleStr, "}"); | ||
| var layerName = layerCells[layerCells.length - 1].trim(); | ||
| styleStr = "@layer ".concat(layerName, " {").concat(styleStr, "}"); | ||
| // Order of layer if needed | ||
| styleStr = "@layer ".concat(layerName, " {").concat(styleStr, "}"); // Order of layer if needed | ||
| if (layerCells.length > 1) { | ||
@@ -211,11 +266,15 @@ // zombieJ: stylis do not support layer order, so we need to handle it manually. | ||
| } | ||
| return [styleStr, effectStyle]; | ||
| }; | ||
| // ============================================================================ | ||
| }; // ============================================================================ | ||
| // == Register == | ||
| // ============================================================================ | ||
| exports.parseStyle = parseStyle; | ||
| function uniqueHash(path, styleStr) { | ||
| return (0, _hash.default)("".concat(path.join('%')).concat(styleStr)); | ||
| } | ||
| function Empty() { | ||
@@ -227,87 +286,102 @@ return null; | ||
| */ | ||
| function useStyleRegister(info, styleFn) { | ||
| var token = info.token, | ||
| path = info.path, | ||
| hashId = info.hashId, | ||
| layer = info.layer; | ||
| path = info.path, | ||
| hashId = info.hashId, | ||
| layer = info.layer; | ||
| 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; | ||
| 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; | ||
| var tokenKey = token._tokenKey; | ||
| var fullPath = [tokenKey].concat((0, _toConsumableArray2.default)(path)); | ||
| // Check if need insert style | ||
| var fullPath = [tokenKey].concat((0, _toConsumableArray2.default)(path)); // Check if need insert style | ||
| var isMergedClientSide = isClientSide; | ||
| if (process.env.NODE_ENV !== 'production' && mock !== undefined) { | ||
| isMergedClientSide = mock === 'client'; | ||
| } | ||
| var _useGlobalCache = (0, _useGlobalCache3.default)('style', fullPath, | ||
| // Create cache if needed | ||
| function () { | ||
| var styleObj = styleFn(); | ||
| var _parseStyle5 = parseStyle(styleObj, { | ||
| hashId: hashId, | ||
| hashPriority: hashPriority, | ||
| layer: layer, | ||
| path: path.join('-') | ||
| }), | ||
| var _useGlobalCache = (0, _useGlobalCache3.default)('style', fullPath, // Create cache if needed | ||
| function () { | ||
| var styleObj = styleFn(); | ||
| var _parseStyle5 = parseStyle(styleObj, { | ||
| hashId: hashId, | ||
| hashPriority: hashPriority, | ||
| layer: layer, | ||
| path: path.join('-'), | ||
| transformers: transformers | ||
| }), | ||
| _parseStyle6 = (0, _slicedToArray2.default)(_parseStyle5, 2), | ||
| parsedStyle = _parseStyle6[0], | ||
| effectStyle = _parseStyle6[1]; | ||
| var styleStr = normalizeStyle(parsedStyle); | ||
| var styleId = uniqueHash(fullPath, styleStr); | ||
| // Clear animation statistics | ||
| exports.animationStatistics = animationStatistics = {}; | ||
| if (isMergedClientSide) { | ||
| var style = (0, _dynamicCSS.updateCSS)(styleStr, styleId, { | ||
| mark: _StyleContext.ATTR_MARK, | ||
| prepend: 'queue', | ||
| attachTo: container | ||
| }); | ||
| style[_StyleContext.CSS_IN_JS_INSTANCE] = _StyleContext.CSS_IN_JS_INSTANCE_ID; | ||
| // Used for `useCacheToken` to remove on batch when token removed | ||
| style.setAttribute(_StyleContext.ATTR_TOKEN, tokenKey); | ||
| // Dev usage to find which cache path made this easily | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| style.setAttribute(_StyleContext.ATTR_DEV_CACHE_PATH, fullPath.join('|')); | ||
| var styleStr = normalizeStyle(parsedStyle); | ||
| var styleId = uniqueHash(fullPath, styleStr); // Clear animation statistics | ||
| exports.animationStatistics = animationStatistics = {}; | ||
| if (isMergedClientSide) { | ||
| var style = (0, _dynamicCSS.updateCSS)(styleStr, styleId, { | ||
| mark: _StyleContext.ATTR_MARK, | ||
| prepend: 'queue', | ||
| attachTo: container | ||
| }); | ||
| style[_StyleContext.CSS_IN_JS_INSTANCE] = _StyleContext.CSS_IN_JS_INSTANCE_ID; // Used for `useCacheToken` to remove on batch when token removed | ||
| style.setAttribute(_StyleContext.ATTR_TOKEN, tokenKey); // Dev usage to find which cache path made this easily | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| style.setAttribute(_StyleContext.ATTR_DEV_CACHE_PATH, fullPath.join('|')); | ||
| } // Inject client side effect style | ||
| Object.keys(effectStyle).forEach(function (effectKey) { | ||
| if (!globalEffectStyleKeys.has(effectKey)) { | ||
| globalEffectStyleKeys.add(effectKey); // Inject | ||
| (0, _dynamicCSS.updateCSS)(normalizeStyle(effectStyle[effectKey]), "_effect-".concat(effectKey), { | ||
| mark: _StyleContext.ATTR_MARK, | ||
| prepend: 'queue', | ||
| attachTo: container | ||
| }); | ||
| } | ||
| // Inject client side effect style | ||
| Object.keys(effectStyle).forEach(function (effectKey) { | ||
| if (!globalEffectStyleKeys.has(effectKey)) { | ||
| globalEffectStyleKeys.add(effectKey); | ||
| // Inject | ||
| (0, _dynamicCSS.updateCSS)(normalizeStyle(effectStyle[effectKey]), "_effect-".concat(effectKey), { | ||
| mark: _StyleContext.ATTR_MARK, | ||
| prepend: 'queue', | ||
| attachTo: container | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| return [styleStr, tokenKey, styleId]; | ||
| }, | ||
| // Remove cache if no need | ||
| function (_ref2, fromHMR) { | ||
| var _ref3 = (0, _slicedToArray2.default)(_ref2, 3), | ||
| }); | ||
| } | ||
| return [styleStr, tokenKey, styleId]; | ||
| }, // Remove cache if no need | ||
| function (_ref2, fromHMR) { | ||
| var _ref3 = (0, _slicedToArray2.default)(_ref2, 3), | ||
| styleId = _ref3[2]; | ||
| if ((fromHMR || autoClear) && isClientSide) { | ||
| (0, _dynamicCSS.removeCSS)(styleId, { | ||
| mark: _StyleContext.ATTR_MARK | ||
| }); | ||
| } | ||
| }), | ||
| _useGlobalCache2 = (0, _slicedToArray2.default)(_useGlobalCache, 3), | ||
| cachedStyleStr = _useGlobalCache2[0], | ||
| cachedTokenKey = _useGlobalCache2[1], | ||
| cachedStyleId = _useGlobalCache2[2]; | ||
| if ((fromHMR || autoClear) && isClientSide) { | ||
| (0, _dynamicCSS.removeCSS)(styleId, { | ||
| mark: _StyleContext.ATTR_MARK | ||
| }); | ||
| } | ||
| }), | ||
| _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 { | ||
| var _objectSpread2; | ||
| styleNode = /*#__PURE__*/React.createElement("style", (0, _objectSpread3.default)((0, _objectSpread3.default)({}, (_objectSpread2 = {}, (0, _defineProperty2.default)(_objectSpread2, _StyleContext.ATTR_TOKEN, cachedTokenKey), (0, _defineProperty2.default)(_objectSpread2, _StyleContext.ATTR_MARK, cachedStyleId), _objectSpread2)), {}, { | ||
| var _ref4; | ||
| styleNode = /*#__PURE__*/React.createElement("style", (0, _extends2.default)({}, (_ref4 = {}, (0, _defineProperty2.default)(_ref4, _StyleContext.ATTR_TOKEN, cachedTokenKey), (0, _defineProperty2.default)(_ref4, _StyleContext.ATTR_MARK, cachedStyleId), _ref4), { | ||
| dangerouslySetInnerHTML: { | ||
@@ -318,8 +392,10 @@ __html: cachedStyleStr | ||
| } | ||
| return /*#__PURE__*/React.createElement(React.Fragment, null, styleNode, node); | ||
| }; | ||
| } | ||
| // ============================================================================ | ||
| } // ============================================================================ | ||
| // == SSR == | ||
| // ============================================================================ | ||
| function extractStyle(cache) { | ||
@@ -329,10 +405,11 @@ // prefix with `style` is used for `useStyleRegister` to cache style context | ||
| return key.startsWith('style%'); | ||
| }); | ||
| // const tokenStyles: Record<string, string[]> = {}; | ||
| }); // const tokenStyles: Record<string, string[]> = {}; | ||
| var styleText = ''; | ||
| styleKeys.forEach(function (key) { | ||
| var _cache$cache$get$ = (0, _slicedToArray2.default)(cache.cache.get(key)[1], 3), | ||
| styleStr = _cache$cache$get$[0], | ||
| tokenKey = _cache$cache$get$[1], | ||
| styleId = _cache$cache$get$[2]; | ||
| var _ = (0, _slicedToArray2.default)(cache.cache.get(key)[1], 3), | ||
| styleStr = _[0], | ||
| tokenKey = _[1], | ||
| styleId = _[2]; | ||
| styleText += "<style ".concat(_StyleContext.ATTR_TOKEN, "=\"").concat(tokenKey, "\" ").concat(_StyleContext.ATTR_MARK, "=\"").concat(styleId, "\">").concat(styleStr, "</style>"); | ||
@@ -339,0 +416,0 @@ }); |
@@ -8,3 +8,5 @@ import useStyleRegister, { extractStyle } from './hooks/useStyleRegister'; | ||
| import { createTheme, Theme } from './theme'; | ||
| export { Theme, createTheme, useStyleRegister, useCacheToken, createCache, StyleProvider, Keyframes, extractStyle, }; | ||
| export type { TokenType, CSSObject, CSSInterpolation, DerivativeFunc }; | ||
| import legacyLogicalPropertiesTransformer from './transformers/legacyLogicalProperties'; | ||
| import type { Transformer } from './transformers/interface'; | ||
| export { Theme, createTheme, useStyleRegister, useCacheToken, createCache, StyleProvider, Keyframes, extractStyle, legacyLogicalPropertiesTransformer, }; | ||
| export type { TokenType, CSSObject, CSSInterpolation, DerivativeFunc, Transformer, }; |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| var _typeof = require("@babel/runtime/helpers/typeof"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -44,2 +46,8 @@ value: true | ||
| }); | ||
| Object.defineProperty(exports, "legacyLogicalPropertiesTransformer", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _legacyLogicalProperties.default; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "useCacheToken", { | ||
@@ -57,8 +65,17 @@ enumerable: true, | ||
| }); | ||
| var _useStyleRegister = _interopRequireWildcard(require("./hooks/useStyleRegister")); | ||
| var _useCacheToken = _interopRequireDefault(require("./hooks/useCacheToken")); | ||
| var _StyleContext = require("./StyleContext"); | ||
| var _Keyframes = _interopRequireDefault(require("./Keyframes")); | ||
| var _theme = require("./theme"); | ||
| var _legacyLogicalProperties = _interopRequireDefault(require("./transformers/legacyLogicalProperties")); | ||
| function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } | ||
| function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -8,13 +9,19 @@ value: true | ||
| exports.default = void 0; | ||
| var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); | ||
| var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| var Keyframe = /*#__PURE__*/function () { | ||
| function Keyframe(name, style) { | ||
| (0, _classCallCheck2.default)(this, Keyframe); | ||
| this.name = void 0; | ||
| this.style = void 0; | ||
| this._keyframe = true; | ||
| (0, _defineProperty2.default)(this, "name", void 0); | ||
| (0, _defineProperty2.default)(this, "style", void 0); | ||
| (0, _defineProperty2.default)(this, "_keyframe", true); | ||
| this.name = name; | ||
| this.style = style; | ||
| } | ||
| (0, _createClass2.default)(Keyframe, [{ | ||
@@ -29,3 +36,4 @@ key: "getName", | ||
| }(); | ||
| var _default = Keyframe; | ||
| exports.default = _default; |
| import * as React from 'react'; | ||
| import CacheEntity from './Cache'; | ||
| import type { Transformer } from './transformers/interface'; | ||
| export declare const ATTR_TOKEN = "data-token-hash"; | ||
@@ -9,3 +10,3 @@ export declare const ATTR_MARK = "data-css-hash"; | ||
| export declare function createCache(): CacheEntity; | ||
| export type HashPriority = 'low' | 'high'; | ||
| export declare type HashPriority = 'low' | 'high'; | ||
| export interface StyleContextProps { | ||
@@ -28,5 +29,7 @@ autoClear?: boolean; | ||
| ssrInline?: boolean; | ||
| /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */ | ||
| transformers?: Transformer[]; | ||
| } | ||
| declare const StyleContext: React.Context<StyleContextProps>; | ||
| export type StyleProviderProps = Partial<StyleContextProps> & { | ||
| export declare type StyleProviderProps = Partial<StyleContextProps> & { | ||
| children?: React.ReactNode; | ||
@@ -33,0 +36,0 @@ }; |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| var _typeof = require("@babel/runtime/helpers/typeof"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -11,11 +13,21 @@ value: true | ||
| exports.default = void 0; | ||
| var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); | ||
| var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
| var React = _interopRequireWildcard(require("react")); | ||
| var _useMemo = _interopRequireDefault(require("rc-util/lib/hooks/useMemo")); | ||
| var _shallowequal = _interopRequireDefault(require("shallowequal")); | ||
| var _Cache = _interopRequireDefault(require("./Cache")); | ||
| var _excluded = ["children"]; | ||
| function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } | ||
| function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| var ATTR_TOKEN = 'data-token-hash'; | ||
@@ -25,4 +37,4 @@ exports.ATTR_TOKEN = ATTR_TOKEN; | ||
| exports.ATTR_MARK = ATTR_MARK; | ||
| var ATTR_DEV_CACHE_PATH = 'data-dev-cache-path'; | ||
| // Mark css-in-js instance in style element | ||
| var ATTR_DEV_CACHE_PATH = 'data-dev-cache-path'; // Mark css-in-js instance in style element | ||
| exports.ATTR_DEV_CACHE_PATH = ATTR_DEV_CACHE_PATH; | ||
@@ -33,2 +45,3 @@ var CSS_IN_JS_INSTANCE = '__cssinjs_instance__'; | ||
| exports.CSS_IN_JS_INSTANCE_ID = CSS_IN_JS_INSTANCE_ID; | ||
| function createCache() { | ||
@@ -39,13 +52,15 @@ if (typeof document !== 'undefined' && document.head && document.body) { | ||
| Array.from(styles).forEach(function (style) { | ||
| style[CSS_IN_JS_INSTANCE] = style[CSS_IN_JS_INSTANCE] || CSS_IN_JS_INSTANCE_ID; | ||
| // Not force move if no head | ||
| style[CSS_IN_JS_INSTANCE] = style[CSS_IN_JS_INSTANCE] || CSS_IN_JS_INSTANCE_ID; // Not force move if no head | ||
| document.head.insertBefore(style, firstChild); | ||
| }); | ||
| // Deduplicate of moved styles | ||
| }); // Deduplicate of moved styles | ||
| var styleHash = {}; | ||
| Array.from(document.querySelectorAll("style[".concat(ATTR_MARK, "]"))).forEach(function (style) { | ||
| var hash = style.getAttribute(ATTR_MARK); | ||
| if (styleHash[hash]) { | ||
| if (style[CSS_IN_JS_INSTANCE] === CSS_IN_JS_INSTANCE_ID) { | ||
| var _style$parentNode; | ||
| (_style$parentNode = style.parentNode) === null || _style$parentNode === void 0 ? void 0 : _style$parentNode.removeChild(style); | ||
@@ -58,4 +73,6 @@ } | ||
| } | ||
| return new _Cache.default(); | ||
| } | ||
| var StyleContext = /*#__PURE__*/React.createContext({ | ||
@@ -66,5 +83,6 @@ hashPriority: 'low', | ||
| }); | ||
| var StyleProvider = function StyleProvider(props) { | ||
| var children = props.children, | ||
| restProps = (0, _objectWithoutProperties2.default)(props, _excluded); | ||
| restProps = (0, _objectWithoutProperties2.default)(props, _excluded); | ||
| var parentContext = React.useContext(StyleContext); | ||
@@ -75,2 +93,3 @@ var context = (0, _useMemo.default)(function () { | ||
| var value = restProps[key]; | ||
| if (restProps[key] !== undefined) { | ||
@@ -91,4 +110,5 @@ mergedContext[key] = value; | ||
| }; | ||
| exports.StyleProvider = StyleProvider; | ||
| var _default = StyleContext; | ||
| exports.default = _default; |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -8,4 +9,7 @@ value: true | ||
| exports.default = createTheme; | ||
| var _ThemeCache = _interopRequireDefault(require("./ThemeCache")); | ||
| var _Theme = _interopRequireDefault(require("./Theme")); | ||
| var cacheThemes = new _ThemeCache.default(); | ||
@@ -15,10 +19,12 @@ /** | ||
| */ | ||
| function createTheme(derivatives) { | ||
| var derivativeArr = Array.isArray(derivatives) ? derivatives : [derivatives]; | ||
| // Create new theme if not exist | ||
| var derivativeArr = Array.isArray(derivatives) ? derivatives : [derivatives]; // Create new theme if not exist | ||
| if (!cacheThemes.has(derivativeArr)) { | ||
| cacheThemes.set(derivativeArr, new _Theme.default(derivativeArr)); | ||
| } | ||
| // Get theme from cache and return | ||
| } // Get theme from cache and return | ||
| return cacheThemes.get(derivativeArr); | ||
| } |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -25,4 +26,7 @@ value: true | ||
| }); | ||
| var _createTheme = _interopRequireDefault(require("./createTheme")); | ||
| var _Theme = _interopRequireDefault(require("./Theme")); | ||
| var _ThemeCache = _interopRequireDefault(require("./ThemeCache")); |
@@ -1,2 +0,2 @@ | ||
| export type TokenType = object; | ||
| export type DerivativeFunc<DesignToken extends TokenType, DerivativeToken extends TokenType> = (designToken: DesignToken, derivativeToken?: DerivativeToken) => DerivativeToken; | ||
| export declare type TokenType = object; | ||
| export declare type DerivativeFunc<DesignToken extends TokenType, DerivativeToken extends TokenType> = (designToken: DesignToken, derivativeToken?: DerivativeToken) => DerivativeToken; |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -8,5 +9,11 @@ value: true | ||
| exports.default = void 0; | ||
| var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); | ||
| var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| var _warning = require("rc-util/lib/warning"); | ||
| var uuid = 0; | ||
@@ -17,14 +24,18 @@ /** | ||
| */ | ||
| var Theme = /*#__PURE__*/function () { | ||
| function Theme(derivatives) { | ||
| (0, _classCallCheck2.default)(this, Theme); | ||
| this.derivatives = void 0; | ||
| this.id = void 0; | ||
| (0, _defineProperty2.default)(this, "derivatives", void 0); | ||
| (0, _defineProperty2.default)(this, "id", void 0); | ||
| this.derivatives = Array.isArray(derivatives) ? derivatives : [derivatives]; | ||
| this.id = uuid; | ||
| if (derivatives.length === 0) { | ||
| (0, _warning.warning)(derivatives.length > 0, '[Ant Design CSS-in-JS] Theme should have at least one derivative function.'); | ||
| } | ||
| uuid += 1; | ||
| } | ||
| (0, _createClass2.default)(Theme, [{ | ||
@@ -40,2 +51,3 @@ key: "getDerivativeToken", | ||
| }(); | ||
| exports.default = Theme; |
| import type Theme from './Theme'; | ||
| import type { DerivativeFunc } from './interface'; | ||
| type DerivativeOptions = DerivativeFunc<any, any>[]; | ||
| declare type DerivativeOptions = DerivativeFunc<any, any>[]; | ||
| export declare function sameDerivativeOption(left: DerivativeOptions, right: DerivativeOptions): boolean; | ||
@@ -5,0 +5,0 @@ export default class ThemeCache { |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -9,5 +10,12 @@ value: true | ||
| exports.sameDerivativeOption = sameDerivativeOption; | ||
| var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); | ||
| var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); | ||
| var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| // ================================== Cache ================================== | ||
| function sameDerivativeOption(left, right) { | ||
@@ -17,2 +25,3 @@ if (left.length !== right.length) { | ||
| } | ||
| for (var i = 0; i < left.length; i++) { | ||
@@ -23,10 +32,12 @@ if (left[i] !== right[i]) { | ||
| } | ||
| return true; | ||
| } | ||
| var ThemeCache = /*#__PURE__*/function () { | ||
| function ThemeCache() { | ||
| (0, _classCallCheck2.default)(this, ThemeCache); | ||
| this.cache = void 0; | ||
| this.keys = void 0; | ||
| this.cacheCallTimes = void 0; | ||
| (0, _defineProperty2.default)(this, "cache", void 0); | ||
| (0, _defineProperty2.default)(this, "keys", void 0); | ||
| (0, _defineProperty2.default)(this, "cacheCallTimes", void 0); | ||
| this.cache = new Map(); | ||
@@ -36,2 +47,3 @@ this.keys = []; | ||
| } | ||
| (0, _createClass2.default)(ThemeCache, [{ | ||
@@ -46,2 +58,3 @@ key: "size", | ||
| var _cache2, _cache3; | ||
| var updateCallTimes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
@@ -56,8 +69,11 @@ var cache = { | ||
| var _cache, _cache$map; | ||
| cache = (_cache = cache) === null || _cache === void 0 ? void 0 : (_cache$map = _cache.map) === null || _cache$map === void 0 ? void 0 : _cache$map.get(derivative); | ||
| } | ||
| }); | ||
| if (((_cache2 = cache) === null || _cache2 === void 0 ? void 0 : _cache2.value) && updateCallTimes) { | ||
| if ((_cache2 = cache) !== null && _cache2 !== void 0 && _cache2.value && updateCallTimes) { | ||
| cache.value[1] = this.cacheCallTimes++; | ||
| } | ||
| return (_cache3 = cache) === null || _cache3 === void 0 ? void 0 : _cache3.value; | ||
@@ -69,2 +85,3 @@ } | ||
| var _this$internalGet; | ||
| return (_this$internalGet = this.internalGet(derivativeOption, true)) === null || _this$internalGet === void 0 ? void 0 : _this$internalGet[0]; | ||
@@ -81,2 +98,3 @@ } | ||
| var _this = this; | ||
| // New cache | ||
@@ -86,15 +104,20 @@ if (!this.has(derivativeOption)) { | ||
| var _this$keys$reduce = this.keys.reduce(function (result, key) { | ||
| var _result = (0, _slicedToArray2.default)(result, 2), | ||
| var _result = (0, _slicedToArray2.default)(result, 2), | ||
| callTimes = _result[1]; | ||
| if (_this.internalGet(key)[1] < callTimes) { | ||
| return [key, _this.internalGet(key)[1]]; | ||
| } | ||
| return result; | ||
| }, [this.keys[0], this.cacheCallTimes]), | ||
| _this$keys$reduce2 = (0, _slicedToArray2.default)(_this$keys$reduce, 1), | ||
| targetKey = _this$keys$reduce2[0]; | ||
| if (_this.internalGet(key)[1] < callTimes) { | ||
| return [key, _this.internalGet(key)[1]]; | ||
| } | ||
| return result; | ||
| }, [this.keys[0], this.cacheCallTimes]), | ||
| _this$keys$reduce2 = (0, _slicedToArray2.default)(_this$keys$reduce, 1), | ||
| targetKey = _this$keys$reduce2[0]; | ||
| this.delete(targetKey); | ||
| } | ||
| this.keys.push(derivativeOption); | ||
| } | ||
| var cache = this.cache; | ||
@@ -108,2 +131,3 @@ derivativeOption.forEach(function (derivative, index) { | ||
| var cacheValue = cache.get(derivative); | ||
| if (!cacheValue) { | ||
@@ -116,2 +140,3 @@ cache.set(derivative, { | ||
| } | ||
| cache = cache.get(derivative).map; | ||
@@ -125,4 +150,6 @@ } | ||
| var cache = currentCache.get(derivatives[0]); | ||
| if (derivatives.length === 1) { | ||
| var _cache$value; | ||
| if (!cache.map) { | ||
@@ -135,8 +162,12 @@ currentCache.delete(derivatives[0]); | ||
| } | ||
| return (_cache$value = cache.value) === null || _cache$value === void 0 ? void 0 : _cache$value[0]; | ||
| } | ||
| var result = this.deleteByPath(cache.map, derivatives.slice(1)); | ||
| if ((!cache.map || cache.map.size === 0) && !cache.value) { | ||
| currentCache.delete(derivatives[0]); | ||
| } | ||
| return result; | ||
@@ -154,2 +185,3 @@ } | ||
| } | ||
| return undefined; | ||
@@ -160,4 +192,5 @@ } | ||
| }(); | ||
| exports.default = ThemeCache; | ||
| ThemeCache.MAX_CACHE_SIZE = 20; | ||
| ThemeCache.MAX_CACHE_OFFSET = 5; | ||
| (0, _defineProperty2.default)(ThemeCache, "MAX_CACHE_SIZE", 20); | ||
| (0, _defineProperty2.default)(ThemeCache, "MAX_CACHE_OFFSET", 5); |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -12,7 +13,13 @@ value: true | ||
| exports.warning = warning; | ||
| var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof")); | ||
| var _hash = _interopRequireDefault(require("@emotion/hash")); | ||
| var _warning = _interopRequireDefault(require("rc-util/lib/warning")); | ||
| var _dynamicCSS = require("rc-util/lib/Dom/dynamicCSS"); | ||
| var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom")); | ||
| function flattenToken(token) { | ||
@@ -23,2 +30,3 @@ var str = ''; | ||
| str += key; | ||
| if (value && (0, _typeof2.default)(value) === 'object') { | ||
@@ -35,12 +43,17 @@ str += flattenToken(value); | ||
| */ | ||
| function token2key(token, slat) { | ||
| return (0, _hash.default)("".concat(slat, "_").concat(flattenToken(token))); | ||
| } | ||
| function warning(message, path) { | ||
| (0, _warning.default)(false, "[Ant Design CSS-in-JS] ".concat(path ? "Error in '".concat(path, "': ") : '').concat(message)); | ||
| } | ||
| var styleValidate = function styleValidate(key, value) { | ||
| var info = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; | ||
| var path = info.path, | ||
| hashId = info.hashId; | ||
| hashId = info.hashId; | ||
| switch (key) { | ||
@@ -51,6 +64,9 @@ case 'content': | ||
| var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset']; | ||
| if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '"' && value.charAt(0) !== "'")) { | ||
| warning("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"".concat(value, "\"'`"), path); | ||
| } | ||
| return; | ||
| case 'marginLeft': | ||
@@ -76,2 +92,3 @@ case 'marginRight': | ||
| return; | ||
| case 'margin': | ||
@@ -86,2 +103,3 @@ case 'padding': | ||
| }); | ||
| if (valueArr.length === 4 && valueArr[1] !== valueArr[3]) { | ||
@@ -91,3 +109,5 @@ warning("You seem to be using '".concat(key, "' property with different left ").concat(key, " and right ").concat(key, ", which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties."), path); | ||
| } | ||
| return; | ||
| case 'clear': | ||
@@ -98,3 +118,5 @@ case 'textAlign': | ||
| } | ||
| return; | ||
| case 'borderRadius': | ||
@@ -109,19 +131,24 @@ if (typeof value === 'string') { | ||
| } | ||
| var radiusArr = group.split(' ').map(function (item) { | ||
| return item.trim(); | ||
| }); | ||
| // borderRadius: '2px 4px' | ||
| }); // borderRadius: '2px 4px' | ||
| if (radiusArr.length >= 2 && radiusArr[0] !== radiusArr[1]) { | ||
| return true; | ||
| } | ||
| // borderRadius: '4px 4px 2px' | ||
| } // borderRadius: '4px 4px 2px' | ||
| if (radiusArr.length === 3 && radiusArr[1] !== radiusArr[2]) { | ||
| return true; | ||
| } | ||
| // borderRadius: '4px 4px 2px 4px' | ||
| } // borderRadius: '4px 4px 2px 4px' | ||
| if (radiusArr.length === 4 && radiusArr[2] !== radiusArr[3]) { | ||
| return true; | ||
| } | ||
| return result; | ||
| }, false); | ||
| if (invalid) { | ||
@@ -131,3 +158,5 @@ warning("You seem to be using non-logical value '".concat(value, "' of ").concat(key, ", which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties."), path); | ||
| } | ||
| return; | ||
| case 'animation': | ||
@@ -137,2 +166,3 @@ if (hashId && value !== 'none') { | ||
| } | ||
| default: | ||
@@ -142,27 +172,37 @@ return; | ||
| }; | ||
| exports.styleValidate = styleValidate; | ||
| var layerKey = "layer-".concat(Date.now(), "-").concat(Math.random()).replace(/\./g, ''); | ||
| var layerWidth = '903px'; | ||
| function supportSelector(styleStr, handleElement) { | ||
| if ((0, _canUseDom.default)()) { | ||
| var _ele$parentNode; | ||
| (0, _dynamicCSS.updateCSS)(styleStr, layerKey); | ||
| var ele = document.createElement('div'); | ||
| ele.style.position = 'fixed'; | ||
| ele.style.left = '0'; | ||
| ele.style.top = '0'; | ||
| handleElement === null || handleElement === void 0 ? void 0 : handleElement(ele); | ||
| document.body.appendChild(ele); | ||
| var _ele = document.createElement('div'); | ||
| _ele.style.position = 'fixed'; | ||
| _ele.style.left = '0'; | ||
| _ele.style.top = '0'; | ||
| handleElement === null || handleElement === void 0 ? void 0 : handleElement(_ele); | ||
| document.body.appendChild(_ele); | ||
| if (process.env.NODE_ENV !== 'production') { | ||
| ele.innerHTML = 'Test'; | ||
| ele.style.zIndex = '9999999'; | ||
| _ele.innerHTML = 'Test'; | ||
| _ele.style.zIndex = '9999999'; | ||
| } | ||
| var support = getComputedStyle(ele).width === layerWidth; | ||
| (_ele$parentNode = ele.parentNode) === null || _ele$parentNode === void 0 ? void 0 : _ele$parentNode.removeChild(ele); | ||
| var support = getComputedStyle(_ele).width === layerWidth; | ||
| (_ele$parentNode = _ele.parentNode) === null || _ele$parentNode === void 0 ? void 0 : _ele$parentNode.removeChild(_ele); | ||
| (0, _dynamicCSS.removeCSS)(layerKey); | ||
| return support; | ||
| } | ||
| return false; | ||
| } | ||
| var canLayer = undefined; | ||
| function supportLayer() { | ||
@@ -174,3 +214,4 @@ if (canLayer === undefined) { | ||
| } | ||
| return canLayer; | ||
| } |
| { | ||
| "name": "@ant-design/cssinjs", | ||
| "version": "1.2.0", | ||
| "version": "1.3.0", | ||
| "description": "Component level cssinjs resolution for antd", | ||
@@ -38,4 +38,4 @@ "keywords": [ | ||
| "pretty-quick": "pretty-quick", | ||
| "test": "father test", | ||
| "coverage": "father test --coverage" | ||
| "test": "rc-test", | ||
| "coverage": "rc-test --coverage" | ||
| }, | ||
@@ -54,2 +54,3 @@ "dependencies": { | ||
| "@ctrl/tinycolor": "^3.4.0", | ||
| "@rc-component/father-plugin": "^1.0.1", | ||
| "@testing-library/jest-dom": "^5.16.3", | ||
@@ -70,4 +71,3 @@ "@testing-library/react": "^13.0.0", | ||
| "eslint": "^7.0.0", | ||
| "father": "^2.13.4", | ||
| "father-build": "^1.18.6", | ||
| "father": "^4.0.0", | ||
| "gh-pages": "^3.1.0", | ||
@@ -78,2 +78,3 @@ "husky": "^4.2.5", | ||
| "pretty-quick": "^3.0.0", | ||
| "rc-test": "^7.0.14", | ||
| "react": "^18.0.0", | ||
@@ -80,0 +81,0 @@ "react-dom": "^18.0.0", |
| # @ant-design/cssinjs | ||
| [![NPM version][npm-image]][npm-url] | ||
| [![npm download][download-image]][download-url] | ||
| [](https://github.com/umijs/dumi) | ||
| [![build status][github-actions-image]][github-actions-url] | ||
| [![Codecov][codecov-image]][codecov-url] | ||
| [![Dependencies][david-image]][david-url] | ||
| [![DevDependencies][david-dev-image]][david-dev-url] | ||
| [![bundle size][bundlephobia-image]][bundlephobia-url] | ||
| [![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![Dependencies][david-image]][david-url] [![DevDependencies][david-dev-image]][david-dev-url] [![bundle size][bundlephobia-image]][bundlephobia-url] | ||
@@ -27,4 +20,3 @@ [npm-image]: http://img.shields.io/npm/v/@ant-design/cssinjs.svg?style=flat-square | ||
| Component level cssinjs solution used in [ant.design](https://ant.design). | ||
| It's a subset of [Emotion](https://emotion.sh/) with design token logic wrapper. Please feel free to use emotion directly if you want to find a web cssinjs solution. cssinjs related dep packages: | ||
| Component level cssinjs solution used in [ant.design](https://ant.design). It's a subset of [Emotion](https://emotion.sh/) with design token logic wrapper. Please feel free to use emotion directly if you want to find a web cssinjs solution. cssinjs related dep packages: | ||
@@ -53,1 +45,54 @@ - stylis | ||
| @ant-design/cssinjs is released under the MIT license. | ||
| ## API | ||
| ### StyleProvider | ||
| | Prop | Desc | Type | Default | | ||
| | --- | --- | --- | --- | | ||
| | autoClear | Clear inject style element when component remove. | boolean | false | | ||
| | cache | Config cssinjs cache entity. Only set when you need ssr to extract style on you own. | CacheEntity | - | | ||
| | hashPriority | Use `:where` selector to reduce hashId css selector priority | `'low' \| 'high'` | `'low'` | | ||
| | container | Tell cssinjs where to inject style in. | Element \| ShadowRoot | `document.head` | | ||
| | ssrInline | Component wil render inline `<style />` for fallback in SSR. Not recommend. | boolean | false | | ||
| | transformers | Transform css before inject in document. Please note that `transformers` do not support dynamic update | Transformer[] | - | | ||
| ### createCache | ||
| return CacheEntity for StyleProvider. | ||
| ### createTheme | ||
| Create theme object. When same algorithm provided, it will return same object. | ||
| ### Design Token related API | ||
| Since `@ant-design/cssinjs` use strong constraints for cache hit performance, we recommend to view demo `basic.tsx` for usage and `animation.tsx` for animation usage. | ||
| ## Transform | ||
| When you need transform CSSObject before inject style. You can use `transformers` to handle this: | ||
| ```tsx | ||
| import { | ||
| legacyLogicalPropertiesTransformer, | ||
| StyleProvider, | ||
| } from '@ant-design/cssinjs'; | ||
| export default () => ( | ||
| <StyleProvider transformers={[legacyLogicalPropertiesTransformer]}> | ||
| <MyApp /> | ||
| </StyleProvider> | ||
| ); | ||
| ``` | ||
| Follow are the transform we provide: | ||
| #### legacyLogicalPropertiesTransformer | ||
| Convert logical properties to legacy properties. e.g. `marginBlockStart` to `marginTop`: | ||
| - inset | ||
| - margin | ||
| - padding | ||
| - border |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by13.6%
125820
- Number of package files
- increased by13.56%
67
- Lines of code
- increased by9.75%
2669
- Number of lines in readme file
- increased by86.54%
97
Worsened metrics
- Dev dependency count
- increased by3.85%
27
No dependency changes