@ant-design/cssinjs - npm Package Compare versions

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

es/index.d.ts

@@ -1,4 +0,4 @@
-import useStyleRegister, { extractStyle } from './useStyleRegister';
-import type { CSSObject, CSSInterpolation } from './useStyleRegister';
-import useCacheToken from './useCacheToken';
+import useStyleRegister, { extractStyle } from './hooks/useStyleRegister';
+import type { CSSObject, CSSInterpolation } from './hooks/useStyleRegister';
+import useCacheToken from './hooks/useCacheToken';
 import { StyleProvider, createCache } from './StyleContext';
@@ -5,0 +5,0 @@ import Keyframes from './Keyframes';

es/index.js

@@ -1,3 +0,3 @@
-import useStyleRegister, { extractStyle } from './useStyleRegister';
-import useCacheToken from './useCacheToken';
+import useStyleRegister, { extractStyle } from './hooks/useStyleRegister';
+import useCacheToken from './hooks/useCacheToken';
 import { StyleProvider, createCache } from './StyleContext';
@@ -4,0 +4,0 @@ import Keyframes from './Keyframes';

es/Keyframes.d.ts

@@ -1,2 +0,2 @@
-import type { CSSInterpolation } from './useStyleRegister';
+import type { CSSInterpolation } from './hooks/useStyleRegister';
 declare class Keyframe {
@@ -3,0 +3,0 @@ private name;

es/theme/createTheme.d.ts

 import Theme from './Theme';
-import { DerivativeFunc, TokenType } from '@/theme/interface';
+import type { DerivativeFunc, TokenType } from '@/theme/interface';
 /**
@@ -4,0 +4,0 @@ * Same as new Theme, but will always return same one if `derivative` not changed.

es/util.d.ts

@@ -11,1 +11,2 @@ export declare function flattenToken(token: any): string;
 }) => void;
+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";
 export function flattenToken(token) {
@@ -137,2 +139,33 @@ var str = '';
   }
-};
+};
+var canLayer = undefined;
+var layerKey = "layer-".concat(Date.now(), "-").concat(Math.random()).replace(/\./g, '');
+var layerWidth = '903px';
+export function supportLayer() {
+  if (canLayer === undefined) {
+    if (canUseDom()) {
+      var _ele$parentNode;
+
+      updateCSS("@layer ".concat(layerKey, " { .").concat(layerKey, " { width: ").concat(layerWidth, "; } }"), layerKey);
+      var ele = document.createElement('div');
+      ele.style.position = 'fixed';
+      ele.style.left = '0';
+      ele.style.top = '0';
+      ele.className = layerKey;
+      document.body.appendChild(ele);
+
+      if (process.env.NODE_ENV !== 'production') {
+        ele.innerHTML = 'Test';
+        ele.style.zIndex = '9999999';
+      }
+
+      canLayer = getComputedStyle(ele).width === layerWidth;
+      (_ele$parentNode = ele.parentNode) === null || _ele$parentNode === void 0 ? void 0 : _ele$parentNode.removeChild(ele);
+      removeCSS(layerKey);
+    } else {
+      canLayer = false;
+    }
+  }
+
+  return canLayer;
+}

lib/index.d.ts

@@ -1,4 +0,4 @@
-import useStyleRegister, { extractStyle } from './useStyleRegister';
-import type { CSSObject, CSSInterpolation } from './useStyleRegister';
-import useCacheToken from './useCacheToken';
+import useStyleRegister, { extractStyle } from './hooks/useStyleRegister';
+import type { CSSObject, CSSInterpolation } from './hooks/useStyleRegister';
+import useCacheToken from './hooks/useCacheToken';
 import { StyleProvider, createCache } from './StyleContext';
@@ -5,0 +5,0 @@ import Keyframes from './Keyframes';

lib/index.js

@@ -5,3 +5,3 @@ "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
@@ -60,5 +60,5 @@ Object.defineProperty(exports, "__esModule", {
 
-var _useStyleRegister = _interopRequireWildcard(require("./useStyleRegister"));
+var _useStyleRegister = _interopRequireWildcard(require("./hooks/useStyleRegister"));
 
-var _useCacheToken = _interopRequireDefault(require("./useCacheToken"));
+var _useCacheToken = _interopRequireDefault(require("./hooks/useCacheToken"));
 
@@ -69,6 +69,2 @@ var _StyleContext = require("./StyleContext");
 
-var _theme = require("./theme");
-
-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; }
+var _theme = require("./theme");

lib/Keyframes.d.ts

@@ -1,2 +0,2 @@
-import type { CSSInterpolation } from './useStyleRegister';
+import type { CSSInterpolation } from './hooks/useStyleRegister';
 declare class Keyframe {
@@ -3,0 +3,0 @@ private name;

lib/StyleContext.js

@@ -5,3 +5,3 @@ "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
@@ -19,6 +19,2 @@ Object.defineProperty(exports, "__esModule", {
 
-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; }
-
 var ATTR_TOKEN = 'data-token-hash';
@@ -25,0 +21,0 @@ exports.ATTR_TOKEN = ATTR_TOKEN;

lib/theme/createTheme.d.ts

 import Theme from './Theme';
-import { DerivativeFunc, TokenType } from '@/theme/interface';
+import type { DerivativeFunc, TokenType } from '@/theme/interface';
 /**
@@ -4,0 +4,0 @@ * Same as new Theme, but will always return same one if `derivative` not changed.

lib/util.d.ts

@@ -11,1 +11,2 @@ export declare function flattenToken(token: any): string;
 }) => void;
+export declare function supportLayer(): boolean;

lib/util.js

@@ -10,2 +10,3 @@ "use strict";
 exports.styleValidate = void 0;
+exports.supportLayer = supportLayer;
 exports.token2key = token2key;
@@ -20,2 +21,6 @@ exports.warning = warning;
 
+var _dynamicCSS = require("rc-util/lib/Dom/dynamicCSS");
+
+var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
+
 function flattenToken(token) {
@@ -159,2 +164,34 @@ var str = '';
 
-exports.styleValidate = styleValidate;
+exports.styleValidate = styleValidate;
+var canLayer = undefined;
+var layerKey = "layer-".concat(Date.now(), "-").concat(Math.random()).replace(/\./g, '');
+var layerWidth = '903px';
+
+function supportLayer() {
+  if (canLayer === undefined) {
+    if ((0, _canUseDom.default)()) {
+      var _ele$parentNode;
+
+      (0, _dynamicCSS.updateCSS)("@layer ".concat(layerKey, " { .").concat(layerKey, " { width: ").concat(layerWidth, "; } }"), layerKey);
+      var ele = document.createElement('div');
+      ele.style.position = 'fixed';
+      ele.style.left = '0';
+      ele.style.top = '0';
+      ele.className = layerKey;
+      document.body.appendChild(ele);
+
+      if (process.env.NODE_ENV !== 'production') {
+        ele.innerHTML = 'Test';
+        ele.style.zIndex = '9999999';
+      }
+
+      canLayer = getComputedStyle(ele).width === layerWidth;
+      (_ele$parentNode = ele.parentNode) === null || _ele$parentNode === void 0 ? void 0 : _ele$parentNode.removeChild(ele);
+      (0, _dynamicCSS.removeCSS)(layerKey);
+    } else {
+      canLayer = false;
+    }
+  }
+
+  return canLayer;
+}

package.json

 {
   "name": "@ant-design/cssinjs",
-  "version": "0.0.0-alpha.45",
+  "version": "0.0.0-alpha.46",
   "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

98192

increased by2.9%

Number of package files

59

increased by7.27%

Lines of code

2133

increased by7.56%

Worsened metrics

Number of low supply chain risk alerts

14

increased by75%

No dependency changes