@react-hive/honey-style 3.0.0 → 3.1.0

package/dist/index.dev.cjs

@@ -871,25 +871,31 @@ const css = (strings, ...interpolations) => {
 };
 const createCssRule = (selector, css) => `${selector}{${css}}`;
 const getChildrenCss = (element, callback) => (0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_0__.isArray)(element.children) ? (0,stylis__WEBPACK_IMPORTED_MODULE_1__.serialize)(element.children, callback) : element.children;
+/**
+ * Splits Stylis children into:
+ *
+ * - pseudoRules: rules that start with a pseudo selector (e.g. ":hover", ":not(...)")
+ * - otherRules: everything else
+ */
 const splitStylisChildren = (children) => {
     if (!(0,_react_hive_honey_utils__WEBPACK_IMPORTED_MODULE_0__.isArray)(children) || children.length === 0) {
         return {
-            declarations: [],
-            other: [],
+            pseudoRules: [],
+            otherRules: [],
         };
     }
-    return children.reduce((result, child) => {
-        if (child.type === 'decl') {
-            result.declarations.push(child);
-            //
+    return children.reduce((groups, child) => {
+        const isPseudoRule = child.value.startsWith('&');
+        if (isPseudoRule) {
+            groups.pseudoRules.push(child);
         }
         else {
-            result.other.push(child);
+            groups.otherRules.push(child);
         }
-        return result;
+        return groups;
     }, {
-        declarations: [],
-        other: [],
+        pseudoRules: [],
+        otherRules: [],
     });
 };
 
@@ -1259,7 +1265,7 @@ const createMediaAtRuleMiddleware = ({ theme }) => (0,_factory__WEBPACK_IMPORTED
             return null;
         }
         const childrenGroups = (0,_css__WEBPACK_IMPORTED_MODULE_4__.splitStylisChildren)(element.children);
-        if (!childrenGroups.declarations.length && !childrenGroups.other.length) {
+        if (!childrenGroups.pseudoRules.length && !childrenGroups.otherRules.length) {
             return null;
         }
         const mediaQueryRules = [];
@@ -1313,13 +1319,13 @@ const createMediaAtRuleMiddleware = ({ theme }) => (0,_factory__WEBPACK_IMPORTED
             orientation,
             mediaType,
         }));
-        const nestedRulesCss = childrenGroups.other.length > 0
-            ? `${parent.value}${(0,stylis__WEBPACK_IMPORTED_MODULE_0__.serialize)(childrenGroups.other, callback)}`
+        const pseudoSelectorCss = childrenGroups.pseudoRules.length > 0
+            ? `${parent.value}${(0,stylis__WEBPACK_IMPORTED_MODULE_0__.serialize)(childrenGroups.pseudoRules, callback)}`
             : '';
-        const declarationCss = childrenGroups.declarations.length > 0
-            ? (0,_css__WEBPACK_IMPORTED_MODULE_4__.createCssRule)(parent.value, (0,stylis__WEBPACK_IMPORTED_MODULE_0__.serialize)(childrenGroups.declarations, callback))
+        const nestedSelectorCss = childrenGroups.otherRules.length > 0
+            ? (0,_css__WEBPACK_IMPORTED_MODULE_4__.createCssRule)(parent.value, (0,stylis__WEBPACK_IMPORTED_MODULE_0__.serialize)(childrenGroups.otherRules, callback))
             : '';
-        return (0,_css__WEBPACK_IMPORTED_MODULE_4__.createCssRule)((0,_at_rules__WEBPACK_IMPORTED_MODULE_3__.mediaQuery)(finalMediaQueryRules), `${nestedRulesCss}${declarationCss}`);
+        return (0,_css__WEBPACK_IMPORTED_MODULE_4__.createCssRule)((0,_at_rules__WEBPACK_IMPORTED_MODULE_3__.mediaQuery)(finalMediaQueryRules), `${pseudoSelectorCss}${nestedSelectorCss}`);
     },
 });