@ant-design/cssinjs - npm Package Compare versions

Comparing version 1.3.2 to 1.4.0

es/hooks/useStyleRegister.d.ts

@@ -0,7 +1,8 @@
+import type * as CSS from 'csstype';
 import * as React from 'react';
-import type * as CSS from 'csstype';
-import type { HashPriority } from '../StyleContext';
+import type { Theme, Transformer } from '..';
 import type Cache from '../Cache';
-import type { Theme, Transformer } from '..';
 import type Keyframes from '../Keyframes';
+import type { Linter } from '../linters';
+import type { HashPriority } from '../StyleContext';
 declare const SKIP_CHECK = "_skip_check_";
@@ -27,3 +28,2 @@ export declare type CSSProperties = Omit<CSS.PropertiesFallback<number | string>, 'animationName'> & {
 export declare function normalizeStyle(styleStr: string): string;
-export declare let animationStatistics: Record<string, boolean>;
 export interface ParseConfig {
@@ -35,2 +35,3 @@ hashId?: string;
     transformers?: Transformer[];
+    linters?: Linter[];
 }
@@ -40,2 +41,3 @@ export interface ParseInfo {
     injectHash?: boolean;
+    parentSelectors: string[];
 }
@@ -46,3 +48,3 @@ /**
 export declare const _cf: (() => void) | undefined;
-export declare const parseStyle: (interpolation: CSSInterpolation, config?: ParseConfig, { root, injectHash }?: ParseInfo) => [parsedStr: string, effectStyle: Record<string, string>];
+export declare const parseStyle: (interpolation: CSSInterpolation, config?: ParseConfig, { root, injectHash, parentSelectors }?: ParseInfo) => [parsedStr: string, effectStyle: Record<string, string>];
 /**
@@ -49,0 +51,0 @@ * Register a style to the global style sheet.

es/hooks/useStyleRegister.js

@@ -7,12 +7,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-import * as React from 'react';
-import { updateCSS, removeCSS } from "rc-util/es/Dom/dynamicCSS";
+import hash from '@emotion/hash';
 import canUseDom from "rc-util/es/Dom/canUseDom";
-import hash from '@emotion/hash'; // @ts-ignore
+import { removeCSS, updateCSS } from "rc-util/es/Dom/dynamicCSS";
+import * as React from 'react'; // @ts-ignore
 
 import unitless from '@emotion/unitless';
 import { compile, serialize, stringify } from 'stylis';
+import { contentQuotesLinter, hashedAnimationLinter } from "../linters";
+import StyleContext, { ATTR_DEV_CACHE_PATH, ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, CSS_IN_JS_INSTANCE_ID } from "../StyleContext";
+import { 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();
@@ -31,5 +32,4 @@ var SKIP_CHECK = '_skip_check_';
   return _typeof(value) === 'object' && value && SKIP_CHECK in value;
-}
+} // 注入 hash 值
 
-export var animationStatistics = {}; // 注入 hash 值
 
@@ -72,6 +72,8 @@ function injectSelectorHash(key, hashId, hashPriority) {
   var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
-    root: true
+    root: true,
+    parentSelectors: []
   },
       root = _ref.root,
-      injectHash = _ref.injectHash;
+      injectHash = _ref.injectHash,
+      parentSelectors = _ref.parentSelectors;
 
@@ -83,3 +85,5 @@ var hashId = config.hashId,
       _config$transformers = config.transformers,
-      transformers = _config$transformers === void 0 ? [] : _config$transformers;
+      transformers = _config$transformers === void 0 ? [] : _config$transformers,
+      _config$linters = config.linters,
+      linters = _config$linters === void 0 ? [] : _config$linters;
   var styleStr = '';
@@ -93,3 +97,4 @@ var effectStyle = {};
       var _parseStyle = parseStyle(keyframes.style, config, {
-        root: false
+        root: false,
+        parentSelectors: parentSelectors
       }),
@@ -160,7 +165,6 @@ _parseStyle2 = _slicedToArray(_parseStyle, 1),
 
-          var _parseStyle3 = parseStyle(value, _objectSpread(_objectSpread({}, config), {}, {
-            path: "".concat(path, " -> ").concat(mergedKey)
-          }), {
+          var _parseStyle3 = parseStyle(value, config, {
             root: nextRoot,
-            injectHash: subInjectHash
+            injectHash: subInjectHash,
+            parentSelectors: [].concat(_toConsumableArray(parentSelectors), [mergedKey])
           }),
@@ -179,5 +183,8 @@ _parseStyle4 = _slicedToArray(_parseStyle3, 2),
           if (process.env.NODE_ENV !== 'production' && (_typeof(value) !== 'object' || !(value !== null && value !== void 0 && value[SKIP_CHECK]))) {
-            styleValidate(key, actualValue, {
-              path: path,
-              hashId: hashId
+            [contentQuotesLinter, hashedAnimationLinter].concat(_toConsumableArray(linters)).forEach(function (linter) {
+              return linter(key, actualValue, {
+                path: path,
+                hashId: hashId,
+                parentSelectors: parentSelectors
+              });
             });
@@ -252,3 +259,4 @@ } // 如果是样式则直接插入
       ssrInline = _React$useContext.ssrInline,
-      transformers = _React$useContext.transformers;
+      transformers = _React$useContext.transformers,
+      linters = _React$useContext.linters;
 
@@ -273,3 +281,4 @@ var tokenKey = token._tokenKey;
       path: path.join('-'),
-      transformers: transformers
+      transformers: transformers,
+      linters: linters
     }),
@@ -281,6 +290,4 @@ _parseStyle6 = _slicedToArray(_parseStyle5, 2),
     var styleStr = normalizeStyle(parsedStyle);
-    var styleId = uniqueHash(fullPath, styleStr); // Clear animation statistics
+    var styleId = uniqueHash(fullPath, styleStr);
 
-    animationStatistics = {};
-
     if (isMergedClientSide) {
@@ -287,0 +294,0 @@ var style = updateCSS(styleStr, styleId, {

es/index.d.ts

@@ -0,11 +1,13 @@
+import useCacheToken from './hooks/useCacheToken';
+import type { CSSInterpolation, CSSObject } from './hooks/useStyleRegister';
 import useStyleRegister, { extractStyle } from './hooks/useStyleRegister';
-import type { CSSObject, CSSInterpolation } from './hooks/useStyleRegister';
-import useCacheToken from './hooks/useCacheToken';
-import { StyleProvider, createCache } from './StyleContext';
 import Keyframes from './Keyframes';
-import type { TokenType, DerivativeFunc } from './theme';
+import type { Linter } from './linters';
+import { logicalPropertiesLinter } from './linters';
+import { createCache, StyleProvider } from './StyleContext';
+import type { DerivativeFunc, TokenType } from './theme';
 import { createTheme, Theme } from './theme';
+import type { Transformer } from './transformers/interface';
 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, };
+export { Theme, createTheme, useStyleRegister, useCacheToken, createCache, StyleProvider, Keyframes, extractStyle, legacyLogicalPropertiesTransformer, logicalPropertiesLinter, };
+export type { TokenType, CSSObject, CSSInterpolation, DerivativeFunc, Transformer, Linter, };

es/index.js

@@ -0,8 +1,10 @@
+import useCacheToken from "./hooks/useCacheToken";
 import useStyleRegister, { extractStyle } from "./hooks/useStyleRegister";
-import useCacheToken from "./hooks/useCacheToken";
-import { StyleProvider, createCache } from "./StyleContext";
 import Keyframes from "./Keyframes";
+import { logicalPropertiesLinter } from "./linters";
+import { createCache, StyleProvider } from "./StyleContext";
 import { createTheme, Theme } from "./theme";
 import legacyLogicalPropertiesTransformer from "./transformers/legacyLogicalProperties";
 export { Theme, createTheme, useStyleRegister, useCacheToken, createCache, StyleProvider, Keyframes, extractStyle, // Transformer
-legacyLogicalPropertiesTransformer };
+legacyLogicalPropertiesTransformer, // Linters
+logicalPropertiesLinter };

es/StyleContext.d.ts

 import * as React from 'react';
 import CacheEntity from './Cache';
+import type { Linter } from './linters/interface';
 import type { Transformer } from './transformers/interface';
@@ -30,2 +31,8 @@ export declare const ATTR_TOKEN = "data-token-hash";
     transformers?: Transformer[];
+    /**
+     * Linters to lint css before inject in document.
+     * Styles will be linted after transforming.
+     * Please note that `linters` do not support dynamic update.
+     */
+    linters?: Linter[];
 }
@@ -32,0 +39,0 @@ declare const StyleContext: React.Context<StyleContextProps>;

es/StyleContext.js

 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children"];
-import * as React from 'react';
 import useMemo from "rc-util/es/hooks/useMemo";
 import isEqual from "rc-util/es/isEqual";
+import * as React from 'react';
 import CacheEntity from "./Cache";
@@ -8,0 +8,0 @@ export var ATTR_TOKEN = 'data-token-hash';

es/util.d.ts

@@ -5,8 +5,3 @@ export declare function flattenToken(token: any): string;
  */
-export declare function token2key(token: any, slat: string): string;
-export declare function warning(message: string, path?: string): void;
-export declare const styleValidate: (key: string, value: string | number | boolean | null | undefined, info?: {
-    path?: string;
-    hashId?: string;
-}) => void;
+export declare function token2key(token: any, salt: string): string;
 export declare function supportLayer(): boolean;

es/util.js

 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import hash from '@emotion/hash';
-import devWarning from "rc-util/es/warning";
-import { updateCSS, removeCSS } from "rc-util/es/Dom/dynamicCSS";
 import canUseDom from "rc-util/es/Dom/canUseDom";
+import { removeCSS, updateCSS } from "rc-util/es/Dom/dynamicCSS";
 export function flattenToken(token) {
@@ -24,118 +23,5 @@ var str = '';
 
-export function token2key(token, slat) {
-  return hash("".concat(slat, "_").concat(flattenToken(token)));
+export function token2key(token, salt) {
+  return hash("".concat(salt, "_").concat(flattenToken(token)));
 }
-export function warning(message, path) {
-  devWarning(false, "[Ant Design CSS-in-JS] ".concat(path ? "Error in '".concat(path, "': ") : '').concat(message));
-}
-export var styleValidate = function styleValidate(key, value) {
-  var info = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var path = info.path,
-      hashId = info.hashId;
-
-  switch (key) {
-    case 'content':
-      // From emotion: https://github.com/emotion-js/emotion/blob/main/packages/serialize/src/index.js#L63
-      var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
-      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':
-    case 'marginRight':
-    case 'paddingLeft':
-    case 'paddingRight':
-    case 'left':
-    case 'right':
-    case 'borderLeft':
-    case 'borderLeftWidth':
-    case 'borderLeftStyle':
-    case 'borderLeftColor':
-    case 'borderRight':
-    case 'borderRightWidth':
-    case 'borderRightStyle':
-    case 'borderRightColor':
-    case 'borderTopLeftRadius':
-    case 'borderTopRightRadius':
-    case 'borderBottomLeftRadius':
-    case 'borderBottomRightRadius':
-      warning("You seem to be using non-logical property '".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 'margin':
-    case 'padding':
-    case 'borderWidth':
-    case 'borderStyle':
-      // case 'borderColor':
-      if (typeof value === 'string') {
-        var valueArr = value.split(' ').map(function (item) {
-          return item.trim();
-        });
-
-        if (valueArr.length === 4 && valueArr[1] !== valueArr[3]) {
-          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':
-    case 'textAlign':
-      if (value === 'left' || value === 'right') {
-        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 'borderRadius':
-      if (typeof value === 'string') {
-        var radiusGroups = value.split('/').map(function (item) {
-          return item.trim();
-        });
-        var invalid = radiusGroups.reduce(function (result, group) {
-          if (result) {
-            return result;
-          }
-
-          var radiusArr = group.split(' ').map(function (item) {
-            return item.trim();
-          }); // borderRadius: '2px 4px'
-
-          if (radiusArr.length >= 2 && radiusArr[0] !== radiusArr[1]) {
-            return true;
-          } // borderRadius: '4px 4px 2px'
-
-
-          if (radiusArr.length === 3 && radiusArr[1] !== radiusArr[2]) {
-            return true;
-          } // borderRadius: '4px 4px 2px 4px'
-
-
-          if (radiusArr.length === 4 && radiusArr[2] !== radiusArr[3]) {
-            return true;
-          }
-
-          return result;
-        }, false);
-
-        if (invalid) {
-          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':
-      if (hashId && value !== 'none') {
-        warning("You seem to be using hashed animation '".concat(value, "', in which case 'animationName' with Keyframe as value is recommended."), path);
-      }
-
-    default:
-      return;
-  }
-};
 var layerKey = "layer-".concat(Date.now(), "-").concat(Math.random()).replace(/\./g, '');
@@ -142,0 +28,0 @@ var layerWidth = '903px';

lib/hooks/useStyleRegister.d.ts

@@ -0,7 +1,8 @@
+import type * as CSS from 'csstype';
 import * as React from 'react';
-import type * as CSS from 'csstype';
-import type { HashPriority } from '../StyleContext';
+import type { Theme, Transformer } from '..';
 import type Cache from '../Cache';
-import type { Theme, Transformer } from '..';
 import type Keyframes from '../Keyframes';
+import type { Linter } from '../linters';
+import type { HashPriority } from '../StyleContext';
 declare const SKIP_CHECK = "_skip_check_";
@@ -27,3 +28,2 @@ export declare type CSSProperties = Omit<CSS.PropertiesFallback<number | string>, 'animationName'> & {
 export declare function normalizeStyle(styleStr: string): string;
-export declare let animationStatistics: Record<string, boolean>;
 export interface ParseConfig {
@@ -35,2 +35,3 @@ hashId?: string;
     transformers?: Transformer[];
+    linters?: Linter[];
 }
@@ -40,2 +41,3 @@ export interface ParseInfo {
     injectHash?: boolean;
+    parentSelectors: string[];
 }
@@ -46,3 +48,3 @@ /**
 export declare const _cf: (() => void) | undefined;
-export declare const parseStyle: (interpolation: CSSInterpolation, config?: ParseConfig, { root, injectHash }?: ParseInfo) => [parsedStr: string, effectStyle: Record<string, string>];
+export declare const parseStyle: (interpolation: CSSInterpolation, config?: ParseConfig, { root, injectHash, parentSelectors }?: ParseInfo) => [parsedStr: string, effectStyle: Record<string, string>];
 /**
@@ -49,0 +51,0 @@ * Register a style to the global style sheet.

lib/hooks/useStyleRegister.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports.animationStatistics = exports._cf = void 0;
+exports._cf = void 0;
 exports.default = useStyleRegister;
@@ -29,10 +29,10 @@ exports.extractStyle = extractStyle;
 
-var React = _interopRequireWildcard(require("react"));
+var _hash = _interopRequireDefault(require("@emotion/hash"));
 
+var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
+
 var _dynamicCSS = require("rc-util/lib/Dom/dynamicCSS");
 
-var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
+var React = _interopRequireWildcard(require("react"));
 
-var _hash = _interopRequireDefault(require("@emotion/hash"));
-
 var _unitless = _interopRequireDefault(require("@emotion/unitless"));
@@ -42,3 +42,3 @@
 
-var _useGlobalCache3 = _interopRequireDefault(require("./useGlobalCache"));
+var _linters = require("../linters");
 
@@ -49,2 +49,4 @@ var _StyleContext = _interopRequireWildcard(require("../StyleContext"));
 
+var _useGlobalCache3 = _interopRequireDefault(require("./useGlobalCache"));
+
 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); }
@@ -69,8 +71,5 @@
   return (0, _typeof2.default)(value) === 'object' && value && SKIP_CHECK in value;
-}
+} // 注入 hash 值
 
-var animationStatistics = {}; // 注入 hash 值
 
-exports.animationStatistics = animationStatistics;
-
 function injectSelectorHash(key, hashId, hashPriority) {
@@ -115,6 +114,8 @@ if (!hashId) {
   var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
-    root: true
+    root: true,
+    parentSelectors: []
   },
       root = _ref.root,
-      injectHash = _ref.injectHash;
+      injectHash = _ref.injectHash,
+      parentSelectors = _ref.parentSelectors;
 
@@ -126,3 +127,5 @@ var hashId = config.hashId,
       _config$transformers = config.transformers,
-      transformers = _config$transformers === void 0 ? [] : _config$transformers;
+      transformers = _config$transformers === void 0 ? [] : _config$transformers,
+      _config$linters = config.linters,
+      linters = _config$linters === void 0 ? [] : _config$linters;
   var styleStr = '';
@@ -136,3 +139,4 @@ var effectStyle = {};
       var _parseStyle = parseStyle(keyframes.style, config, {
-        root: false
+        root: false,
+        parentSelectors: parentSelectors
       }),
@@ -203,7 +207,6 @@ _parseStyle2 = (0, _slicedToArray2.default)(_parseStyle, 1),
 
-          var _parseStyle3 = parseStyle(value, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, config), {}, {
-            path: "".concat(path, " -> ").concat(mergedKey)
-          }), {
+          var _parseStyle3 = parseStyle(value, config, {
             root: nextRoot,
-            injectHash: subInjectHash
+            injectHash: subInjectHash,
+            parentSelectors: [].concat((0, _toConsumableArray2.default)(parentSelectors), [mergedKey])
           }),
@@ -222,5 +225,8 @@ _parseStyle4 = (0, _slicedToArray2.default)(_parseStyle3, 2),
           if (process.env.NODE_ENV !== 'production' && ((0, _typeof2.default)(value) !== 'object' || !(value !== null && value !== void 0 && value[SKIP_CHECK]))) {
-            (0, _util.styleValidate)(key, actualValue, {
-              path: path,
-              hashId: hashId
+            [_linters.contentQuotesLinter, _linters.hashedAnimationLinter].concat((0, _toConsumableArray2.default)(linters)).forEach(function (linter) {
+              return linter(key, actualValue, {
+                path: path,
+                hashId: hashId,
+                parentSelectors: parentSelectors
+              });
             });
@@ -298,3 +304,4 @@ } // 如果是样式则直接插入
       ssrInline = _React$useContext.ssrInline,
-      transformers = _React$useContext.transformers;
+      transformers = _React$useContext.transformers,
+      linters = _React$useContext.linters;
 
@@ -319,3 +326,4 @@ var tokenKey = token._tokenKey;
       path: path.join('-'),
-      transformers: transformers
+      transformers: transformers,
+      linters: linters
     }),
@@ -327,6 +335,4 @@ _parseStyle6 = (0, _slicedToArray2.default)(_parseStyle5, 2),
     var styleStr = normalizeStyle(parsedStyle);
-    var styleId = uniqueHash(fullPath, styleStr); // Clear animation statistics
+    var styleId = uniqueHash(fullPath, styleStr);
 
-    exports.animationStatistics = animationStatistics = {};
-
     if (isMergedClientSide) {
@@ -333,0 +339,0 @@ var style = (0, _dynamicCSS.updateCSS)(styleStr, styleId, {

lib/index.d.ts

@@ -0,11 +1,13 @@
+import useCacheToken from './hooks/useCacheToken';
+import type { CSSInterpolation, CSSObject } from './hooks/useStyleRegister';
 import useStyleRegister, { extractStyle } from './hooks/useStyleRegister';
-import type { CSSObject, CSSInterpolation } from './hooks/useStyleRegister';
-import useCacheToken from './hooks/useCacheToken';
-import { StyleProvider, createCache } from './StyleContext';
 import Keyframes from './Keyframes';
-import type { TokenType, DerivativeFunc } from './theme';
+import type { Linter } from './linters';
+import { logicalPropertiesLinter } from './linters';
+import { createCache, StyleProvider } from './StyleContext';
+import type { DerivativeFunc, TokenType } from './theme';
 import { createTheme, Theme } from './theme';
+import type { Transformer } from './transformers/interface';
 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, };
+export { Theme, createTheme, useStyleRegister, useCacheToken, createCache, StyleProvider, Keyframes, extractStyle, legacyLogicalPropertiesTransformer, logicalPropertiesLinter, };
+export type { TokenType, CSSObject, CSSInterpolation, DerivativeFunc, Transformer, Linter, };

lib/index.js

@@ -52,2 +52,8 @@ "use strict";
 });
+Object.defineProperty(exports, "logicalPropertiesLinter", {
+  enumerable: true,
+  get: function get() {
+    return _linters.logicalPropertiesLinter;
+  }
+});
 Object.defineProperty(exports, "useCacheToken", {
@@ -66,10 +72,12 @@ enumerable: true,
 
+var _useCacheToken = _interopRequireDefault(require("./hooks/useCacheToken"));
+
 var _useStyleRegister = _interopRequireWildcard(require("./hooks/useStyleRegister"));
 
-var _useCacheToken = _interopRequireDefault(require("./hooks/useCacheToken"));
+var _Keyframes = _interopRequireDefault(require("./Keyframes"));
 
+var _linters = require("./linters");
+
 var _StyleContext = require("./StyleContext");
 
-var _Keyframes = _interopRequireDefault(require("./Keyframes"));
-
 var _theme = require("./theme");
@@ -76,0 +84,0 @@

lib/StyleContext.d.ts

 import * as React from 'react';
 import CacheEntity from './Cache';
+import type { Linter } from './linters/interface';
 import type { Transformer } from './transformers/interface';
@@ -30,2 +31,8 @@ export declare const ATTR_TOKEN = "data-token-hash";
     transformers?: Transformer[];
+    /**
+     * Linters to lint css before inject in document.
+     * Styles will be linted after transforming.
+     * Please note that `linters` do not support dynamic update.
+     */
+    linters?: Linter[];
 }
@@ -32,0 +39,0 @@ declare const StyleContext: React.Context<StyleContextProps>;

lib/StyleContext.js

@@ -18,4 +18,2 @@ "use strict";
 
-var React = _interopRequireWildcard(require("react"));
-
 var _useMemo = _interopRequireDefault(require("rc-util/lib/hooks/useMemo"));
@@ -25,2 +23,4 @@
 
+var React = _interopRequireWildcard(require("react"));
+
 var _Cache = _interopRequireDefault(require("./Cache"));
@@ -27,0 +27,0 @@

lib/util.d.ts

@@ -5,8 +5,3 @@ export declare function flattenToken(token: any): string;
  */
-export declare function token2key(token: any, slat: string): string;
-export declare function warning(message: string, path?: string): void;
-export declare const styleValidate: (key: string, value: string | number | boolean | null | undefined, info?: {
-    path?: string;
-    hashId?: string;
-}) => void;
+export declare function token2key(token: any, salt: string): string;
 export declare function supportLayer(): boolean;

lib/util.js

@@ -9,6 +9,4 @@ "use strict";
 exports.flattenToken = flattenToken;
-exports.styleValidate = void 0;
 exports.supportLayer = supportLayer;
 exports.token2key = token2key;
-exports.warning = warning;
 
@@ -19,8 +17,6 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
 
 var _dynamicCSS = require("rc-util/lib/Dom/dynamicCSS");
 
-var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
-
 function flattenToken(token) {
@@ -45,122 +41,6 @@ var str = '';
 
-function token2key(token, slat) {
-  return (0, _hash.default)("".concat(slat, "_").concat(flattenToken(token)));
+function token2key(token, salt) {
+  return (0, _hash.default)("".concat(salt, "_").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;
-
-  switch (key) {
-    case 'content':
-      // From emotion: https://github.com/emotion-js/emotion/blob/main/packages/serialize/src/index.js#L63
-      var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
-      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':
-    case 'marginRight':
-    case 'paddingLeft':
-    case 'paddingRight':
-    case 'left':
-    case 'right':
-    case 'borderLeft':
-    case 'borderLeftWidth':
-    case 'borderLeftStyle':
-    case 'borderLeftColor':
-    case 'borderRight':
-    case 'borderRightWidth':
-    case 'borderRightStyle':
-    case 'borderRightColor':
-    case 'borderTopLeftRadius':
-    case 'borderTopRightRadius':
-    case 'borderBottomLeftRadius':
-    case 'borderBottomRightRadius':
-      warning("You seem to be using non-logical property '".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 'margin':
-    case 'padding':
-    case 'borderWidth':
-    case 'borderStyle':
-      // case 'borderColor':
-      if (typeof value === 'string') {
-        var valueArr = value.split(' ').map(function (item) {
-          return item.trim();
-        });
-
-        if (valueArr.length === 4 && valueArr[1] !== valueArr[3]) {
-          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':
-    case 'textAlign':
-      if (value === 'left' || value === 'right') {
-        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 'borderRadius':
-      if (typeof value === 'string') {
-        var radiusGroups = value.split('/').map(function (item) {
-          return item.trim();
-        });
-        var invalid = radiusGroups.reduce(function (result, group) {
-          if (result) {
-            return result;
-          }
-
-          var radiusArr = group.split(' ').map(function (item) {
-            return item.trim();
-          }); // borderRadius: '2px 4px'
-
-          if (radiusArr.length >= 2 && radiusArr[0] !== radiusArr[1]) {
-            return true;
-          } // borderRadius: '4px 4px 2px'
-
-
-          if (radiusArr.length === 3 && radiusArr[1] !== radiusArr[2]) {
-            return true;
-          } // borderRadius: '4px 4px 2px 4px'
-
-
-          if (radiusArr.length === 4 && radiusArr[2] !== radiusArr[3]) {
-            return true;
-          }
-
-          return result;
-        }, false);
-
-        if (invalid) {
-          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':
-      if (hashId && value !== 'none') {
-        warning("You seem to be using hashed animation '".concat(value, "', in which case 'animationName' with Keyframe as value is recommended."), path);
-      }
-
-    default:
-      return;
-  }
-};
-
-exports.styleValidate = styleValidate;
 var layerKey = "layer-".concat(Date.now(), "-").concat(Math.random()).replace(/\./g, '');
@@ -167,0 +47,0 @@ var layerWidth = '903px';

package.json

 {
   "name": "@ant-design/cssinjs",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Component level cssinjs resolution for antd",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 # @ant-design/cssinjs
 
-[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](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] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
 
@@ -11,6 +11,2 @@ [npm-image]: http://img.shields.io/npm/v/@ant-design/cssinjs.svg?style=flat-square
 [codecov-url]: https://codecov.io/gh/ant-design/cssinjs/branch/master
-[david-url]: https://david-dm.org/ant-design/cssinjs
-[david-image]: https://david-dm.org/ant-design/cssinjs/status.svg?style=flat-square
-[david-dev-url]: https://david-dm.org/ant-design/cssinjs?type=dev
-[david-dev-image]: https://david-dm.org/ant-design/cssinjs/dev-status.svg?style=flat-square
 [download-image]: https://img.shields.io/npm/dm/@ant-design/cssinjs.svg?style=flat-square
@@ -29,3 +25,3 @@ [download-url]: https://npmjs.org/package/@ant-design/cssinjs
 
-https://cssinjs.vercel.app/
+https://ant-design.github.io/cssinjs/
 
@@ -32,0 +28,0 @@ ## Install

No alert changes

Improved metrics

Total package byte prevSize

132449

increased by4.08%

Number of package files

91

increased by35.82%

Lines of code

2872

increased by5.32%

Worsened metrics

Number of lines in readme file

93

decreased by-4.12%

No dependency changes