@ant-design/cssinjs - npm Package Compare versions

Comparing version 0.0.0-alpha.12 to 0.0.0-alpha.15

es/useStyleRegister.js

@@ -15,2 +15,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import StyleContext, { ATTR_MARK, ATTR_TOKEN } from './StyleContext';
+import { styleValidate } from './util';
 var isClientSide = canUseDom(); // ============================================================================
@@ -66,3 +67,7 @@ // ==                                 Parser                                 ==
         } else {
-          // 如果是样式则直接插入
+          if (process.env.NODE_ENV !== 'production') {
+            styleValidate(key, value);
+          } // 如果是样式则直接插入
+
+
           var styleName = key.replace(/[A-Z]/g, function (match) {
@@ -69,0 +74,0 @@ return "-".concat(match.toLowerCase());

es/util.d.ts

@@ -6,1 +6,2 @@ export declare function flattenToken(token: any): string;
 export declare function token2key(token: any, slat: string): string;
+export declare const styleValidate: (key: string, value: string | number | boolean | null | undefined) => void;

es/util.js

 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import hash from '@emotion/hash';
+import devWarning from "rc-util/es/warning";
 export function flattenToken(token) {
@@ -23,2 +24,104 @@ var str = '';
   return hash("".concat(slat, "_").concat(flattenToken(token)));
-}
+}
+export var styleValidate = function styleValidate(key, value) {
+  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) !== "'")) {
+        devWarning(false, "You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"".concat(value, "\"'`"));
+      }
+
+      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':
+      devWarning(false, "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."));
+      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]) {
+          devWarning(false, "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."));
+        }
+      }
+
+      return;
+
+    case 'float':
+    case 'clear':
+    case 'textAlign':
+      if (value === 'left' || value === 'right') {
+        devWarning(false, "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."));
+      }
+
+      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) {
+          devWarning(false, "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."));
+        }
+      }
+
+      return;
+
+    default:
+      return;
+  }
+};

lib/useStyleRegister.js

@@ -40,2 +40,4 @@ "use strict";
 
+var _util = require("./util");
+
 // @ts-ignore
@@ -92,3 +94,7 @@ var isClientSide = (0, _canUseDom.default)(); // ============================================================================
         } else {
-          // 如果是样式则直接插入
+          if (process.env.NODE_ENV !== 'production') {
+            (0, _util.styleValidate)(key, value);
+          } // 如果是样式则直接插入
+
+
           var styleName = key.replace(/[A-Z]/g, function (match) {
@@ -95,0 +101,0 @@ return "-".concat(match.toLowerCase());

lib/util.d.ts

@@ -6,1 +6,2 @@ export declare function flattenToken(token: any): string;
 export declare function token2key(token: any, slat: string): string;
+export declare const styleValidate: (key: string, value: string | number | boolean | null | undefined) => void;

lib/util.js

@@ -9,2 +9,3 @@ "use strict";
 exports.flattenToken = flattenToken;
+exports.styleValidate = void 0;
 exports.token2key = token2key;
@@ -16,2 +17,4 @@
 
+var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+
 function flattenToken(token) {
@@ -38,2 +41,107 @@ var str = '';
   return (0, _hash.default)("".concat(slat, "_").concat(flattenToken(token)));
-}
+}
+
+var styleValidate = function styleValidate(key, value) {
+  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) !== "'")) {
+        (0, _warning.default)(false, "You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"".concat(value, "\"'`"));
+      }
+
+      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':
+      (0, _warning.default)(false, "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."));
+      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]) {
+          (0, _warning.default)(false, "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."));
+        }
+      }
+
+      return;
+
+    case 'float':
+    case 'clear':
+    case 'textAlign':
+      if (value === 'left' || value === 'right') {
+        (0, _warning.default)(false, "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."));
+      }
+
+      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) {
+          (0, _warning.default)(false, "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."));
+        }
+      }
+
+      return;
+
+    default:
+      return;
+  }
+};
+
+exports.styleValidate = styleValidate;

package.json

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

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

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

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

60315

increased by16.84%

Lines of code

1279

increased by16.59%

Worsened metrics

Number of low supply chain risk alerts

4

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes