@ant-design/cssinjs - npm Package Compare versions

Comparing version 1.11.2 to 1.12.0

es/index.d.ts

@@ -15,1 +15,4 @@ import useCacheToken, { getComputedToken } from './hooks/useCacheToken';
 export type { TokenType, CSSObject, CSSInterpolation, DerivativeFunc, Transformer, Linter, };
+export declare const _experimental: {
+    supportModernCSS: () => boolean;
+};

es/index.js

@@ -9,2 +9,3 @@ import useCacheToken, { getComputedToken } from "./hooks/useCacheToken";
 import px2remTransformer from "./transformers/px2rem";
+import { supportLogicProps, supportWhere } from "./util";
 export { Theme, createTheme, useStyleRegister, useCacheToken, createCache, StyleProvider, Keyframes, extractStyle, getComputedToken,
@@ -14,2 +15,7 @@ // Transformer
 // Linters
-logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter };
+logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter };
+export var _experimental = {
+  supportModernCSS: function supportModernCSS() {
+    return supportWhere() && supportLogicProps();
+  }
+};

es/util.d.ts

@@ -7,1 +7,3 @@ export declare function flattenToken(token: any): string;
 export declare function supportLayer(): boolean;
+export declare function supportWhere(): boolean;
+export declare function supportLogicProps(): boolean;

es/util.js

@@ -25,8 +25,10 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 }
-var layerKey = "layer-".concat(Date.now(), "-").concat(Math.random()).replace(/\./g, '');
-var layerWidth = '903px';
-function supportSelector(styleStr, handleElement) {
+var randomSelectorKey = "random-".concat(Date.now(), "-").concat(Math.random()).replace(/\./g, '');
+
+// Magic `content` for detect selector support
+var checkContent = '_bAmBoO_';
+function supportSelector(styleStr, handleElement, supportCheck) {
   if (canUseDom()) {
-    var _ele$parentNode;
-    updateCSS(styleStr, layerKey);
+    var _getComputedStyle$con, _ele$parentNode;
+    updateCSS(styleStr, randomSelectorKey);
     var _ele = document.createElement('div');
@@ -42,5 +44,5 @@ _ele.style.position = 'fixed';
     }
-    var support = getComputedStyle(_ele).width === layerWidth;
+    var support = supportCheck ? supportCheck(_ele) : (_getComputedStyle$con = getComputedStyle(_ele).content) === null || _getComputedStyle$con === void 0 ? void 0 : _getComputedStyle$con.includes(checkContent);
     (_ele$parentNode = _ele.parentNode) === null || _ele$parentNode === void 0 ? void 0 : _ele$parentNode.removeChild(_ele);
-    removeCSS(layerKey);
+    removeCSS(randomSelectorKey);
     return support;
@@ -53,7 +55,27 @@ }
   if (canLayer === undefined) {
-    canLayer = supportSelector("@layer ".concat(layerKey, " { .").concat(layerKey, " { width: ").concat(layerWidth, "!important; } }"), function (ele) {
-      ele.className = layerKey;
+    canLayer = supportSelector("@layer ".concat(randomSelectorKey, " { .").concat(randomSelectorKey, " { content: \"").concat(checkContent, "\"!important; } }"), function (ele) {
+      ele.className = randomSelectorKey;
     });
   }
   return canLayer;
+}
+var canWhere = undefined;
+export function supportWhere() {
+  if (canWhere === undefined) {
+    canWhere = supportSelector(":where(.".concat(randomSelectorKey, ") { content: \"").concat(checkContent, "\"!important; }"), function (ele) {
+      ele.className = randomSelectorKey;
+    });
+  }
+  return canWhere;
+}
+var canLogic = undefined;
+export function supportLogicProps() {
+  if (canLogic === undefined) {
+    canLogic = supportSelector(".".concat(randomSelectorKey, " { inset-block: 93px !important; }"), function (ele) {
+      ele.className = randomSelectorKey;
+    }, function (ele) {
+      return getComputedStyle(ele).bottom === '93px';
+    });
+  }
+  return canLogic;
 }

lib/index.d.ts

@@ -15,1 +15,4 @@ import useCacheToken, { getComputedToken } from './hooks/useCacheToken';
 export type { TokenType, CSSObject, CSSInterpolation, DerivativeFunc, Transformer, Linter, };
+export declare const _experimental: {
+    supportModernCSS: () => boolean;
+};

lib/index.js

@@ -26,2 +26,3 @@ "use strict";
 });
+exports._experimental = void 0;
 Object.defineProperty(exports, "createCache", {
@@ -101,3 +102,10 @@ enumerable: true,
 var _px2rem = _interopRequireDefault(require("./transformers/px2rem"));
+var _util = require("./util");
 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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _experimental = {
+  supportModernCSS: function supportModernCSS() {
+    return (0, _util.supportWhere)() && (0, _util.supportLogicProps)();
+  }
+};
+exports._experimental = _experimental;

lib/util.d.ts

@@ -7,1 +7,3 @@ export declare function flattenToken(token: any): string;
 export declare function supportLayer(): boolean;
+export declare function supportWhere(): boolean;
+export declare function supportLogicProps(): boolean;

lib/util.js

@@ -9,2 +9,4 @@ "use strict";
 exports.supportLayer = supportLayer;
+exports.supportLogicProps = supportLogicProps;
+exports.supportWhere = supportWhere;
 exports.token2key = token2key;
@@ -35,8 +37,10 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 }
-var layerKey = "layer-".concat(Date.now(), "-").concat(Math.random()).replace(/\./g, '');
-var layerWidth = '903px';
-function supportSelector(styleStr, handleElement) {
+var randomSelectorKey = "random-".concat(Date.now(), "-").concat(Math.random()).replace(/\./g, '');
+
+// Magic `content` for detect selector support
+var checkContent = '_bAmBoO_';
+function supportSelector(styleStr, handleElement, supportCheck) {
   if ((0, _canUseDom.default)()) {
-    var _ele$parentNode;
-    (0, _dynamicCSS.updateCSS)(styleStr, layerKey);
+    var _getComputedStyle$con, _ele$parentNode;
+    (0, _dynamicCSS.updateCSS)(styleStr, randomSelectorKey);
     var _ele = document.createElement('div');
@@ -52,5 +56,5 @@ _ele.style.position = 'fixed';
     }
-    var support = getComputedStyle(_ele).width === layerWidth;
+    var support = supportCheck ? supportCheck(_ele) : (_getComputedStyle$con = getComputedStyle(_ele).content) === null || _getComputedStyle$con === void 0 ? void 0 : _getComputedStyle$con.includes(checkContent);
     (_ele$parentNode = _ele.parentNode) === null || _ele$parentNode === void 0 ? void 0 : _ele$parentNode.removeChild(_ele);
-    (0, _dynamicCSS.removeCSS)(layerKey);
+    (0, _dynamicCSS.removeCSS)(randomSelectorKey);
     return support;
@@ -63,7 +67,27 @@ }
   if (canLayer === undefined) {
-    canLayer = supportSelector("@layer ".concat(layerKey, " { .").concat(layerKey, " { width: ").concat(layerWidth, "!important; } }"), function (ele) {
-      ele.className = layerKey;
+    canLayer = supportSelector("@layer ".concat(randomSelectorKey, " { .").concat(randomSelectorKey, " { content: \"").concat(checkContent, "\"!important; } }"), function (ele) {
+      ele.className = randomSelectorKey;
     });
   }
   return canLayer;
+}
+var canWhere = undefined;
+function supportWhere() {
+  if (canWhere === undefined) {
+    canWhere = supportSelector(":where(.".concat(randomSelectorKey, ") { content: \"").concat(checkContent, "\"!important; }"), function (ele) {
+      ele.className = randomSelectorKey;
+    });
+  }
+  return canWhere;
+}
+var canLogic = undefined;
+function supportLogicProps() {
+  if (canLogic === undefined) {
+    canLogic = supportSelector(".".concat(randomSelectorKey, " { inset-block: 93px !important; }"), function (ele) {
+      ele.className = randomSelectorKey;
+    }, function (ele) {
+      return getComputedStyle(ele).bottom === '93px';
+    });
+  }
+  return canLogic;
 }

package.json

 {
   "name": "@ant-design/cssinjs",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "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

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

158416

increased by1.82%

Lines of code

3541

increased by2.02%

No dependency changes