@react-hive/honey-style 2.1.0 → 2.3.0

package/dist/index.dev.cjs

@@ -1879,6 +1879,9 @@ const CSS_SPACING_PROPERTIES = [
     'paddingRight',
     'paddingBottom',
     'paddingLeft',
+    'paddingBlock',
+    'paddingBlockStart',
+    'paddingBlockEnd',
     'top',
     'right',
     'bottom',
@@ -1957,6 +1960,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   CSS_COLOR_PROPERTIES: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_1__.CSS_COLOR_PROPERTIES),
 /* harmony export */   CSS_SPACING_PROPERTIES: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_1__.CSS_SPACING_PROPERTIES),
 /* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createSpacingMiddleware),
+/* harmony export */   createStackMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createStackMiddleware),
 /* harmony export */   css: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_4__.css),
 /* harmony export */   mediaQuery: () => (/* reexport safe */ _at_rules__WEBPACK_IMPORTED_MODULE_5__.mediaQuery),
 /* harmony export */   processCss: () => (/* reexport safe */ _processor__WEBPACK_IMPORTED_MODULE_3__.processCss)
@@ -1985,7 +1989,8 @@ __webpack_require__.r(__webpack_exports__);
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   createSpacingMiddleware: () => (/* binding */ createSpacingMiddleware)
+/* harmony export */   createSpacingMiddleware: () => (/* binding */ createSpacingMiddleware),
+/* harmony export */   createStackMiddleware: () => (/* binding */ createStackMiddleware)
 /* harmony export */ });
 /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ "./src/css/constants.ts");
 
@@ -1998,18 +2003,38 @@ const createSpacingMiddleware = ({ spacingMultiplier }) => element => {
     if (typeof element.props === 'string' &&
         KEBAB_CASE_SPACING_PROPERTIES.includes(element.props) &&
         typeof element.children === 'string') {
-        const transformed = element.children
-            .split(/\s+/)
-            .map(value => {
-            if (/[a-z%]+$/i.test(value)) {
-                return value;
-            }
-            return `${parseFloat(value) * spacingMultiplier}px`;
-        })
-            .join(' ');
+        // If the whole value contains parentheses, skip entirely (likely calc or var)
+        if (/[()]/.test(element.children)) {
+            return;
+        }
+        const transformedParts = [];
+        const parts = element.children.trim().split(/\s+/);
+        for (const value of parts) {
+            transformedParts.push(
+            // Accept only numeric strings (integers or floats), no units or symbols
+            /^-?\d*\.?\d+$/.test(value) ? `${parseFloat(value) * spacingMultiplier}px` : value);
+        }
+        const transformed = transformedParts.join(' ');
         element.return = `${element.props}:${transformed};`;
     }
 };
+const createStackMiddleware = ({ spacingMultiplier = 0 }) => element => {
+    if (element.parent?.type !== 'rule' || element.type !== '@honey-stack') {
+        return;
+    }
+    const match = element.value.match(`^${element.type}\\s*\\(\\s*([^)]+?)\\s*\\)`);
+    if (!match) {
+        return;
+    }
+    const rawGap = match[1].trim();
+    // Matches values like: 1.5, -2, 10px, 0.25rem, 5%, etc.
+    const hasUnit = /[a-z%]+$/i.test(rawGap);
+    const gapValue = hasUnit ? rawGap : `${parseFloat(rawGap) * spacingMultiplier}px`;
+    const parentSelector = element.parent?.value;
+    // Transform @honey-stack(...) into three normal declarations
+    element.type = 'decl';
+    element.return = `${parentSelector}{display:flex;flex-direction:column;gap:${gapValue};}`;
+};
 
 
 /***/ }),
@@ -2032,7 +2057,11 @@ __webpack_require__.r(__webpack_exports__);
 
 const processCss = (rawCss, selector, { spacingMultiplier = 0 } = {}) => {
     const scopedCss = selector ? `${selector}{${rawCss}}` : rawCss;
-    const middlewares = [(0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createSpacingMiddleware)({ spacingMultiplier }), stylis__WEBPACK_IMPORTED_MODULE_1__.stringify];
+    const middlewares = [
+        (0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createSpacingMiddleware)({ spacingMultiplier }),
+        (0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createStackMiddleware)({ spacingMultiplier }),
+        stylis__WEBPACK_IMPORTED_MODULE_1__.stringify,
+    ];
     return (0,stylis__WEBPACK_IMPORTED_MODULE_1__.serialize)((0,stylis__WEBPACK_IMPORTED_MODULE_2__.compile)(scopedCss), (0,stylis__WEBPACK_IMPORTED_MODULE_3__.middleware)(middlewares));
 };
 
@@ -2798,6 +2827,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   convertHexToHexWithAlpha: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.convertHexToHexWithAlpha),
 /* harmony export */   createGlobalStyle: () => (/* reexport safe */ _global_style__WEBPACK_IMPORTED_MODULE_6__.createGlobalStyle),
 /* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createSpacingMiddleware),
+/* harmony export */   createStackMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createStackMiddleware),
 /* harmony export */   css: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.css),
 /* harmony export */   filterNonHtmlAttrs: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.filterNonHtmlAttrs),
 /* harmony export */   generateId: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.generateId),