@ant-design/cssinjs - npm Package Compare versions

Comparing version 0.0.0-alpha.46 to 0.0.0-alpha.47

es/hooks/useGlobalCache.d.ts

 import type { KeyType } from '../Cache';
-export default function useClientCache<CacheType>(prefix: string, keyPath: KeyType[], cacheFn: () => CacheType, onCacheRemove?: (cache: CacheType, fromHMR: boolean) => void, shouldUpdateByHMR?: boolean): CacheType;
+export default function useClientCache<CacheType>(prefix: string, keyPath: KeyType[], cacheFn: () => CacheType, onCacheRemove?: (cache: CacheType, fromHMR: boolean) => void): CacheType;

es/hooks/useGlobalCache.js

@@ -6,3 +6,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import useHMR from './useHMR';
-export default function useClientCache(prefix, keyPath, cacheFn, onCacheRemove, shouldUpdateByHMR) {
+export default function useClientCache(prefix, keyPath, cacheFn, onCacheRemove) {
   var _React$useContext = React.useContext(StyleContext),
@@ -12,3 +12,3 @@ globalCache = _React$useContext.cache;
   var fullPath = [prefix].concat(_toConsumableArray(keyPath));
-  var HMRUpdate = useHMR(fullPath, cacheFn, shouldUpdateByHMR); // Create cache
+  var HMRUpdate = useHMR(); // Create cache
 
@@ -15,0 +15,0 @@ React.useMemo(function () {

es/hooks/useHMR.d.ts

@@ -1,5 +0,3 @@
-import type { KeyType } from '../Cache';
-export declare type CacheFn<CacheType> = () => CacheType;
-declare function useDevHMR<CacheType>(fullPath: KeyType[], cacheFn: CacheFn<CacheType> | CacheFn<CacheType>[], shouldCheckHMR?: boolean): boolean;
-declare const _default: typeof useDevHMR;
+declare function useProdHMR(): boolean;
+declare const _default: typeof useProdHMR;
 export default _default;

es/hooks/useHMR.js

@@ -1,7 +0,1 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import * as React from 'react';
-import { note } from "rc-util/es/warning";
-import StyleContext from '../StyleContext';
-
 function useProdHMR() {
@@ -11,30 +5,25 @@ return false;
 
-function useDevHMR(fullPath, cacheFn, shouldCheckHMR) {
-  var _React$useContext = React.useContext(StyleContext),
-      globalCache = _React$useContext.cache;
+var webpackHMR = false;
 
-  var HMRUpdate = false;
-  var arrCacheFn = Array.isArray(cacheFn) ? cacheFn : [cacheFn];
-  React.useMemo(function () {
-    globalCache.update(['__HMR__'].concat(_toConsumableArray(fullPath)), function (prevCache) {
-      var _ref = prevCache || [],
-          _ref2 = _slicedToArray(_ref, 2),
-          cache = _ref2[1];
+function useDevHMR() {
+  return webpackHMR;
+}
 
-      if (shouldCheckHMR && cache && (arrCacheFn.length !== cache.length || arrCacheFn.some(function (fn, i) {
-        return fn !== cache[i];
-      }))) {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        HMRUpdate = true;
-        note(false, "Style function not same. It may caused by using the same cache 'path' or refresh with HMR.");
-      }
+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
 
-      return [0, arrCacheFn];
-    });
-  },
-  /* eslint-disable react-hooks/exhaustive-deps */
-  [fullPath.join('_')]);
-  return HMRUpdate;
-}
+if (process.env.NODE_ENV !== 'production' && module && module.hot) {
+  var win = window;
 
-export default process.env.NODE_ENV === 'production' ? useProdHMR : useDevHMR;
+  if (typeof win.webpackHotUpdate === 'function') {
+    var originWebpackHotUpdate = win.webpackHotUpdate;
+
+    win.webpackHotUpdate = function () {
+      webpackHMR = true;
+      setTimeout(function () {
+        webpackHMR = false;
+      }, 0);
+      return originWebpackHotUpdate.apply(void 0, arguments);
+    };
+  }
+}

es/hooks/useStyleRegister.d.ts

@@ -25,2 +25,3 @@ import * as React from 'react';
 }
+export declare function normalizeStyle(styleStr: string): string;
 export declare let animationStatistics: Record<string, boolean>;
@@ -27,0 +28,0 @@ export declare const parseStyle: (interpolation: CSSInterpolation, hashId?: string | undefined, layer?: string | undefined, path?: string | undefined, root?: boolean, injectHash?: boolean) => string;

es/hooks/useStyleRegister.js

@@ -22,4 +22,5 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-function normalizeStyle(styleStr) {
-  return serialize(compile(styleStr), stringify);
+export function normalizeStyle(styleStr) {
+  var serialized = serialize(compile(styleStr), stringify);
+  return serialized.replace(/\{%%%\:[^;];}/g, ';');
 }
@@ -60,4 +61,9 @@
   var flattenStyleList = flattenList(Array.isArray(interpolation) ? interpolation : [interpolation]);
-  flattenStyleList.forEach(function (style) {
-    if (style._keyframe) {
+  flattenStyleList.forEach(function (originStyle) {
+    // Only root level can use raw string
+    var style = typeof originStyle === 'string' && !root ? {} : originStyle;
+
+    if (typeof style === 'string') {
+      styleStr += "".concat(style, "\n");
+    } else if (style._keyframe) {
       // Keyframe
@@ -84,3 +90,3 @@ styleStr += parseKeyframes(style);
               var keys = key.split(',').map(function (k) {
-                return ".".concat(hashId).concat(k.trim());
+                return "".concat(k.trim(), ".").concat(hashId);
               });
@@ -138,3 +144,10 @@ mergedKey = keys.join(',');
   } else if (layer && supportLayer()) {
-    styleStr = "@layer ".concat(layer, " {").concat(styleStr, "}");
+    var layerCells = layer.split(',');
+    var layerName = layerCells[layerCells.length - 1].trim();
+    styleStr = "@layer ".concat(layerName, " {").concat(styleStr, "}"); // Order of layer if needed
+
+    if (layerCells.length > 1) {
+      // zombieJ: stylis do not support layer order, so we need to handle it manually.
+      styleStr = "@layer ".concat(layer, "{%%%:%}").concat(styleStr);
+    }
   }
@@ -215,4 +228,3 @@
     }
-  }, // Should update by HMR
-  true),
+  }),
       _useGlobalCache2 = _slicedToArray(_useGlobalCache, 3),
@@ -219,0 +231,0 @@ cachedStyleStr = _useGlobalCache2[0],

lib/hooks/useGlobalCache.d.ts

 import type { KeyType } from '../Cache';
-export default function useClientCache<CacheType>(prefix: string, keyPath: KeyType[], cacheFn: () => CacheType, onCacheRemove?: (cache: CacheType, fromHMR: boolean) => void, shouldUpdateByHMR?: boolean): CacheType;
+export default function useClientCache<CacheType>(prefix: string, keyPath: KeyType[], cacheFn: () => CacheType, onCacheRemove?: (cache: CacheType, fromHMR: boolean) => void): CacheType;

lib/hooks/useGlobalCache.js

@@ -22,3 +22,3 @@ "use strict";
 
-function useClientCache(prefix, keyPath, cacheFn, onCacheRemove, shouldUpdateByHMR) {
+function useClientCache(prefix, keyPath, cacheFn, onCacheRemove) {
   var _React$useContext = React.useContext(_StyleContext.default),
@@ -28,3 +28,3 @@ globalCache = _React$useContext.cache;
   var fullPath = [prefix].concat((0, _toConsumableArray2.default)(keyPath));
-  var HMRUpdate = (0, _useHMR.default)(fullPath, cacheFn, shouldUpdateByHMR); // Create cache
+  var HMRUpdate = (0, _useHMR.default)(); // Create cache
 
@@ -31,0 +31,0 @@ React.useMemo(function () {

lib/hooks/useHMR.d.ts

@@ -1,5 +0,3 @@
-import type { KeyType } from '../Cache';
-export declare type CacheFn<CacheType> = () => CacheType;
-declare function useDevHMR<CacheType>(fullPath: KeyType[], cacheFn: CacheFn<CacheType> | CacheFn<CacheType>[], shouldCheckHMR?: boolean): boolean;
-declare const _default: typeof useDevHMR;
+declare function useProdHMR(): boolean;
+declare const _default: typeof useProdHMR;
 export default _default;

lib/hooks/useHMR.js

 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -12,12 +8,2 @@ value: true
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _warning = require("rc-util/lib/warning");
-
-var _StyleContext = _interopRequireDefault(require("../StyleContext"));
-
 function useProdHMR() {
@@ -27,32 +13,28 @@ return false;
 
-function useDevHMR(fullPath, cacheFn, shouldCheckHMR) {
-  var _React$useContext = React.useContext(_StyleContext.default),
-      globalCache = _React$useContext.cache;
+var webpackHMR = false;
 
-  var HMRUpdate = false;
-  var arrCacheFn = Array.isArray(cacheFn) ? cacheFn : [cacheFn];
-  React.useMemo(function () {
-    globalCache.update(['__HMR__'].concat((0, _toConsumableArray2.default)(fullPath)), function (prevCache) {
-      var _ref = prevCache || [],
-          _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-          cache = _ref2[1];
+function useDevHMR() {
+  return webpackHMR;
+}
 
-      if (shouldCheckHMR && cache && (arrCacheFn.length !== cache.length || arrCacheFn.some(function (fn, i) {
-        return fn !== cache[i];
-      }))) {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        HMRUpdate = true;
-        (0, _warning.note)(false, "Style function not same. It may caused by using the same cache 'path' or refresh with HMR.");
-      }
+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
 
-      return [0, arrCacheFn];
-    });
-  },
-  /* eslint-disable react-hooks/exhaustive-deps */
-  [fullPath.join('_')]);
-  return HMRUpdate;
-}
 
-var _default = process.env.NODE_ENV === 'production' ? useProdHMR : useDevHMR;
+exports.default = _default;
 
-exports.default = _default;
+if (process.env.NODE_ENV !== 'production' && module && module.hot) {
+  var win = window;
+
+  if (typeof win.webpackHotUpdate === 'function') {
+    var originWebpackHotUpdate = win.webpackHotUpdate;
+
+    win.webpackHotUpdate = function () {
+      webpackHMR = true;
+      setTimeout(function () {
+        webpackHMR = false;
+      }, 0);
+      return originWebpackHotUpdate.apply(void 0, arguments);
+    };
+  }
+}

lib/hooks/useStyleRegister.d.ts

@@ -25,2 +25,3 @@ import * as React from 'react';
 }
+export declare function normalizeStyle(styleStr: string): string;
 export declare let animationStatistics: Record<string, boolean>;
@@ -27,0 +28,0 @@ export declare const parseStyle: (interpolation: CSSInterpolation, hashId?: string | undefined, layer?: string | undefined, path?: string | undefined, root?: boolean, injectHash?: boolean) => string;

lib/hooks/useStyleRegister.js

@@ -13,2 +13,3 @@ "use strict";
 exports.extractStyle = extractStyle;
+exports.normalizeStyle = normalizeStyle;
 exports.parseStyle = void 0;
@@ -52,3 +53,4 @@
 function normalizeStyle(styleStr) {
-  return (0, _stylis.serialize)((0, _stylis.compile)(styleStr), _stylis.stringify);
+  var serialized = (0, _stylis.serialize)((0, _stylis.compile)(styleStr), _stylis.stringify);
+  return serialized.replace(/\{%%%\:[^;];}/g, ';');
 }
@@ -91,4 +93,9 @@
   var flattenStyleList = flattenList(Array.isArray(interpolation) ? interpolation : [interpolation]);
-  flattenStyleList.forEach(function (style) {
-    if (style._keyframe) {
+  flattenStyleList.forEach(function (originStyle) {
+    // Only root level can use raw string
+    var style = typeof originStyle === 'string' && !root ? {} : originStyle;
+
+    if (typeof style === 'string') {
+      styleStr += "".concat(style, "\n");
+    } else if (style._keyframe) {
       // Keyframe
@@ -115,3 +122,3 @@ styleStr += parseKeyframes(style);
               var keys = key.split(',').map(function (k) {
-                return ".".concat(hashId).concat(k.trim());
+                return "".concat(k.trim(), ".").concat(hashId);
               });
@@ -169,3 +176,10 @@ mergedKey = keys.join(',');
   } else if (layer && (0, _util.supportLayer)()) {
-    styleStr = "@layer ".concat(layer, " {").concat(styleStr, "}");
+    var layerCells = layer.split(',');
+    var layerName = layerCells[layerCells.length - 1].trim();
+    styleStr = "@layer ".concat(layerName, " {").concat(styleStr, "}"); // Order of layer if needed
+
+    if (layerCells.length > 1) {
+      // zombieJ: stylis do not support layer order, so we need to handle it manually.
+      styleStr = "@layer ".concat(layer, "{%%%:%}").concat(styleStr);
+    }
   }
@@ -249,4 +263,3 @@
     }
-  }, // Should update by HMR
-  true),
+  }),
       _useGlobalCache2 = (0, _slicedToArray2.default)(_useGlobalCache, 3),
@@ -253,0 +266,0 @@ cachedStyleStr = _useGlobalCache2[0],

package.json

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

No alert changes

Improved metrics

Number of low supply chain risk alerts

12

decreased by-14.29%

Worsened metrics

Total package byte prevSize

97289

decreased by-0.92%

Lines of code

2128

decreased by-0.23%

No dependency changes