@ant-design/cssinjs-utils - npm Package Compare versions

Comparing version 1.1.3 to 2.0.0-alpha.0

es/interface/index.d.ts

@@ -1,3 +0,1 @@
-/// <reference types="react" />
 export type { OverrideTokenMap, TokenMap, TokenMapKey, GlobalTokenWithComponent, ComponentToken, ComponentTokenKey, GlobalToken, } from './components';
-export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];

es/util/genStyleUtils.d.ts

@@ -1,5 +0,5 @@
-import React from 'react';
+import type React from 'react';
 import type { CSSInterpolation, CSSObject, TokenType } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
-import type { ComponentTokenKey, GlobalTokenWithComponent, TokenMap, TokenMapKey, UseComponentStyleResult } from '../interface';
+import type { ComponentTokenKey, GlobalTokenWithComponent, TokenMap, TokenMapKey } from '../interface';
 import type AbstractCalculator from './calc/calculator';
@@ -84,3 +84,3 @@ import type { UseCSP } from '../hooks/useCSP';
         injectStyle?: boolean;
-    }) => (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+    }) => (prefixCls: string, rootCls?: string) => readonly [string, string];
     genSubStyleComponent: <C_1 extends TokenMapKey<CompTokenMap>>(componentName: C_1 | [C_1, string], styleFn: GenStyleFn<CompTokenMap, AliasToken, C_1>, getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C_1>, options?: {
@@ -115,4 +115,4 @@ resetStyle?: boolean;
         unitless?: Partial<Record<keyof Exclude<import("../interface").OverrideTokenMap<CompTokenMap, AliasToken>[C_2], undefined>, boolean>>;
-    }) => (prefixCls: string, rootCls?: string) => UseComponentStyleResult;
+    }) => (prefixCls: string, rootCls?: string) => string;
 };
 export default genStyleUtils;

es/util/genStyleUtils.js

@@ -5,3 +5,2 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React from 'react';
 import { token2CSSVar, useCSSVarRegister, useStyleRegister } from '@ant-design/cssinjs';
@@ -50,10 +49,5 @@ import genCalc from "./calc";
       var rootCls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : prefixCls;
-      var _useStyle = useStyle(prefixCls, rootCls),
-        _useStyle2 = _slicedToArray(_useStyle, 2),
-        hashId = _useStyle2[1];
-      var _useCSSVar = useCSSVar(rootCls),
-        _useCSSVar2 = _slicedToArray(_useCSSVar, 2),
-        wrapCSSVar = _useCSSVar2[0],
-        cssVarCls = _useCSSVar2[1];
-      return [wrapCSSVar, hashId, cssVarCls];
+      var hashId = useStyle(prefixCls, rootCls);
+      var cssVarCls = useCSSVar(rootCls);
+      return [hashId, cssVarCls];
     };
@@ -63,12 +57,9 @@ }
     var compUnitless = options.unitless,
-      _options$injectStyle = options.injectStyle,
-      injectStyle = _options$injectStyle === void 0 ? true : _options$injectStyle,
       prefixToken = options.prefixToken,
       ignore = options.ignore;
-    var CSSVarRegister = function CSSVarRegister(_ref) {
-      var rootCls = _ref.rootCls,
-        _ref$cssVar = _ref.cssVar,
-        cssVar = _ref$cssVar === void 0 ? {} : _ref$cssVar;
+    return function (rootCls) {
       var _useToken = useToken(),
-        realToken = _useToken.realToken;
+        cssVar = _useToken.cssVar;
+      var _useToken2 = useToken(),
+        realToken = _useToken2.realToken;
       useCSSVarRegister({
@@ -87,22 +78,12 @@ path: [component],
         });
-        Object.keys(defaultToken).forEach(function (key) {
-          componentToken[prefixToken(key)] = componentToken[key];
-          delete componentToken[key];
-        });
+        if (defaultToken) {
+          Object.keys(defaultToken).forEach(function (key) {
+            componentToken[prefixToken(key)] = componentToken[key];
+            delete componentToken[key];
+          });
+        }
         return componentToken;
       });
-      return null;
+      return cssVar === null || cssVar === void 0 ? void 0 : cssVar.key;
     };
-    var useCSSVar = function useCSSVar(rootCls) {
-      var _useToken2 = useToken(),
-        cssVar = _useToken2.cssVar;
-      return [function (node) {
-        return injectStyle && cssVar ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CSSVarRegister, {
-          rootCls: rootCls,
-          cssVar: cssVar,
-          component: component
-        }), node) : node;
-      }, cssVar === null || cssVar === void 0 ? void 0 : cssVar.key];
-    };
-    return useCSSVar;
   }
@@ -132,3 +113,3 @@ function genComponentStyleHook(componentName, styleFn, getDefaultToken) {
       var csp = useCSP();
-      var type = cssVar ? 'css' : 'js';
+      var type = 'css';
 
@@ -138,10 +119,8 @@ // Use unique memo to share the result across all instances
         var unitlessCssVar = new Set();
-        if (cssVar) {
-          Object.keys(options.unitless || {}).forEach(function (key) {
-            // Some component proxy the AliasToken (e.g. Image) and some not (e.g. Modal)
-            // We should both pass in `unitlessCssVar` to make sure the CSSVar can be unitless.
-            unitlessCssVar.add(token2CSSVar(key, cssVar.prefix));
-            unitlessCssVar.add(token2CSSVar(key, getCompVarPrefix(component, cssVar.prefix)));
-          });
-        }
+        Object.keys(options.unitless || {}).forEach(function (key) {
+          // Some component proxy the AliasToken (e.g. Image) and some not (e.g. Modal)
+          // We should both pass in `unitlessCssVar` to make sure the CSSVar can be unitless.
+          unitlessCssVar.add(token2CSSVar(key, cssVar.prefix));
+          unitlessCssVar.add(token2CSSVar(key, getCompVarPrefix(component, cssVar.prefix)));
+        });
         return genCalc(type, unitlessCssVar);
@@ -183,3 +162,3 @@ }, [type, component, cssVar === null || cssVar === void 0 ? void 0 : cssVar.prefix]);
       }
-      var wrapSSR = useStyleRegister(_objectSpread(_objectSpread({}, sharedConfig), {}, {
+      useStyleRegister(_objectSpread(_objectSpread({}, sharedConfig), {}, {
         path: [concatComponent, prefixCls, iconPrefixCls]
@@ -198,3 +177,3 @@ }), function () {
         });
-        if (cssVar && defaultComponentToken && _typeof(defaultComponentToken) === 'object') {
+        if (defaultComponentToken && _typeof(defaultComponentToken) === 'object') {
           Object.keys(defaultComponentToken).forEach(function (key) {
@@ -210,7 +189,5 @@ defaultComponentToken[key] = "var(".concat(token2CSSVar(key, getCompVarPrefix(component, cssVar.prefix)), ")");
           calc: calc,
-          // @ts-ignore
           max: max,
-          // @ts-ignore
           min: min
-        }, cssVar ? defaultComponentToken : componentToken);
+        }, defaultComponentToken);
         var styleInterpolation = styleFn(mergedToken, {
@@ -226,3 +203,3 @@ hashId: hashId,
       });
-      return [wrapSSR, hashId];
+      return hashId;
     };
@@ -237,6 +214,6 @@ }
     }, options));
-    var StyledComponent = function StyledComponent(_ref2) {
-      var prefixCls = _ref2.prefixCls,
-        _ref2$rootCls = _ref2.rootCls,
-        rootCls = _ref2$rootCls === void 0 ? prefixCls : _ref2$rootCls;
+    var StyledComponent = function StyledComponent(_ref) {
+      var prefixCls = _ref.prefixCls,
+        _ref$rootCls = _ref.rootCls,
+        rootCls = _ref$rootCls === void 0 ? prefixCls : _ref$rootCls;
       useStyle(prefixCls, rootCls);
@@ -243,0 +220,0 @@ return null;

lib/interface/index.d.ts

@@ -1,3 +0,1 @@
-/// <reference types="react" />
 export type { OverrideTokenMap, TokenMap, TokenMapKey, GlobalTokenWithComponent, ComponentToken, ComponentTokenKey, GlobalToken, } from './components';
-export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];

lib/util/genStyleUtils.d.ts

@@ -1,5 +0,5 @@
-import React from 'react';
+import type React from 'react';
 import type { CSSInterpolation, CSSObject, TokenType } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
-import type { ComponentTokenKey, GlobalTokenWithComponent, TokenMap, TokenMapKey, UseComponentStyleResult } from '../interface';
+import type { ComponentTokenKey, GlobalTokenWithComponent, TokenMap, TokenMapKey } from '../interface';
 import type AbstractCalculator from './calc/calculator';
@@ -84,3 +84,3 @@ import type { UseCSP } from '../hooks/useCSP';
         injectStyle?: boolean;
-    }) => (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+    }) => (prefixCls: string, rootCls?: string) => readonly [string, string];
     genSubStyleComponent: <C_1 extends TokenMapKey<CompTokenMap>>(componentName: C_1 | [C_1, string], styleFn: GenStyleFn<CompTokenMap, AliasToken, C_1>, getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C_1>, options?: {
@@ -115,4 +115,4 @@ resetStyle?: boolean;
         unitless?: Partial<Record<keyof Exclude<import("../interface").OverrideTokenMap<CompTokenMap, AliasToken>[C_2], undefined>, boolean>>;
-    }) => (prefixCls: string, rootCls?: string) => UseComponentStyleResult;
+    }) => (prefixCls: string, rootCls?: string) => string;
 };
 export default genStyleUtils;

lib/util/genStyleUtils.js

@@ -13,3 +13,2 @@ "use strict";
 var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _react = _interopRequireDefault(require("react"));
 var _cssinjs = require("@ant-design/cssinjs");
@@ -58,10 +57,5 @@ var _calc = _interopRequireDefault(require("./calc"));
       var rootCls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : prefixCls;
-      var _useStyle = useStyle(prefixCls, rootCls),
-        _useStyle2 = (0, _slicedToArray2.default)(_useStyle, 2),
-        hashId = _useStyle2[1];
-      var _useCSSVar = useCSSVar(rootCls),
-        _useCSSVar2 = (0, _slicedToArray2.default)(_useCSSVar, 2),
-        wrapCSSVar = _useCSSVar2[0],
-        cssVarCls = _useCSSVar2[1];
-      return [wrapCSSVar, hashId, cssVarCls];
+      var hashId = useStyle(prefixCls, rootCls);
+      var cssVarCls = useCSSVar(rootCls);
+      return [hashId, cssVarCls];
     };
@@ -71,12 +65,9 @@ }
     var compUnitless = options.unitless,
-      _options$injectStyle = options.injectStyle,
-      injectStyle = _options$injectStyle === void 0 ? true : _options$injectStyle,
       prefixToken = options.prefixToken,
       ignore = options.ignore;
-    var CSSVarRegister = function CSSVarRegister(_ref) {
-      var rootCls = _ref.rootCls,
-        _ref$cssVar = _ref.cssVar,
-        cssVar = _ref$cssVar === void 0 ? {} : _ref$cssVar;
+    return function (rootCls) {
       var _useToken = useToken(),
-        realToken = _useToken.realToken;
+        cssVar = _useToken.cssVar;
+      var _useToken2 = useToken(),
+        realToken = _useToken2.realToken;
       (0, _cssinjs.useCSSVarRegister)({
@@ -95,22 +86,12 @@ path: [component],
         });
-        Object.keys(defaultToken).forEach(function (key) {
-          componentToken[prefixToken(key)] = componentToken[key];
-          delete componentToken[key];
-        });
+        if (defaultToken) {
+          Object.keys(defaultToken).forEach(function (key) {
+            componentToken[prefixToken(key)] = componentToken[key];
+            delete componentToken[key];
+          });
+        }
         return componentToken;
       });
-      return null;
+      return cssVar === null || cssVar === void 0 ? void 0 : cssVar.key;
     };
-    var useCSSVar = function useCSSVar(rootCls) {
-      var _useToken2 = useToken(),
-        cssVar = _useToken2.cssVar;
-      return [function (node) {
-        return injectStyle && cssVar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CSSVarRegister, {
-          rootCls: rootCls,
-          cssVar: cssVar,
-          component: component
-        }), node) : node;
-      }, cssVar === null || cssVar === void 0 ? void 0 : cssVar.key];
-    };
-    return useCSSVar;
   }
@@ -140,3 +121,3 @@ function genComponentStyleHook(componentName, styleFn, getDefaultToken) {
       var csp = useCSP();
-      var type = cssVar ? 'css' : 'js';
+      var type = 'css';
 
@@ -146,10 +127,8 @@ // Use unique memo to share the result across all instances
         var unitlessCssVar = new Set();
-        if (cssVar) {
-          Object.keys(options.unitless || {}).forEach(function (key) {
-            // Some component proxy the AliasToken (e.g. Image) and some not (e.g. Modal)
-            // We should both pass in `unitlessCssVar` to make sure the CSSVar can be unitless.
-            unitlessCssVar.add((0, _cssinjs.token2CSSVar)(key, cssVar.prefix));
-            unitlessCssVar.add((0, _cssinjs.token2CSSVar)(key, (0, _getCompVarPrefix.default)(component, cssVar.prefix)));
-          });
-        }
+        Object.keys(options.unitless || {}).forEach(function (key) {
+          // Some component proxy the AliasToken (e.g. Image) and some not (e.g. Modal)
+          // We should both pass in `unitlessCssVar` to make sure the CSSVar can be unitless.
+          unitlessCssVar.add((0, _cssinjs.token2CSSVar)(key, cssVar.prefix));
+          unitlessCssVar.add((0, _cssinjs.token2CSSVar)(key, (0, _getCompVarPrefix.default)(component, cssVar.prefix)));
+        });
         return (0, _calc.default)(type, unitlessCssVar);
@@ -191,3 +170,3 @@ }, [type, component, cssVar === null || cssVar === void 0 ? void 0 : cssVar.prefix]);
       }
-      var wrapSSR = (0, _cssinjs.useStyleRegister)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, sharedConfig), {}, {
+      (0, _cssinjs.useStyleRegister)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, sharedConfig), {}, {
         path: [concatComponent, prefixCls, iconPrefixCls]
@@ -206,3 +185,3 @@ }), function () {
         });
-        if (cssVar && defaultComponentToken && (0, _typeof2.default)(defaultComponentToken) === 'object') {
+        if (defaultComponentToken && (0, _typeof2.default)(defaultComponentToken) === 'object') {
           Object.keys(defaultComponentToken).forEach(function (key) {
@@ -218,7 +197,5 @@ defaultComponentToken[key] = "var(".concat((0, _cssinjs.token2CSSVar)(key, (0, _getCompVarPrefix.default)(component, cssVar.prefix)), ")");
           calc: calc,
-          // @ts-ignore
           max: max,
-          // @ts-ignore
           min: min
-        }, cssVar ? defaultComponentToken : componentToken);
+        }, defaultComponentToken);
         var styleInterpolation = styleFn(mergedToken, {
@@ -234,3 +211,3 @@ hashId: hashId,
       });
-      return [wrapSSR, hashId];
+      return hashId;
     };
@@ -245,6 +222,6 @@ }
     }, options));
-    var StyledComponent = function StyledComponent(_ref2) {
-      var prefixCls = _ref2.prefixCls,
-        _ref2$rootCls = _ref2.rootCls,
-        rootCls = _ref2$rootCls === void 0 ? prefixCls : _ref2$rootCls;
+    var StyledComponent = function StyledComponent(_ref) {
+      var prefixCls = _ref.prefixCls,
+        _ref$rootCls = _ref.rootCls,
+        rootCls = _ref$rootCls === void 0 ? prefixCls : _ref$rootCls;
       useStyle(prefixCls, rootCls);
@@ -251,0 +228,0 @@ return null;

package.json

 {
   "name": "@ant-design/cssinjs-utils",
-  "version": "1.1.3",
+  "version": "2.0.0-alpha.0",
   "description": "A cssinjs util library to support Ant Design (antd) and its ecosystem libraries.",
@@ -32,3 +32,3 @@ "keywords": [
     "compile": "father build",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
+    "prepublishOnly": "npm run compile && np --yolo --any-branch --no-publish",
     "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
@@ -35,0 +35,0 @@ "test": "rc-test",

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

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

Worsened metrics

Total package byte prevSize

89441

-2.82%

Lines of code

1996

-2.44%

Number of low quality alerts

1

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes