@ant-design/cssinjs - npm Package Compare versions

Comparing version 0.0.0-alpha.60 to 1.0.0

es/hooks/useStyleRegister.d.ts

@@ -38,4 +38,8 @@ import * as React from 'react';
 }
-export declare const parseStyle: (interpolation: CSSInterpolation, config?: ParseConfig, { root, injectHash }?: ParseInfo) => string;
 /**
+ * @private Test only. Clear the global effect style keys.
+ */
+export declare const _cf: (() => void) | undefined;
+export declare const parseStyle: (interpolation: CSSInterpolation, config?: ParseConfig, { root, injectHash }?: ParseInfo) => [parsedStr: string, effectStyle: Record<string, string>];
+/**
  * Register a style to the global style sheet.
@@ -42,0 +46,0 @@ */

es/hooks/useStyleRegister.js

 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
@@ -49,2 +49,11 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 }
+// Global effect style will mount once and not removed
+// The effect will not save in SSR cache (e.g. keyframes)
+var globalEffectStyleKeys = new Set();
+/**
+ * @private Test only. Clear the global effect style keys.
+ */
+export var _cf = process.env.NODE_ENV !== 'production' ? function () {
+  return globalEffectStyleKeys.clear();
+} : undefined;
 // Parse CSSObject to style content
@@ -63,10 +72,13 @@ export var parseStyle = function parseStyle(interpolation) {
   var styleStr = '';
+  var effectStyle = {};
   function parseKeyframes(keyframes) {
-    if (animationStatistics[keyframes.getName(hashId)]) {
-      return '';
+    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);
     }
-    animationStatistics[keyframes.getName(hashId)] = true;
-    return "@keyframes ".concat(keyframes.getName(hashId)).concat(parseStyle(keyframes.style, config, {
-      root: false
-    }));
   }
@@ -92,3 +104,3 @@ function flattenList(list) {
       // Keyframe
-      styleStr += parseKeyframes(style);
+      parseKeyframes(style);
     } else {
@@ -122,8 +134,13 @@ // Normal CSSObject
           }
-          styleStr += "".concat(mergedKey).concat(parseStyle(value, _objectSpread(_objectSpread({}, config), {}, {
-            path: "".concat(path, " -> ").concat(mergedKey)
-          }), {
-            root: nextRoot,
-            injectHash: subInjectHash
-          }));
+          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];
+          effectStyle = _objectSpread(_objectSpread({}, effectStyle), childEffectStyle);
+          styleStr += "".concat(mergedKey).concat(parsedStr);
         } else {
@@ -149,3 +166,3 @@ var _value$value;
           if (key === 'animationName' && (value === null || value === void 0 ? void 0 : value._keyframe)) {
-            styleStr += parseKeyframes(value);
+            parseKeyframes(value);
             formatValue = value.getName(hashId);
@@ -170,3 +187,3 @@ }
   }
-  return styleStr;
+  return [styleStr, effectStyle];
 };
@@ -206,8 +223,12 @@ // ============================================================================
       var styleObj = styleFn();
-      var styleStr = normalizeStyle(parseStyle(styleObj, {
-        hashId: hashId,
-        hashPriority: hashPriority,
-        layer: layer,
-        path: path.join('-')
-      }));
+      var _parseStyle5 = parseStyle(styleObj, {
+          hashId: hashId,
+          hashPriority: hashPriority,
+          layer: layer,
+          path: path.join('-')
+        }),
+        _parseStyle6 = _slicedToArray(_parseStyle5, 2),
+        parsedStyle = _parseStyle6[0],
+        effectStyle = _parseStyle6[1];
+      var styleStr = normalizeStyle(parsedStyle);
       var styleId = uniqueHash(fullPath, styleStr);
@@ -228,2 +249,13 @@ // Clear animation statistics
         }
+        // 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'
+            });
+          }
+        });
       }
@@ -230,0 +262,0 @@ return [styleStr, tokenKey, styleId];

lib/hooks/useStyleRegister.d.ts

@@ -38,4 +38,8 @@ import * as React from 'react';
 }
-export declare const parseStyle: (interpolation: CSSInterpolation, config?: ParseConfig, { root, injectHash }?: ParseInfo) => string;
 /**
+ * @private Test only. Clear the global effect style keys.
+ */
+export declare const _cf: (() => void) | undefined;
+export declare const parseStyle: (interpolation: CSSInterpolation, config?: ParseConfig, { root, injectHash }?: ParseInfo) => [parsedStr: string, effectStyle: Record<string, string>];
+/**
  * Register a style to the global style sheet.
@@ -42,0 +46,0 @@ */

lib/hooks/useStyleRegister.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.animationStatistics = void 0;
+exports.animationStatistics = exports._cf = void 0;
 exports.default = useStyleRegister;
@@ -15,4 +15,4 @@ exports.extractStyle = extractStyle;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -67,3 +67,13 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 }
+// Global effect style will mount once and not removed
+// The effect will not save in SSR cache (e.g. keyframes)
+var globalEffectStyleKeys = new Set();
+/**
+ * @private Test only. Clear the global effect style keys.
+ */
+var _cf = process.env.NODE_ENV !== 'production' ? function () {
+  return globalEffectStyleKeys.clear();
+} : undefined;
 // Parse CSSObject to style content
+exports._cf = _cf;
 var parseStyle = function parseStyle(interpolation) {
@@ -81,10 +91,13 @@ var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var styleStr = '';
+  var effectStyle = {};
   function parseKeyframes(keyframes) {
-    if (animationStatistics[keyframes.getName(hashId)]) {
-      return '';
+    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);
     }
-    animationStatistics[keyframes.getName(hashId)] = true;
-    return "@keyframes ".concat(keyframes.getName(hashId)).concat(parseStyle(keyframes.style, config, {
-      root: false
-    }));
   }
@@ -110,3 +123,3 @@ function flattenList(list) {
       // Keyframe
-      styleStr += parseKeyframes(style);
+      parseKeyframes(style);
     } else {
@@ -140,8 +153,13 @@ // Normal CSSObject
           }
-          styleStr += "".concat(mergedKey).concat(parseStyle(value, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, config), {}, {
-            path: "".concat(path, " -> ").concat(mergedKey)
-          }), {
-            root: nextRoot,
-            injectHash: subInjectHash
-          }));
+          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);
         } else {
@@ -167,3 +185,3 @@ var _value$value;
           if (key === 'animationName' && (value === null || value === void 0 ? void 0 : value._keyframe)) {
-            styleStr += parseKeyframes(value);
+            parseKeyframes(value);
             formatValue = value.getName(hashId);
@@ -188,3 +206,3 @@ }
   }
-  return styleStr;
+  return [styleStr, effectStyle];
 };
@@ -225,8 +243,12 @@ // ============================================================================
       var styleObj = styleFn();
-      var styleStr = normalizeStyle(parseStyle(styleObj, {
-        hashId: hashId,
-        hashPriority: hashPriority,
-        layer: layer,
-        path: path.join('-')
-      }));
+      var _parseStyle5 = parseStyle(styleObj, {
+          hashId: hashId,
+          hashPriority: hashPriority,
+          layer: layer,
+          path: path.join('-')
+        }),
+        _parseStyle6 = (0, _slicedToArray2.default)(_parseStyle5, 2),
+        parsedStyle = _parseStyle6[0],
+        effectStyle = _parseStyle6[1];
+      var styleStr = normalizeStyle(parsedStyle);
       var styleId = uniqueHash(fullPath, styleStr);
@@ -247,2 +269,13 @@ // Clear animation statistics
         }
+        // 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'
+            });
+          }
+        });
       }
@@ -249,0 +282,0 @@ return [styleStr, tokenKey, styleId];

package.json

 {
   "name": "@ant-design/cssinjs",
-  "version": "0.0.0-alpha.60",
+  "version": "1.0.0",
   "description": "Component level cssinjs resolution for antd",
@@ -5,0 +5,0 @@ "keywords": [

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

109819

increased by3.01%

Lines of code

2408

increased by3.13%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of low supply chain risk alerts

14

increased by16.67%

No dependency changes