@ant-design/cssinjs - npm Package Compare versions

Comparing version 0.0.0-alpha.37 to 0.0.0-alpha.38

es/useStyleRegister.js

@@ -71,4 +71,6 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-          var mergedKey = key.trim(); // 拆分多个选择器
+          var mergedKey = key.trim(); // Whether treat child as root. In most case it is false.
 
+          var nextRoot = false; // 拆分多个选择器
+
           if ((root || injectHash) && hashId) {
@@ -85,5 +87,13 @@ if (mergedKey.startsWith('@')) {
             }
+          } else if (root && !hashId && (mergedKey === '&' || mergedKey === '')) {
+            // In case of `{ '&': { a: { color: 'red' } } }` or `{ '': { a: { color: 'red' } } }` without hashId,
+            // we will get `&{a:{color:red;}}` or `{a:{color:red;}}` string for stylis to compile.
+            // But it does not conform to stylis syntax,
+            // and finally we will get `{color:red;}` as css, which is wrong.
+            // So we need to remove key in root, and treat child `{ a: { color: 'red' } }` as root.
+            mergedKey = '';
+            nextRoot = true;
           }
 
-          styleStr += "".concat(mergedKey).concat(parseStyle(value, hashId, "".concat(path, " -> ").concat(mergedKey), false, subInjectHash));
+          styleStr += "".concat(mergedKey).concat(parseStyle(value, hashId, "".concat(path, " -> ").concat(mergedKey), nextRoot, subInjectHash));
         } else {
@@ -90,0 +100,0 @@ var _value$value;

lib/useStyleRegister.js

@@ -105,4 +105,6 @@ "use strict";
 
-          var mergedKey = key.trim(); // 拆分多个选择器
+          var mergedKey = key.trim(); // Whether treat child as root. In most case it is false.
 
+          var nextRoot = false; // 拆分多个选择器
+
           if ((root || injectHash) && hashId) {
@@ -119,5 +121,13 @@ if (mergedKey.startsWith('@')) {
             }
+          } else if (root && !hashId && (mergedKey === '&' || mergedKey === '')) {
+            // In case of `{ '&': { a: { color: 'red' } } }` or `{ '': { a: { color: 'red' } } }` without hashId,
+            // we will get `&{a:{color:red;}}` or `{a:{color:red;}}` string for stylis to compile.
+            // But it does not conform to stylis syntax,
+            // and finally we will get `{color:red;}` as css, which is wrong.
+            // So we need to remove key in root, and treat child `{ a: { color: 'red' } }` as root.
+            mergedKey = '';
+            nextRoot = true;
           }
 
-          styleStr += "".concat(mergedKey).concat(parseStyle(value, hashId, "".concat(path, " -> ").concat(mergedKey), false, subInjectHash));
+          styleStr += "".concat(mergedKey).concat(parseStyle(value, hashId, "".concat(path, " -> ").concat(mergedKey), nextRoot, subInjectHash));
         } else {
@@ -124,0 +134,0 @@ var _value$value;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

82080

increased by1.69%

Lines of code

1627

increased by1.12%

No dependency changes