@elementor/editor-canvas 0.26.0 → 3.32.0-20

package/dist/index.mjs

@@ -198,6 +198,7 @@ function getLinkAttrs(el) {
 
 // src/hooks/use-style-items.ts
 import { useEffect as useEffect4, useMemo as useMemo3, useState as useState2 } from "react";
+import { getBreakpoints } from "@elementor/editor-responsive";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 
@@ -387,6 +388,10 @@ function useStylePropResolver() {
 import { useMemo as useMemo2 } from "react";
 import { useBreakpointsMap } from "@elementor/editor-responsive";
 
+// src/renderers/create-styles-renderer.ts
+import { EXPERIMENTAL_FEATURES, isExperimentActive } from "@elementor/editor-v1-adapters";
+import { decodeString } from "@elementor/utils";
+
 // src/renderers/errors.ts
 import { createError } from "@elementor/utils";
 var UnknownStyleTypeError = createError({
@@ -403,11 +408,13 @@ function createStylesRenderer({ resolve, breakpoints, selectorPrefix = "" }) {
     const stylesCssPromises = styles.map(async (style) => {
       const variantCssPromises = Object.values(style.variants).map(async (variant) => {
         const css = await propsToCss({ props: variant.props, resolve, signal });
-        return createStyleWrapper().for(style.cssName, style.type).withPrefix(selectorPrefix).withState(variant.meta.state).withMediaQuery(variant.meta.breakpoint ? breakpoints[variant.meta.breakpoint] : null).wrap(css);
+        const customCss = customCssToString(variant.custom_css);
+        return createStyleWrapper().for(style.cssName, style.type).withPrefix(selectorPrefix).withState(variant.meta.state).withMediaQuery(variant.meta.breakpoint ? breakpoints[variant.meta.breakpoint] : null).wrap(css + customCss);
       });
       const variantsCss = await Promise.all(variantCssPromises);
       return {
         id: style.id,
+        breakpoint: style?.variants[0]?.meta?.breakpoint || "desktop",
         value: variantsCss.join("")
       };
     });
@@ -451,6 +458,16 @@ async function propsToCss({ props, resolve, signal }) {
     return acc;
   }, []).join("");
 }
+function customCssToString(customCss) {
+  if (!isExperimentActive(EXPERIMENTAL_FEATURES.CUSTOM_CSS) || !customCss?.raw) {
+    return "";
+  }
+  const decoded = decodeString(customCss.raw);
+  if (!decoded.trim()) {
+    return "";
+  }
+  return decoded + "\n";
+}
 
 // src/hooks/use-style-renderer.ts
 var SELECTOR_PREFIX = ".elementor";
@@ -496,7 +513,15 @@ function useStyleItems() {
       await Promise.all(promises);
     });
   });
-  return Object.values(styleItems).sort(({ provider: providerA }, { provider: providerB }) => providerA.priority - providerB.priority).flatMap(({ items }) => items);
+  const breakpointsOrder = getBreakpoints().map((breakpoint) => breakpoint.id);
+  return useMemo3(
+    () => Object.values(styleItems).sort(({ provider: providerA }, { provider: providerB }) => providerA.priority - providerB.priority).flatMap(({ items }) => items).sort(({ breakpoint: breakpointA }, { breakpoint: breakpointB }) => {
+      return breakpointsOrder.indexOf(breakpointA) - breakpointsOrder.indexOf(breakpointB);
+    }),
+    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [styleItems, breakpointsOrder.join("-")]
+  );
 }
 function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
   return abortPreviousRuns(
@@ -509,7 +534,7 @@ function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
           cssName: provider.actions.resolveCssName(style.id)
         };
       });
-      return renderStyles({ styles, signal });
+      return renderStyles({ styles: breakToBreakpoints(styles), signal });
     }).then((items) => {
       setStyleItems((prev) => ({
         ...prev,
@@ -517,6 +542,29 @@ function createProviderSubscriber({ provider, renderStyles, setStyleItems }) {
       }));
     }).execute()
   );
+  function breakToBreakpoints(styles) {
+    return Object.values(
+      styles.reduce(
+        (acc, style) => {
+          style.variants.forEach((variant) => {
+            const breakpoint = variant.meta.breakpoint || "desktop";
+            if (!acc[style.id]) {
+              acc[style.id] = {};
+            }
+            if (!acc[style.id][breakpoint]) {
+              acc[style.id][breakpoint] = {
+                ...style,
+                variants: []
+              };
+            }
+            acc[style.id][breakpoint].variants.push(variant);
+          });
+          return acc;
+        },
+        {}
+      )
+    ).flatMap((breakpointMap) => Object.values(breakpointMap));
+  }
 }
 
 // src/components/style-renderer.tsx
@@ -527,7 +575,7 @@ function StyleRenderer() {
   if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement(Portal, { container }, styleItems.map((item) => /* @__PURE__ */ React3.createElement("style", { "data-e-style-id": item.id, key: item.id }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React3.createElement("link", { ...attrs, key: attrs.id })));
+  return /* @__PURE__ */ React3.createElement(Portal, { container }, styleItems.map((item) => /* @__PURE__ */ React3.createElement("style", { "data-e-style-id": item.id, key: `${item.id}-${item.breakpoint}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React3.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer() {
   return useListenTo3(commandEndEvent2("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
@@ -536,15 +584,34 @@ function usePortalContainer() {
 // src/settings-transformers-registry.ts
 var settingsTransformersRegistry = createTransformersRegistry();
 
-// src/transformers/settings/classes-transformer.ts
-import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
-
 // src/transformers/create-transformer.ts
 function createTransformer(cb) {
   return cb;
 }
 
+// src/transformers/settings/attributes-transformer.ts
+function escapeHtmlAttribute(value) {
+  const specialChars = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    "'": "&#39;",
+    '"': "&quot;"
+  };
+  return value.replace(/[&<>'"]/g, (char) => specialChars[char] || char);
+}
+var attributesTransformer = createTransformer((values) => {
+  return values.map((value) => {
+    if (!value.key || !value.value) {
+      return "";
+    }
+    const escapedValue = escapeHtmlAttribute(value.value);
+    return `${value.key}="${escapedValue}"`;
+  }).join(" ");
+});
+
 // src/transformers/settings/classes-transformer.ts
+import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
 function createClassesTransformer() {
   const cache = /* @__PURE__ */ new Map();
   return createTransformer((value) => {
@@ -614,7 +681,7 @@ var plainTransformer = createTransformer((value) => {
 
 // src/init-settings-transformers.ts
 function initSettingsTransformers() {
-  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).registerFallback(plainTransformer);
+  settingsTransformersRegistry.register("classes", createClassesTransformer()).register("link", linkTransformer).register("image", imageTransformer).register("image-src", imageSrcTransformer).register("key-value-array", attributesTransformer).registerFallback(plainTransformer);
 }
 
 // src/transformers/styles/background-color-overlay-transformer.ts
@@ -657,7 +724,6 @@ var backgroundImageSizeScaleTransformer = createTransformer(
 );
 
 // src/transformers/styles/background-overlay-transformer.ts
-import { isExperimentActive } from "@elementor/editor-v1-adapters";
 var backgroundOverlayTransformer = createTransformer(
   (value) => {
     if (!value || value.length === 0) {
@@ -682,7 +748,6 @@ var backgroundOverlayTransformer = createTransformer(
   }
 );
 function normalizeOverlayValues(overlays) {
-  const isVersion330Active = isExperimentActive("e_v_3_30");
   const mappedValues = overlays.map((item) => {
     if (typeof item === "string") {
       return {
@@ -695,16 +760,12 @@ function normalizeOverlayValues(overlays) {
     }
     return item;
   });
-  if (!isVersion330Active) {
-    return mappedValues;
-  }
   return mappedValues.filter((item) => item && !!item.src);
 }
 function getValuesString(items, prop, defaultValue, preventUnification = false) {
-  const isVersion330Active = isExperimentActive("e_v_3_30");
   const isEmpty = items.filter((item) => item?.[prop]).length === 0;
   if (isEmpty) {
-    return isVersion330Active ? defaultValue : null;
+    return defaultValue;
   }
   const formattedValues = items.map((item) => item[prop] ?? defaultValue);
   if (!preventUnification) {
@@ -732,7 +793,9 @@ var colorStopTransformer = createTransformer(
 
 // src/transformers/styles/create-combine-array-transformer.ts
 var createCombineArrayTransformer = (delimiter) => {
-  return createTransformer((value) => value.filter(Boolean).join(delimiter));
+  return createTransformer(
+    (value) => value?.length ? value.filter(Boolean).join(delimiter) : null
+  );
 };
 
 // src/transformers/styles/create-multi-props-transformer.ts
@@ -748,18 +811,54 @@ var filterTransformer = createTransformer((filterValues) => {
   if (filterValues?.length < 1) {
     return null;
   }
-  return filterValues.map(mapToFilterFunctionString).join(" ");
+  return filterValues.filter(Boolean).map(mapToFilterFunctionString).join(" ");
 });
 var mapToFilterFunctionString = (value) => {
-  if ("radius" in value) {
-    return `blur(${value.radius})`;
+  if (value.func === "drop-shadow") {
+    const { xAxis, yAxis, blur, color } = value.args;
+    return `drop-shadow(${xAxis || "0px"} ${yAxis || "0px"} ${blur || "10px"} ${color || "transparent"})`;
   }
-  if ("amount" in value) {
-    return `brightness(${value.amount})`;
+  if (!value.func || !value.args) {
+    return "";
   }
-  return "";
+  return `${value.func}(${value.args})`;
 };
 
+// src/transformers/styles/flex-transformer.ts
+var flexTransformer = createTransformer((value) => {
+  const grow = value.flexGrow;
+  const shrink = value.flexShrink;
+  const basis = value.flexBasis;
+  const hasGrow = grow !== void 0 && grow !== null;
+  const hasShrink = shrink !== void 0 && shrink !== null;
+  const hasBasis = basis !== void 0 && basis !== null;
+  if (!hasGrow && !hasShrink && !hasBasis) {
+    return null;
+  }
+  if (hasGrow && hasShrink && hasBasis) {
+    return `${grow} ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
+  }
+  if (hasGrow && hasShrink && !hasBasis) {
+    return `${grow} ${shrink}`;
+  }
+  if (hasGrow && !hasShrink && hasBasis) {
+    return `${grow} 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
+  }
+  if (!hasGrow && hasShrink && hasBasis) {
+    return `0 ${shrink} ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
+  }
+  if (hasGrow && !hasShrink && !hasBasis) {
+    return `${grow}`;
+  }
+  if (!hasGrow && hasShrink && !hasBasis) {
+    return `0 ${shrink}`;
+  }
+  if (!hasGrow && !hasShrink && hasBasis) {
+    return `0 1 ${typeof basis === "object" && basis.size !== void 0 ? `${basis.size}${basis.unit || ""}` : basis}`;
+  }
+  return null;
+});
+
 // src/transformers/styles/position-transformer.ts
 var positionTransformer = createTransformer(({ x, y }) => `${x ?? "0px"} ${y ?? "0px"}`);
 
@@ -784,8 +883,33 @@ var strokeTransformer = createTransformer((value) => {
 });
 
 // src/transformers/styles/transform-move-transformer.ts
+var defaultMove = "0px";
 var transformMoveTransformer = createTransformer((value) => {
-  return `translate3d(${value.x}, ${value.y}, ${value.z})`;
+  return `translate3d(${value.x ?? defaultMove}, ${value.y ?? defaultMove}, ${value.z ?? defaultMove})`;
+});
+
+// src/transformers/styles/transform-rotate-transformer.ts
+var defaultRotate = "0deg";
+var transformRotateTransformer = createTransformer((value) => {
+  const transforms = [
+    `rotateX(${value?.x ?? defaultRotate})`,
+    `rotateY(${value?.y ?? defaultRotate})`,
+    `rotateZ(${value?.z ?? defaultRotate})`
+  ];
+  return transforms.join(" ");
+});
+
+// src/transformers/styles/transform-scale-transformer.ts
+var transformScaleTransformer = createTransformer((value) => {
+  return `scale3d(${value.x ?? 1}, ${value.y ?? 1}, ${value.z ?? 1})`;
+});
+
+// src/transformers/styles/transform-skew-transformer.ts
+var defaultSkew = "0deg";
+var transformSkewTransformer = createTransformer((value) => {
+  const x = value?.x ?? defaultSkew;
+  const y = value?.y ?? defaultSkew;
+  return `skew(${x}, ${y})`;
 });
 
 // src/transformers/styles/transform-transformer.ts
@@ -796,6 +920,20 @@ var transformTransformer = createTransformer((values) => {
   return values.join(" ");
 });
 
+// src/transformers/styles/transition-transformer.ts
+var transitionTransformer = createTransformer((transitionValues) => {
+  if (transitionValues?.length < 1) {
+    return null;
+  }
+  return transitionValues.filter(Boolean).map(mapToTransitionString).join(", ");
+});
+var mapToTransitionString = (value) => {
+  if (!value.selection || !value.size) {
+    return "";
+  }
+  return `${value.selection.value} ${value.size}`;
+};
+
 // src/init-style-transformers.ts
 function initStyleTransformers() {
   styleTransformersRegistry.register("size", sizeTransformer).register("shadow", shadowTransformer).register("stroke", strokeTransformer).register(
@@ -804,10 +942,10 @@ function initStyleTransformers() {
       ["block-start", "block-end", "inline-start", "inline-end"],
       ({ propKey, key }) => `${propKey}-${key}`
     )
-  ).register("filter", filterTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", backgroundOverlayTransformer).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-gradient-overlay", backgroundGradientOverlayTransformer).register("gradient-color-stop", createCombineArrayTransformer(",")).register("color-stop", colorStopTransformer).register("background-image-position-offset", positionTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register("object-position", positionTransformer).register("transform-move", transformMoveTransformer).register("transform", transformTransformer).register(
+  ).register("filter", filterTransformer).register("backdrop-filter", filterTransformer).register("box-shadow", createCombineArrayTransformer(",")).register("background", backgroundTransformer).register("background-overlay", backgroundOverlayTransformer).register("background-color-overlay", backgroundColorOverlayTransformer).register("background-image-overlay", backgroundImageOverlayTransformer).register("background-gradient-overlay", backgroundGradientOverlayTransformer).register("gradient-color-stop", createCombineArrayTransformer(",")).register("color-stop", colorStopTransformer).register("background-image-position-offset", positionTransformer).register("background-image-size-scale", backgroundImageSizeScaleTransformer).register("image-src", imageSrcTransformer).register("image", imageTransformer).register("object-position", positionTransformer).register("transform-move", transformMoveTransformer).register("transform-scale", transformScaleTransformer).register("transform-rotate", transformRotateTransformer).register("transform-skew", transformSkewTransformer).register("transform", transformTransformer).register("transition", transitionTransformer).register(
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
-  ).register(
+  ).register("flex", flexTransformer).register(
     "border-width",
     createMultiPropsTransformer(
       ["block-start", "block-end", "inline-start", "inline-end"],
@@ -1206,12 +1344,13 @@ var undoablePasteElementStyle = () => undoable(
           originalStyle
         };
         if (styleId) {
-          newStyle.variants.forEach(({ meta, props }) => {
+          newStyle.variants.forEach(({ meta, props, custom_css: customCss }) => {
             updateElementStyle({
               elementId,
               styleId,
               meta,
-              props
+              props,
+              custom_css: customCss
             });
           });
         } else {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "0.26.0",
+  "version": "3.32.0-20",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -19,11 +19,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/elementor/elementor-packages.git",
+    "url": "https://github.com/elementor/elementor.git",
     "directory": "packages/core/editor-canvas"
   },
   "bugs": {
-    "url": "https://github.com/elementor/elementor-packages/issues"
+    "url": "https://github.com/elementor/elementor/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -37,18 +37,18 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "0.21.0",
-    "@elementor/editor-notifications": "1.4.0",
-    "@elementor/editor-elements": "0.9.0",
-    "@elementor/editor-props": "0.16.0",
-    "@elementor/editor-responsive": "0.13.6",
-    "@elementor/editor-styles": "0.6.12",
-    "@elementor/editor-styles-repository": "0.10.5",
-    "@elementor/editor-v1-adapters": "0.12.1",
-    "@elementor/twing": "0.0.2",
-    "@elementor/ui": "1.36.0",
-    "@elementor/utils": "0.5.0",
-    "@elementor/wp-media": "0.6.1",
+    "@elementor/editor": "3.32.0-20",
+    "@elementor/editor-notifications": "3.32.0-20",
+    "@elementor/editor-elements": "3.32.0-20",
+    "@elementor/editor-props": "3.32.0-20",
+    "@elementor/editor-responsive": "3.32.0-20",
+    "@elementor/editor-styles": "3.32.0-20",
+    "@elementor/editor-styles-repository": "3.32.0-20",
+    "@elementor/editor-v1-adapters": "3.32.0-20",
+    "@elementor/twing": "3.32.0-20",
+    "@elementor/ui": "1.36.2",
+    "@elementor/utils": "3.32.0-20",
+    "@elementor/wp-media": "3.32.0-20",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/__tests__/flex-transformer.test.ts

@@ -0,0 +1,272 @@
+import { flexTransformer } from '../transformers/styles/flex-transformer';
+
+type Flex = {
+	flexGrow?: number | null;
+	flexShrink?: number | null;
+	flexBasis?: { size: number; unit: string } | string | null;
+};
+
+describe( 'flexTransformer', () => {
+	describe( 'when no values are provided', () => {
+		it( 'should return null when all values are null', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: null,
+				flexShrink: null,
+				flexBasis: null,
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBeNull();
+		} );
+
+		it( 'should return null when all values are undefined', () => {
+			// Arrange.
+			const value: Flex = {};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBeNull();
+		} );
+	} );
+
+	describe( 'when all three values are provided', () => {
+		it( 'should return "grow shrink basis" when all values are set', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: 2,
+				flexShrink: 1,
+				flexBasis: { size: 100, unit: 'px' },
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '2 1 100px' );
+		} );
+
+		it( 'should handle string basis value', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: 1,
+				flexShrink: 0,
+				flexBasis: 'auto',
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '1 0 auto' );
+		} );
+	} );
+
+	describe( 'when only two values are provided', () => {
+		it( 'should return "grow shrink" when grow and shrink are set', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: 1,
+				flexShrink: 2,
+				flexBasis: null,
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '1 2' );
+		} );
+
+		it( 'should return "grow 1 basis" when grow and basis are set', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: 3,
+				flexShrink: null,
+				flexBasis: { size: 50, unit: '%' },
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '3 1 50%' );
+		} );
+
+		it( 'should return "0 shrink basis" when shrink and basis are set', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: null,
+				flexShrink: 1,
+				flexBasis: { size: 200, unit: 'px' },
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '0 1 200px' );
+		} );
+	} );
+
+	describe( 'when only one value is provided', () => {
+		it( 'should return "grow" when only grow is set', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: 1,
+				flexShrink: null,
+				flexBasis: null,
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '1' );
+		} );
+
+		it( 'should return "0 shrink" when only shrink is set', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: null,
+				flexShrink: 2,
+				flexBasis: null,
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '0 2' );
+		} );
+
+		it( 'should return "0 1 basis" when only basis is set', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: null,
+				flexShrink: null,
+				flexBasis: { size: 300, unit: 'px' },
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '0 1 300px' );
+		} );
+
+		it( 'should handle string basis when only basis is set', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: null,
+				flexShrink: null,
+				flexBasis: 'content',
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '0 1 content' );
+		} );
+	} );
+
+	describe( 'edge cases', () => {
+		it( 'should handle zero values correctly', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: 0,
+				flexShrink: 0,
+				flexBasis: { size: 0, unit: 'px' },
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '0 0 0px' );
+		} );
+
+		it( 'should handle basis with empty unit', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: 1,
+				flexShrink: 1,
+				flexBasis: { size: 100, unit: '' },
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '1 1 100' );
+		} );
+
+		it( 'should handle basis with undefined unit', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: 1,
+				flexShrink: 1,
+				flexBasis: { size: 100, unit: '' },
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '1 1 100' );
+		} );
+
+		it( 'should handle basis object without size property', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: 1,
+				flexShrink: 1,
+				flexBasis: { unit: 'px' } as { size: number; unit: string },
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '1 1 [object Object]' );
+		} );
+	} );
+
+	describe( 'CSS shorthand behavior', () => {
+		it( 'should follow CSS flex shorthand rules for single value', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: 2,
+				flexShrink: null,
+				flexBasis: null,
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '2' );
+		} );
+
+		it( 'should follow CSS flex shorthand rules for two values', () => {
+			// Arrange.
+			const value: Flex = {
+				flexGrow: 1,
+				flexShrink: 2,
+				flexBasis: null,
+			};
+
+			// Act.
+			const result = flexTransformer( value, { key: 'flex' } );
+
+			// Assert.
+			expect( result ).toBe( '1 2' );
+		} );
+	} );
+} );