@ant-design/cssinjs - npm Package Compare versions

Comparing version 1.15.0 to 1.16.0

es/hooks/useStyleRegister/index.d.ts

@@ -55,4 +55,10 @@ import type * as CSS from 'csstype';
     clientOnly?: boolean;
+    /**
+     * Tell cssinjs the insert order of style.
+     * It's useful when you need to insert style
+     * before other style to overwrite for the same selector priority.
+     */
+    order?: number;
 }, styleFn: () => CSSInterpolation): (node: React.ReactElement) => React.JSX.Element;
 export declare function extractStyle(cache: Cache, plain?: boolean): string;
 export {};

es/hooks/useStyleRegister/index.js

@@ -230,3 +230,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     nonce = info.nonce,
-    clientOnly = info.clientOnly;
+    clientOnly = info.clientOnly,
+    _info$order = info.order,
+    order = _info$order === void 0 ? 0 : _info$order;
   var _React$useContext = React.useContext(StyleContext),
@@ -262,3 +264,3 @@ autoClear = _React$useContext.autoClear,
         if (inlineCacheStyleStr) {
-          return [inlineCacheStyleStr, tokenKey, styleHash, {}, clientOnly];
+          return [inlineCacheStyleStr, tokenKey, styleHash, {}, clientOnly, order];
         }
@@ -282,3 +284,3 @@ }
       var styleId = uniqueHash(fullPath, styleStr);
-      return [styleStr, tokenKey, styleId, effectStyle, clientOnly];
+      return [styleStr, tokenKey, styleId, effectStyle, clientOnly, order];
     },
@@ -306,3 +308,4 @@ // Remove cache if no need
           prepend: 'queue',
-          attachTo: container
+          attachTo: container,
+          priority: order
         };
@@ -315,11 +318,11 @@ var nonceStr = typeof nonce === 'function' ? nonce() : nonce;
         }
-        var style = updateCSS(styleStr, styleId, mergedCSSConfig);
-        style[CSS_IN_JS_INSTANCE] = cache.instanceId;
+        var _style = updateCSS(styleStr, styleId, mergedCSSConfig);
+        _style[CSS_IN_JS_INSTANCE] = cache.instanceId;
 
         // Used for `useCacheToken` to remove on batch when token removed
-        style.setAttribute(ATTR_TOKEN, tokenKey);
+        _style.setAttribute(ATTR_TOKEN, tokenKey);
 
         // Debug usage. Dev only
         if (process.env.NODE_ENV !== 'production') {
-          style.setAttribute(ATTR_CACHE_PATH, fullPath.join('|'));
+          _style.setAttribute(ATTR_CACHE_PATH, fullPath.join('|'));
         }
@@ -385,5 +388,6 @@
   // ====================== Fill Style ======================
-  styleKeys.forEach(function (key) {
+
+  var orderStyles = styleKeys.map(function (key) {
     var cachePath = key.slice(matchPrefix.length).replace(/%/g, '|');
-    var _2 = _slicedToArray(cache.cache.get(key)[1], 5),
+    var _2 = _slicedToArray(cache.cache.get(key)[1], 6),
       styleStr = _2[0],
@@ -393,11 +397,17 @@ tokenKey = _2[1],
       effectStyle = _2[3],
-      clientOnly = _2[4];
+      clientOnly = _2[4],
+      order = _2[5];
 
     // Skip client only style
     if (clientOnly) {
-      return;
+      return null;
     }
 
     // ====================== Style ======================
-    styleText += toStyleStr(styleStr, tokenKey, styleId);
+    // Used for rc-util
+    var sharedAttrs = {
+      'data-rc-order': 'prependQueue',
+      'data-rc-priority': "".concat(order)
+    };
+    var keyStyleText = toStyleStr(styleStr, tokenKey, styleId, sharedAttrs);
 
@@ -413,7 +423,18 @@ // Save cache path with hash mapping
           effectStyles[effectKey] = true;
-          styleText += toStyleStr(normalizeStyle(effectStyle[effectKey]), tokenKey, "_effect-".concat(effectKey));
+          keyStyleText += toStyleStr(normalizeStyle(effectStyle[effectKey]), tokenKey, "_effect-".concat(effectKey), sharedAttrs);
         }
       });
     }
+    var ret = [order, keyStyleText];
+    return ret;
+  }).filter(function (o) {
+    return o;
   });
+  orderStyles.sort(function (o1, o2) {
+    return o1[0] - o2[0];
+  }).forEach(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+      style = _ref8[1];
+    styleText += style;
+  });
 
@@ -420,0 +441,0 @@ // ==================== Fill Cache Path ====================

lib/hooks/useStyleRegister/index.d.ts

@@ -55,4 +55,10 @@ import type * as CSS from 'csstype';
     clientOnly?: boolean;
+    /**
+     * Tell cssinjs the insert order of style.
+     * It's useful when you need to insert style
+     * before other style to overwrite for the same selector priority.
+     */
+    order?: number;
 }, styleFn: () => CSSInterpolation): (node: React.ReactElement) => React.JSX.Element;
 export declare function extractStyle(cache: Cache, plain?: boolean): string;
 export {};

lib/hooks/useStyleRegister/index.js

@@ -245,3 +245,5 @@ "use strict";
     nonce = info.nonce,
-    clientOnly = info.clientOnly;
+    clientOnly = info.clientOnly,
+    _info$order = info.order,
+    order = _info$order === void 0 ? 0 : _info$order;
   var _React$useContext = React.useContext(_StyleContext.default),
@@ -277,3 +279,3 @@ autoClear = _React$useContext.autoClear,
         if (inlineCacheStyleStr) {
-          return [inlineCacheStyleStr, tokenKey, styleHash, {}, clientOnly];
+          return [inlineCacheStyleStr, tokenKey, styleHash, {}, clientOnly, order];
         }
@@ -297,3 +299,3 @@ }
       var styleId = uniqueHash(fullPath, styleStr);
-      return [styleStr, tokenKey, styleId, effectStyle, clientOnly];
+      return [styleStr, tokenKey, styleId, effectStyle, clientOnly, order];
     },
@@ -321,3 +323,4 @@ // Remove cache if no need
           prepend: 'queue',
-          attachTo: container
+          attachTo: container,
+          priority: order
         };
@@ -330,11 +333,11 @@ var nonceStr = typeof nonce === 'function' ? nonce() : nonce;
         }
-        var style = (0, _dynamicCSS.updateCSS)(styleStr, styleId, mergedCSSConfig);
-        style[_StyleContext.CSS_IN_JS_INSTANCE] = cache.instanceId;
+        var _style = (0, _dynamicCSS.updateCSS)(styleStr, styleId, mergedCSSConfig);
+        _style[_StyleContext.CSS_IN_JS_INSTANCE] = cache.instanceId;
 
         // Used for `useCacheToken` to remove on batch when token removed
-        style.setAttribute(_StyleContext.ATTR_TOKEN, tokenKey);
+        _style.setAttribute(_StyleContext.ATTR_TOKEN, tokenKey);
 
         // Debug usage. Dev only
         if (process.env.NODE_ENV !== 'production') {
-          style.setAttribute(_StyleContext.ATTR_CACHE_PATH, fullPath.join('|'));
+          _style.setAttribute(_StyleContext.ATTR_CACHE_PATH, fullPath.join('|'));
         }
@@ -400,5 +403,6 @@
   // ====================== Fill Style ======================
-  styleKeys.forEach(function (key) {
+
+  var orderStyles = styleKeys.map(function (key) {
     var cachePath = key.slice(matchPrefix.length).replace(/%/g, '|');
-    var _2 = (0, _slicedToArray2.default)(cache.cache.get(key)[1], 5),
+    var _2 = (0, _slicedToArray2.default)(cache.cache.get(key)[1], 6),
       styleStr = _2[0],
@@ -408,11 +412,17 @@ tokenKey = _2[1],
       effectStyle = _2[3],
-      clientOnly = _2[4];
+      clientOnly = _2[4],
+      order = _2[5];
 
     // Skip client only style
     if (clientOnly) {
-      return;
+      return null;
     }
 
     // ====================== Style ======================
-    styleText += toStyleStr(styleStr, tokenKey, styleId);
+    // Used for rc-util
+    var sharedAttrs = {
+      'data-rc-order': 'prependQueue',
+      'data-rc-priority': "".concat(order)
+    };
+    var keyStyleText = toStyleStr(styleStr, tokenKey, styleId, sharedAttrs);
 
@@ -428,7 +438,18 @@ // Save cache path with hash mapping
           effectStyles[effectKey] = true;
-          styleText += toStyleStr(normalizeStyle(effectStyle[effectKey]), tokenKey, "_effect-".concat(effectKey));
+          keyStyleText += toStyleStr(normalizeStyle(effectStyle[effectKey]), tokenKey, "_effect-".concat(effectKey), sharedAttrs);
         }
       });
     }
+    var ret = [order, keyStyleText];
+    return ret;
+  }).filter(function (o) {
+    return o;
   });
+  orderStyles.sort(function (o1, o2) {
+    return o1[0] - o2[0];
+  }).forEach(function (_ref7) {
+    var _ref8 = (0, _slicedToArray2.default)(_ref7, 2),
+      style = _ref8[1];
+    styleText += style;
+  });
 
@@ -435,0 +456,0 @@ // ==================== Fill Cache Path ====================

package.json

 {
   "name": "@ant-design/cssinjs",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "Component level cssinjs resolution for antd",
@@ -46,3 +46,3 @@ "keywords": [
     "csstype": "^3.0.10",
-    "rc-util": "^5.34.1",
+    "rc-util": "^5.35.0",
     "stylis": "^4.0.13"
@@ -49,0 +49,0 @@ },

New alerts

License Policy Violation

License

This 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

License

This 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

174502

increased by0.97%

Lines of code

3945

increased by1.34%

Dependency changes

• Updatedrc-util@^5.35.0