@react-hive/honey-style 2.3.0 → 2.6.0

package/dist/index.dev.cjs

@@ -1886,6 +1886,7 @@ const CSS_SPACING_PROPERTIES = [
     'right',
     'bottom',
     'left',
+    'inset',
     'gap',
     'rowGap',
     'columnGap',
@@ -1959,15 +1960,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__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 */   createAbsoluteFillAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createAbsoluteFillAtRuleMiddleware),
+/* harmony export */   createCenterAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createCenterAtRuleMiddleware),
+/* harmony export */   createInlineAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createInlineAtRuleMiddleware),
 /* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createSpacingMiddleware),
-/* harmony export */   createStackMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createStackMiddleware),
+/* harmony export */   createStackAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createStackAtRuleMiddleware),
 /* 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)
 /* harmony export */ });
 /* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./types */ "./src/css/types.ts");
 /* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ "./src/css/constants.ts");
-/* harmony import */ var _middlewares__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./middlewares */ "./src/css/middlewares.ts");
+/* harmony import */ var _middlewares__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./middlewares */ "./src/css/middlewares/index.ts");
 /* harmony import */ var _processor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./processor */ "./src/css/processor.ts");
 /* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./css */ "./src/css/css.ts");
 /* harmony import */ var _at_rules__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./at-rules */ "./src/css/at-rules/index.ts");
@@ -1981,23 +1985,172 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./src/css/middlewares.ts":
-/*!********************************!*\
-  !*** ./src/css/middlewares.ts ***!
-  \********************************/
+/***/ "./src/css/middlewares/absolute-fill-at-rule.ts":
+/*!******************************************************!*\
+  !*** ./src/css/middlewares/absolute-fill-at-rule.ts ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   createAbsoluteFillAtRuleMiddleware: () => (/* binding */ createAbsoluteFillAtRuleMiddleware)
+/* harmony export */ });
+/* harmony import */ var _factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./factory */ "./src/css/middlewares/factory.ts");
+
+const createAbsoluteFillAtRuleMiddleware = () => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
+    name: 'absolute-fill',
+    transform: () => 'position:absolute;top:0;right:0;bottom:0;left:0;',
+});
+
+
+/***/ }),
+
+/***/ "./src/css/middlewares/center-at-rule.ts":
+/*!***********************************************!*\
+  !*** ./src/css/middlewares/center-at-rule.ts ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   createCenterAtRuleMiddleware: () => (/* binding */ createCenterAtRuleMiddleware)
+/* harmony export */ });
+/* harmony import */ var _factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./factory */ "./src/css/middlewares/factory.ts");
+
+const createCenterAtRuleMiddleware = () => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
+    name: 'center',
+    transform: () => 'display:flex;align-items:center;justify-content:center;',
+});
+
+
+/***/ }),
+
+/***/ "./src/css/middlewares/factory.ts":
+/*!****************************************!*\
+  !*** ./src/css/middlewares/factory.ts ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   createAtRuleMiddleware: () => (/* binding */ createAtRuleMiddleware)
+/* harmony export */ });
+/* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Serializer.js");
+/* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Parser.js");
+
+/**
+ * Creates a Stylis middleware that transforms a custom @honey-* at-rule
+ * into standard CSS declarations. It supports optional arguments via parentheses
+ * and nested rule content.
+ *
+ * @example
+ * // For @honey-stack(2) { gap: 1; }
+ * createAtRuleMiddleware({
+ *   name: 'stack',
+ *   transform: args => `display:flex;gap:${parseFloat(args || '0') * 8}px;`
+ * });
+ *
+ * @param options - Middleware creation options.
+ *
+ * @returns A Stylis middleware function.
+ */
+const createAtRuleMiddleware = ({ name, transform, }) => {
+    return (element, _i, _children, callback) => {
+        if (element.parent?.type !== 'rule' || element.type !== `@honey-${name}`) {
+            return;
+        }
+        const parentSelector = element.parent?.value;
+        if (!parentSelector) {
+            return;
+        }
+        const argsMatch = element.value
+            .trim()
+            .match(new RegExp(`^${element.type}\\s*\\(\\s*([^)]+?)\\s*\\)\\s*;?$`, 'i'));
+        const args = argsMatch ? argsMatch[1].trim() : undefined;
+        const transformedCSS = transform(args, element, name);
+        const serializedChildren = Array.isArray(element.children)
+            ? (0,stylis__WEBPACK_IMPORTED_MODULE_0__.serialize)(element.children, callback)
+            : '';
+        element.type = 'decl';
+        element.return = (0,stylis__WEBPACK_IMPORTED_MODULE_0__.serialize)((0,stylis__WEBPACK_IMPORTED_MODULE_1__.compile)(`${parentSelector}{${transformedCSS}${serializedChildren}}`), callback);
+    };
+};
+
+
+/***/ }),
+
+/***/ "./src/css/middlewares/index.ts":
+/*!**************************************!*\
+  !*** ./src/css/middlewares/index.ts ***!
+  \**************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   createAbsoluteFillAtRuleMiddleware: () => (/* reexport safe */ _absolute_fill_at_rule__WEBPACK_IMPORTED_MODULE_4__.createAbsoluteFillAtRuleMiddleware),
+/* harmony export */   createCenterAtRuleMiddleware: () => (/* reexport safe */ _center_at_rule__WEBPACK_IMPORTED_MODULE_3__.createCenterAtRuleMiddleware),
+/* harmony export */   createInlineAtRuleMiddleware: () => (/* reexport safe */ _inline_at_rule__WEBPACK_IMPORTED_MODULE_2__.createInlineAtRuleMiddleware),
+/* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _spacing__WEBPACK_IMPORTED_MODULE_0__.createSpacingMiddleware),
+/* harmony export */   createStackAtRuleMiddleware: () => (/* reexport safe */ _stack_at_rule__WEBPACK_IMPORTED_MODULE_1__.createStackAtRuleMiddleware)
+/* harmony export */ });
+/* harmony import */ var _spacing__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./spacing */ "./src/css/middlewares/spacing.ts");
+/* harmony import */ var _stack_at_rule__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./stack-at-rule */ "./src/css/middlewares/stack-at-rule.ts");
+/* harmony import */ var _inline_at_rule__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./inline-at-rule */ "./src/css/middlewares/inline-at-rule.ts");
+/* harmony import */ var _center_at_rule__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./center-at-rule */ "./src/css/middlewares/center-at-rule.ts");
+/* harmony import */ var _absolute_fill_at_rule__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./absolute-fill-at-rule */ "./src/css/middlewares/absolute-fill-at-rule.ts");
+
+
+
+
+
+
+
+/***/ }),
+
+/***/ "./src/css/middlewares/inline-at-rule.ts":
+/*!***********************************************!*\
+  !*** ./src/css/middlewares/inline-at-rule.ts ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   createInlineAtRuleMiddleware: () => (/* binding */ createInlineAtRuleMiddleware)
+/* harmony export */ });
+/* harmony import */ var _factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./factory */ "./src/css/middlewares/factory.ts");
+
+const createInlineAtRuleMiddleware = ({ spacingMultiplier = 0, } = {}) => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
+    name: 'inline',
+    transform: args => {
+        const declarations = ['display:flex;', 'align-items:center;'];
+        if (args) {
+            const isNumber = /^-?\d*\.?\d+$/.test(args);
+            const gap = isNumber ? `${parseFloat(args) * spacingMultiplier}px` : args;
+            declarations.push(`gap:${gap};`);
+        }
+        return declarations.join('');
+    },
+});
+
+
+/***/ }),
+
+/***/ "./src/css/middlewares/spacing.ts":
+/*!****************************************!*\
+  !*** ./src/css/middlewares/spacing.ts ***!
+  \****************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   createSpacingMiddleware: () => (/* binding */ createSpacingMiddleware),
-/* harmony export */   createStackMiddleware: () => (/* binding */ createStackMiddleware)
+/* harmony export */   createSpacingMiddleware: () => (/* binding */ createSpacingMiddleware)
 /* harmony export */ });
-/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./constants */ "./src/css/constants.ts");
+/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants */ "./src/css/constants.ts");
 
 const toKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 const KEBAB_CASE_SPACING_PROPERTIES = _constants__WEBPACK_IMPORTED_MODULE_0__.CSS_SPACING_PROPERTIES.map(toKebabCase);
-const createSpacingMiddleware = ({ spacingMultiplier }) => element => {
-    if (!spacingMultiplier || element.type !== 'decl') {
+const createSpacingMiddleware = ({ spacingMultiplier = 0 }) => element => {
+    if (element.type !== 'decl') {
         return;
     }
     if (typeof element.props === 'string' &&
@@ -2018,23 +2171,34 @@ const createSpacingMiddleware = ({ spacingMultiplier }) => element => {
         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};}`;
-};
+
+
+/***/ }),
+
+/***/ "./src/css/middlewares/stack-at-rule.ts":
+/*!**********************************************!*\
+  !*** ./src/css/middlewares/stack-at-rule.ts ***!
+  \**********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   createStackAtRuleMiddleware: () => (/* binding */ createStackAtRuleMiddleware)
+/* harmony export */ });
+/* harmony import */ var _factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./factory */ "./src/css/middlewares/factory.ts");
+
+const createStackAtRuleMiddleware = ({ spacingMultiplier = 0, }) => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
+    name: 'stack',
+    transform: args => {
+        const declarations = ['display:flex;', 'flex-direction:column;'];
+        if (args) {
+            const isNumber = /^-?\d*\.?\d+$/.test(args);
+            const gap = isNumber ? `${parseFloat(args) * spacingMultiplier}px` : args;
+            declarations.push(`gap:${gap};`);
+        }
+        return declarations.join('');
+    },
+});
 
 
 /***/ }),
@@ -2052,14 +2216,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Serializer.js");
 /* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Parser.js");
 /* harmony import */ var stylis__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! stylis */ "./node_modules/stylis/src/Middleware.js");
-/* harmony import */ var _middlewares__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./middlewares */ "./src/css/middlewares.ts");
+/* harmony import */ var _middlewares__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./middlewares */ "./src/css/middlewares/index.ts");
 
 
-const processCss = (rawCss, selector, { spacingMultiplier = 0 } = {}) => {
+const processCss = (rawCss, selector, { spacingMultiplier } = {}) => {
     const scopedCss = selector ? `${selector}{${rawCss}}` : rawCss;
     const middlewares = [
+        (0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createStackAtRuleMiddleware)({ spacingMultiplier }),
+        (0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createInlineAtRuleMiddleware)({ spacingMultiplier }),
+        (0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createCenterAtRuleMiddleware)(),
+        (0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createAbsoluteFillAtRuleMiddleware)(),
         (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));
@@ -2825,9 +2992,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   checkIsThemeColorValue: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.checkIsThemeColorValue),
 /* harmony export */   combineClassNames: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.combineClassNames),
 /* harmony export */   convertHexToHexWithAlpha: () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_8__.convertHexToHexWithAlpha),
+/* harmony export */   createAbsoluteFillAtRuleMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createAbsoluteFillAtRuleMiddleware),
+/* harmony export */   createCenterAtRuleMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createCenterAtRuleMiddleware),
 /* harmony export */   createGlobalStyle: () => (/* reexport safe */ _global_style__WEBPACK_IMPORTED_MODULE_6__.createGlobalStyle),
+/* harmony export */   createInlineAtRuleMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createInlineAtRuleMiddleware),
 /* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createSpacingMiddleware),
-/* harmony export */   createStackMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createStackMiddleware),
+/* harmony export */   createStackAtRuleMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createStackAtRuleMiddleware),
 /* 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),