@react-hive/honey-style 2.6.0 → 2.7.0

package/dist/index.dev.cjs

@@ -1962,6 +1962,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 */   createEllipsisAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createEllipsisAtRuleMiddleware),
 /* harmony export */   createInlineAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createInlineAtRuleMiddleware),
 /* harmony export */   createSpacingMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createSpacingMiddleware),
 /* harmony export */   createStackAtRuleMiddleware: () => (/* reexport safe */ _middlewares__WEBPACK_IMPORTED_MODULE_2__.createStackAtRuleMiddleware),
@@ -1999,7 +2000,10 @@ __webpack_require__.r(__webpack_exports__);
 
 const createAbsoluteFillAtRuleMiddleware = () => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
     name: 'absolute-fill',
-    transform: () => 'position:absolute;top:0;right:0;bottom:0;left:0;',
+    transform: () => {
+        const declarations = ['position:absolute;', 'inset:0;'];
+        return declarations.join('');
+    },
 });
 
 
@@ -2019,7 +2023,56 @@ __webpack_require__.r(__webpack_exports__);
 
 const createCenterAtRuleMiddleware = () => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
     name: 'center',
-    transform: () => 'display:flex;align-items:center;justify-content:center;',
+    transform: (args = []) => {
+        const declarations = [];
+        switch (args[0]) {
+            case 'horizontal':
+            case 'x':
+                declarations.push('display:flex;', 'justify-content:center;');
+                break;
+            case 'vertical':
+            case 'y':
+                declarations.push('display:flex;', 'align-items:center;');
+                break;
+            case 'block':
+                declarations.push('display:block;', 'text-align:center;');
+                break;
+            case 'inline':
+                declarations.push('display:inline-flex;', 'align-items:center;', 'justify-content:center;');
+                break;
+            default:
+                declarations.push('display:flex;', 'align-items:center;', 'justify-content:center;');
+                break;
+        }
+        return declarations.join('');
+    },
+});
+
+
+/***/ }),
+
+/***/ "./src/css/middlewares/ellipsis-at-rule.ts":
+/*!*************************************************!*\
+  !*** ./src/css/middlewares/ellipsis-at-rule.ts ***!
+  \*************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   createEllipsisAtRuleMiddleware: () => (/* binding */ createEllipsisAtRuleMiddleware)
+/* harmony export */ });
+/* harmony import */ var _factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./factory */ "./src/css/middlewares/factory.ts");
+
+const createEllipsisAtRuleMiddleware = () => (0,_factory__WEBPACK_IMPORTED_MODULE_0__.createAtRuleMiddleware)({
+    name: 'ellipsis',
+    transform: () => {
+        const declarations = [
+            'white-space:nowrap;',
+            'overflow:hidden;',
+            'text-overflow:ellipsis;',
+        ];
+        return declarations.join('');
+    },
 });
 
 
@@ -2039,20 +2092,42 @@ __webpack_require__.r(__webpack_exports__);
 /* 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.
+ * Creates a Stylis middleware for transforming custom `@honey-*` at-rules into
+ * regular CSS declarations.
  *
- * @example
- * // For @honey-stack(2) { gap: 1; }
+ * This utility enables the definition of expressive, domain-specific at-rules
+ * such as `@honey-stack`, `@honey-inline`, or `@honey-center`, which can then be
+ * expanded into valid CSS at build time.
+ *
+ * Supports optional arguments passed via parentheses (e.g., `@honey-stack(2)`),
+ * as well as nested rule bodies (e.g., `@honey-stack { .child { ... } }`).
+ *
+ * ---
+ *
+ * ### Example
+ * ```ts
  * createAtRuleMiddleware({
  *   name: 'stack',
- *   transform: args => `display:flex;gap:${parseFloat(args || '0') * 8}px;`
+ *   transform: args => {
+ *     const gap = parseFloat(args?.[0] ?? '0') * 8;
+ *
+ *     return `display:flex;flex-direction:column;gap:${gap}px;`;
+ *   }
  * });
+ * ```
  *
- * @param options - Middleware creation options.
+ * ---
  *
- * @returns A Stylis middleware function.
+ * ### Behavior
+ * - Matches only rules of the form `@honey-${name}` inside standard CSS rules.
+ * - Parses arguments from parentheses (e.g. `@honey-name (arg1 arg2)`).
+ * - Serializes nested content (children) and appends it to the output.
+ *
+ * @param options - Options for configuring the middleware:
+ *   - `name`: the custom at-rule suffix, without the `@honey-` prefix.
+ *   - `transform`: a function to convert parsed args and the AST node into CSS declarations.
+ *
+ * @returns A Stylis `Middleware` function that replaces the matched at-rule with the generated CSS.
  */
 const createAtRuleMiddleware = ({ name, transform, }) => {
     return (element, _i, _children, callback) => {
@@ -2066,7 +2141,7 @@ const createAtRuleMiddleware = ({ name, transform, }) => {
         const argsMatch = element.value
             .trim()
             .match(new RegExp(`^${element.type}\\s*\\(\\s*([^)]+?)\\s*\\)\\s*;?$`, 'i'));
-        const args = argsMatch ? argsMatch[1].trim() : undefined;
+        const args = argsMatch ? argsMatch[1].split(' ').filter(Boolean) : undefined;
         const transformedCSS = transform(args, element, name);
         const serializedChildren = Array.isArray(element.children)
             ? (0,stylis__WEBPACK_IMPORTED_MODULE_0__.serialize)(element.children, callback)
@@ -2089,6 +2164,7 @@ __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 */   createEllipsisAtRuleMiddleware: () => (/* reexport safe */ _ellipsis_at_rule__WEBPACK_IMPORTED_MODULE_5__.createEllipsisAtRuleMiddleware),
 /* 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)
@@ -2098,6 +2174,8 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
+/* harmony import */ var _ellipsis_at_rule__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ellipsis-at-rule */ "./src/css/middlewares/ellipsis-at-rule.ts");
+
 
 
 
@@ -2123,9 +2201,9 @@ const createInlineAtRuleMiddleware = ({ spacingMultiplier = 0, } = {}) => (0,_fa
     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;
+        if (args?.length) {
+            const isNumber = /^-?\d*\.?\d+$/.test(args[0]);
+            const gap = isNumber ? `${parseFloat(args[0]) * spacingMultiplier}px` : args;
             declarations.push(`gap:${gap};`);
         }
         return declarations.join('');
@@ -2191,9 +2269,9 @@ const createStackAtRuleMiddleware = ({ spacingMultiplier = 0, }) => (0,_factory_
     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;
+        if (args?.length) {
+            const isNumber = /^-?\d*\.?\d+$/.test(args[0]);
+            const gap = isNumber ? `${parseFloat(args[0]) * spacingMultiplier}px` : args;
             declarations.push(`gap:${gap};`);
         }
         return declarations.join('');
@@ -2225,6 +2303,7 @@ const processCss = (rawCss, selector, { spacingMultiplier } = {}) => {
         (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__.createEllipsisAtRuleMiddleware)(),
         (0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createAbsoluteFillAtRuleMiddleware)(),
         (0,_middlewares__WEBPACK_IMPORTED_MODULE_0__.createSpacingMiddleware)({ spacingMultiplier }),
         stylis__WEBPACK_IMPORTED_MODULE_1__.stringify,
@@ -2994,6 +3073,7 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 */   createEllipsisAtRuleMiddleware: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.createEllipsisAtRuleMiddleware),
 /* 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),