@elementor/editor-canvas 0.26.0 → 3.32.0-20

package/src/__tests__/styles-prop-resolver.test.ts

@@ -1,6 +1,7 @@
 import { mockStylesSchema } from 'test-utils';
 import { styleTransformersRegistry } from '@elementor/editor-canvas';
 import {
+	backdropFilterPropTypeUtil,
 	backgroundColorOverlayPropTypeUtil,
 	backgroundGradientOverlayPropTypeUtil,
 	backgroundImageOverlayPropTypeUtil,
@@ -8,13 +9,12 @@ import {
 	backgroundImageSizeScalePropTypeUtil,
 	backgroundOverlayPropTypeUtil,
 	backgroundPropTypeUtil,
-	blurFilterPropTypeUtil,
 	borderRadiusPropTypeUtil,
 	borderWidthPropTypeUtil,
 	boxShadowPropTypeUtil,
-	brightnessFilterPropTypeUtil,
 	colorPropTypeUtil,
 	colorStopPropTypeUtil,
+	cssFilterFunctionPropUtil,
 	dimensionsPropTypeUtil,
 	filterPropTypeUtil,
 	gradientColorStopPropTypeUtil,
@@ -29,7 +29,6 @@ import {
 	stringPropTypeUtil,
 	strokePropTypeUtil,
 } from '@elementor/editor-props';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { getMediaAttachment } from '@elementor/wp-media';
 
 import { initStyleTransformers } from '../init-style-transformers';
@@ -48,6 +47,76 @@ type Payload = {
 	expected: Record< string, unknown >;
 };
 
+const filters = filterPropTypeUtil.create( [
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'blur' ),
+		args: sizePropTypeUtil.create( { size: 1, unit: 'px' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'brightness' ),
+		args: sizePropTypeUtil.create( { size: 90, unit: '%' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'contrast' ),
+		args: sizePropTypeUtil.create( { size: 50, unit: '%' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'grayscale' ),
+		args: sizePropTypeUtil.create( { size: 70, unit: '%' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'invert' ),
+		args: sizePropTypeUtil.create( { size: 60, unit: '%' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'sepia' ),
+		args: sizePropTypeUtil.create( { size: 30, unit: '%' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'saturate' ),
+		args: sizePropTypeUtil.create( { size: 25, unit: '%' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'hue-rotate' ),
+		args: sizePropTypeUtil.create( { size: 10, unit: 'deg' } ),
+	} ),
+] );
+
+const backDropFilters = backdropFilterPropTypeUtil.create( [
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'blur' ),
+		args: sizePropTypeUtil.create( { size: 2, unit: 'rem' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'brightness' ),
+		args: sizePropTypeUtil.create( { size: 80, unit: '%' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'contrast' ),
+		args: sizePropTypeUtil.create( { size: 50, unit: '%' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'grayscale' ),
+		args: sizePropTypeUtil.create( { size: 70, unit: '%' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'invert' ),
+		args: sizePropTypeUtil.create( { size: 60, unit: '%' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'sepia' ),
+		args: sizePropTypeUtil.create( { size: 30, unit: '%' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'saturate' ),
+		args: sizePropTypeUtil.create( { size: 25, unit: '%' } ),
+	} ),
+	cssFilterFunctionPropUtil.create( {
+		func: stringPropTypeUtil.create( 'hue-rotate' ),
+		args: sizePropTypeUtil.create( { size: 10, unit: 'deg' } ),
+	} ),
+] );
+
 describe( 'styles prop resolver', () => {
 	it.each< Payload >( [
 		{
@@ -177,7 +246,7 @@ describe( 'styles prop resolver', () => {
 			},
 		},
 		{
-			name: 'background (only image url)',
+			name: 'background (image url and default values)',
 			props: {
 				background: backgroundPropTypeUtil.create( {
 					'background-overlay': backgroundOverlayPropTypeUtil.create( [
@@ -195,12 +264,15 @@ describe( 'styles prop resolver', () => {
 			},
 			expected: {
 				'background-image': 'url(https://localhost.test/test-image.png)',
+				'background-repeat': 'repeat',
+				'background-attachment': 'scroll',
+				'background-size': 'auto auto',
+				'background-position': '0% 0%',
 			},
 		},
 		{
 			name: 'background (full)',
 			prepare: () => {
-				jest.mocked( isExperimentActive ).mockReturnValue( true );
 				jest.mocked( getMediaAttachment ).mockImplementation(
 					( args ) => Promise.resolve( mockAttachmentData( args.id ) ) as never
 				);
@@ -273,17 +345,20 @@ describe( 'styles prop resolver', () => {
 		{
 			name: 'filter',
 			props: {
-				filter: filterPropTypeUtil.create( [
-					blurFilterPropTypeUtil.create( {
-						radius: sizePropTypeUtil.create( { size: 1, unit: 'px' } ),
-					} ),
-					brightnessFilterPropTypeUtil.create( {
-						amount: sizePropTypeUtil.create( { size: 90, unit: '%' } ),
-					} ),
-				] ),
+				filter: filters,
+			},
+			expected: {
+				filter: 'blur(1px) brightness(90%) contrast(50%) grayscale(70%) invert(60%) sepia(30%) saturate(25%) hue-rotate(10deg)',
+			},
+		},
+		{
+			name: 'backdrop-filter',
+			props: {
+				'backdrop-filter': backDropFilters,
 			},
 			expected: {
-				filter: 'blur(1px) brightness(90%)',
+				'backdrop-filter':
+					'blur(2rem) brightness(80%) contrast(50%) grayscale(70%) invert(60%) sepia(30%) saturate(25%) hue-rotate(10deg)',
 			},
 		},
 		{

package/src/components/__tests__/style-renderer.test.tsx

@@ -46,8 +46,8 @@ describe( '<StyleRenderer />', () => {
 		const mockContainer = document.createElement( 'div' );
 
 		const mockCssItems = [
-			{ id: 'style1', value: '.test { color: red; }' },
-			{ id: 'style2', value: '.test2 { color: blue; }' },
+			{ id: 'style1', value: '.test { color: red; }', breakpoint: 'desktop' },
+			{ id: 'style2', value: '.test2 { color: blue; }', breakpoint: 'desktop' },
 		];
 
 		const mockLinkAttrs = [

package/src/components/style-renderer.tsx

@@ -19,7 +19,7 @@ export function StyleRenderer() {
 	return (
 		<Portal container={ container }>
 			{ styleItems.map( ( item ) => (
-				<style data-e-style-id={ item.id } key={ item.id }>
+				<style data-e-style-id={ item.id } key={ `${ item.id }-${ item.breakpoint }` }>
 					{ item.value }
 				</style>
 			) ) }

package/src/hooks/__tests__/use-style-items.test.ts

@@ -1,4 +1,5 @@
-import { createMockStyleDefinition, createMockStylesProvider } from 'test-utils';
+import { createMockStyleDefinition, createMockStyleDefinitionWithVariants, createMockStylesProvider } from 'test-utils';
+import { type StyleDefinition } from '@elementor/editor-styles';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 import { act, renderHook } from '@testing-library/react';
@@ -26,12 +27,23 @@ jest.mock( '../use-style-renderer', () => ( {
 	useStyleRenderer: jest.fn(),
 } ) );
 
+jest.mock( '@elementor/editor-responsive', () => ( {
+	getBreakpoints: jest.fn().mockReturnValue( [
+		{ id: 'desktop', label: 'Desktop' },
+		{ id: 'tablet', label: 'Tablet' },
+		{ id: 'mobile', label: 'Mobile' },
+	] ),
+} ) );
+
 describe( 'useStyleItems', () => {
 	beforeEach( () => {
 		jest.mocked( useStyleRenderer ).mockReturnValue(
-			jest
-				.fn()
-				.mockImplementation( ( { styles } ) => styles.map( ( style: { id: string } ) => ( { id: style.id } ) ) )
+			jest.fn().mockImplementation( ( { styles } ) =>
+				styles.map( ( style: StyleDefinition ) => ( {
+					id: style.id,
+					breakpoint: style?.variants[ 0 ]?.meta.breakpoint || 'desktop',
+				} ) )
+			)
 		);
 	} );
 
@@ -71,7 +83,10 @@ describe( 'useStyleItems', () => {
 		} );
 
 		// Assert.
-		expect( result.current ).toEqual( [ { id: 'style2' }, { id: 'style1' } ] );
+		expect( result.current ).toEqual( [
+			{ id: 'style2', breakpoint: 'desktop' },
+			{ id: 'style1', breakpoint: 'desktop' },
+		] );
 
 		// Act.
 		await act( async () => {
@@ -83,7 +98,12 @@ describe( 'useStyleItems', () => {
 		} );
 
 		// Assert.
-		expect( result.current ).toEqual( [ { id: 'style4' }, { id: 'style3' }, { id: 'style2' }, { id: 'style1' } ] );
+		expect( result.current ).toEqual( [
+			{ id: 'style4', breakpoint: 'desktop' },
+			{ id: 'style3', breakpoint: 'desktop' },
+			{ id: 'style2', breakpoint: 'desktop' },
+			{ id: 'style1', breakpoint: 'desktop' },
+		] );
 	} );
 
 	it( 'should return style items when attach-preview command is triggered', async () => {
@@ -128,6 +148,85 @@ describe( 'useStyleItems', () => {
 		} );
 
 		// Assert.
-		expect( result.current ).toEqual( [ { id: 'style4' }, { id: 'style3' }, { id: 'style2' }, { id: 'style1' } ] );
+		expect( result.current ).toEqual( [
+			{ id: 'style4', breakpoint: 'desktop' },
+			{ id: 'style3', breakpoint: 'desktop' },
+			{ id: 'style2', breakpoint: 'desktop' },
+			{ id: 'style1', breakpoint: 'desktop' },
+		] );
+	} );
+
+	it( 'should return style items ordered by provider priority and breakpoint', async () => {
+		// Arrange.
+		const mockProvider1 = createMockStylesProvider(
+			{
+				key: 'provider1',
+				priority: 2,
+			},
+			[
+				createMockStyleDefinitionWithVariants( {
+					id: 'style1',
+					variants: [
+						{
+							meta: { breakpoint: 'mobile', state: null },
+							props: {
+								padding: '10px',
+							},
+							custom_css: null,
+						},
+						{
+							meta: { breakpoint: 'mobile', state: 'hover' },
+							props: {
+								padding: '20px',
+							},
+							custom_css: null,
+						},
+					],
+				} ),
+				createMockStyleDefinition( { id: 'style2' } ),
+			]
+		);
+
+		const mockProvider2 = createMockStylesProvider(
+			{
+				key: 'provider2',
+				priority: 1,
+			},
+			[
+				createMockStyleDefinition( { id: 'style3', meta: { breakpoint: 'tablet', state: null } } ),
+				createMockStyleDefinition( { id: 'style4' } ),
+			]
+		);
+
+		jest.mocked( stylesRepository ).getProviders.mockReturnValue( [ mockProvider1, mockProvider2 ] );
+
+		let attachPreviewCallback: () => Promise< void >;
+
+		jest.mocked( registerDataHook ).mockImplementation( ( position, command, callback ) => {
+			if ( command === 'editor/documents/attach-preview' && position === 'after' ) {
+				attachPreviewCallback = callback as never;
+			}
+
+			return null as never;
+		} );
+
+		// Act.
+		const { result } = renderHook( () => useStyleItems() );
+
+		// Assert.
+		expect( result.current ).toEqual( [] );
+
+		// Act.
+		await act( async () => {
+			await attachPreviewCallback?.();
+		} );
+
+		// Assert.
+		expect( result.current ).toEqual( [
+			{ id: 'style4', breakpoint: 'desktop' },
+			{ id: 'style2', breakpoint: 'desktop' },
+			{ id: 'style3', breakpoint: 'tablet' },
+			{ id: 'style1', breakpoint: 'mobile' },
+		] );
 	} );
 } );

package/src/hooks/use-style-items.ts

@@ -1,8 +1,9 @@
 import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
+import { type BreakpointId, getBreakpoints } from '@elementor/editor-responsive';
 import { type StylesProvider, stylesRepository } from '@elementor/editor-styles-repository';
 import { registerDataHook } from '@elementor/editor-v1-adapters';
 
-import { type StyleItem, type StyleRenderer } from '../renderers/create-styles-renderer';
+import { type RendererStyleDefinition, type StyleItem, type StyleRenderer } from '../renderers/create-styles-renderer';
 import { abortPreviousRuns } from '../utils/abort-previous-runs';
 import { signalizedProcess } from '../utils/signalized-process';
 import { useOnMount } from './use-on-mount';
@@ -52,9 +53,23 @@ export function useStyleItems() {
 		} );
 	} );
 
-	return Object.values( styleItems )
-		.sort( ( { provider: providerA }, { provider: providerB } ) => providerA.priority - providerB.priority )
-		.flatMap( ( { items } ) => items );
+	const breakpointsOrder = getBreakpoints().map( ( breakpoint ) => breakpoint.id );
+
+	return useMemo(
+		() =>
+			Object.values( styleItems )
+				.sort( ( { provider: providerA }, { provider: providerB } ) => providerA.priority - providerB.priority )
+				.flatMap( ( { items } ) => items )
+				.sort( ( { breakpoint: breakpointA }, { breakpoint: breakpointB } ) => {
+					return (
+						breakpointsOrder.indexOf( breakpointA as BreakpointId ) -
+						breakpointsOrder.indexOf( breakpointB as BreakpointId )
+					);
+				} ),
+		// eslint-disable-next-line
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[ styleItems, breakpointsOrder.join( '-' ) ]
+	);
 }
 
 type CreateProviderSubscriberArgs = {
@@ -78,7 +93,7 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems }: Cr
 					};
 				} );
 
-				return renderStyles( { styles, signal } );
+				return renderStyles( { styles: breakToBreakpoints( styles ), signal } );
 			} )
 			.then( ( items ) => {
 				setStyleItems( ( prev ) => ( {
@@ -88,4 +103,31 @@ function createProviderSubscriber( { provider, renderStyles, setStyleItems }: Cr
 			} )
 			.execute()
 	);
+
+	function breakToBreakpoints( styles: RendererStyleDefinition[] ) {
+		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;
+				},
+				{} as Record< string, Record< string, RendererStyleDefinition > >
+			)
+		).flatMap( ( breakpointMap ) => Object.values( breakpointMap ) );
+	}
 }

package/src/init-settings-transformers.ts

@@ -1,4 +1,5 @@
 import { settingsTransformersRegistry } from './settings-transformers-registry';
+import { attributesTransformer } from './transformers/settings/attributes-transformer';
 import { createClassesTransformer } from './transformers/settings/classes-transformer';
 import { linkTransformer } from './transformers/settings/link-transformer';
 import { imageSrcTransformer } from './transformers/shared/image-src-transformer';
@@ -11,5 +12,6 @@ export function initSettingsTransformers() {
 		.register( 'link', linkTransformer )
 		.register( 'image', imageTransformer )
 		.register( 'image-src', imageSrcTransformer )
+		.register( 'key-value-array', attributesTransformer )
 		.registerFallback( plainTransformer );
 }

package/src/init-style-transformers.ts

@@ -12,12 +12,17 @@ import { colorStopTransformer } from './transformers/styles/color-stop-transform
 import { createCombineArrayTransformer } from './transformers/styles/create-combine-array-transformer';
 import { createMultiPropsTransformer } from './transformers/styles/create-multi-props-transformer';
 import { filterTransformer } from './transformers/styles/filter-transformer';
+import { flexTransformer } from './transformers/styles/flex-transformer';
 import { positionTransformer } from './transformers/styles/position-transformer';
 import { shadowTransformer } from './transformers/styles/shadow-transformer';
 import { sizeTransformer } from './transformers/styles/size-transformer';
 import { strokeTransformer } from './transformers/styles/stroke-transformer';
 import { transformMoveTransformer } from './transformers/styles/transform-move-transformer';
+import { transformRotateTransformer } from './transformers/styles/transform-rotate-transformer';
+import { transformScaleTransformer } from './transformers/styles/transform-scale-transformer';
+import { transformSkewTransformer } from './transformers/styles/transform-skew-transformer';
 import { transformTransformer } from './transformers/styles/transform-transformer';
+import { transitionTransformer } from './transformers/styles/transition-transformer';
 
 export function initStyleTransformers() {
 	styleTransformersRegistry
@@ -32,6 +37,7 @@ export function initStyleTransformers() {
 			)
 		)
 		.register( 'filter', filterTransformer )
+		.register( 'backdrop-filter', filterTransformer )
 		.register( 'box-shadow', createCombineArrayTransformer( ',' ) )
 		.register( 'background', backgroundTransformer )
 		.register( 'background-overlay', backgroundOverlayTransformer )
@@ -46,11 +52,16 @@ export function initStyleTransformers() {
 		.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( 'flex', flexTransformer )
 		.register(
 			'border-width',
 			createMultiPropsTransformer(

package/src/renderers/__tests__/__snapshots__/create-styles-renderer.test.ts.snap

@@ -3,10 +3,12 @@
 exports[`renderStyles should render styles 1`] = `
 [
   {
+    "breakpoint": "desktop",
     "id": "test",
     "value": ".test{font-size:10px;}.test:hover{font-size:20px;}@media(max-width:992px){.test{font-size:30px;}}@media(max-width:768px){.test:focus{font-size:40px;}}",
   },
   {
+    "breakpoint": "desktop",
     "id": "test-2",
     "value": ".custom-name{font-size:50px;}",
   },

package/src/renderers/__tests__/create-styles-renderer.test.ts

@@ -1,8 +1,14 @@
 /* eslint-disable testing-library/render-result-naming-convention */
 import type { BreakpointsMap } from '@elementor/editor-responsive';
+import { encodeString } from '@elementor/utils';
 
 import { createStylesRenderer, type RendererStyleDefinition } from '../create-styles-renderer';
 
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	...jest.requireActual( '@elementor/editor-v1-adapters' ),
+	isExperimentActive: jest.fn().mockReturnValue( true ),
+} ) );
+
 describe( 'renderStyles', () => {
 	it( 'should render styles', async () => {
 		// Arrange.
@@ -15,18 +21,22 @@ describe( 'renderStyles', () => {
 				{
 					meta: { breakpoint: null, state: null },
 					props: { 'font-size': '10px' },
+					custom_css: null,
 				},
 				{
 					meta: { breakpoint: null, state: 'hover' },
 					props: { 'font-size': '20px' },
+					custom_css: null,
 				},
 				{
 					meta: { breakpoint: 'tablet', state: null },
 					props: { 'font-size': '30px' },
+					custom_css: null,
 				},
 				{
 					meta: { breakpoint: 'mobile', state: 'focus' },
 					props: { 'font-size': '40px' },
+					custom_css: null,
 				},
 			],
 		};
@@ -40,6 +50,7 @@ describe( 'renderStyles', () => {
 				{
 					meta: { breakpoint: null, state: null },
 					props: { 'font-size': '50px' },
+					custom_css: null,
 				},
 			],
 		};
@@ -79,6 +90,7 @@ describe( 'renderStyles', () => {
 				{
 					meta: { breakpoint: null, state: null },
 					props: { 'font-size': '24px' },
+					custom_css: null,
 				},
 			],
 		};
@@ -97,9 +109,95 @@ describe( 'renderStyles', () => {
 		// Assert.
 		expect( result ).toEqual( [
 			{
+				breakpoint: 'desktop',
 				id: 'test',
 				value: '.elementor-prefix .test{font-size:24px;}',
 			},
 		] );
 	} );
 } );
+
+describe( 'custom_css rendering', () => {
+	it( 'should not render custom_css if raw is empty', async () => {
+		// Arrange.
+		const styleDef: RendererStyleDefinition = {
+			id: 'test',
+			type: 'class',
+			cssName: 'test',
+			label: 'Test',
+			variants: [ { meta: { breakpoint: null, state: null }, props: {}, custom_css: { raw: '' } } ],
+		};
+
+		// Act.
+		const renderStyles = createStylesRenderer( { breakpoints: {} as BreakpointsMap, resolve: async () => ( {} ) } );
+		const result = await renderStyles( { styles: [ styleDef ] } );
+
+		// Assert.
+		expect( result[ 0 ].value ).not.toContain( '{;}' );
+	} );
+
+	it( 'should not render custom_css if raw is whitespace', async () => {
+		// Arrange.
+		const styleDef: RendererStyleDefinition = {
+			id: 'test',
+			type: 'class',
+			cssName: 'test',
+			label: 'Test',
+			variants: [
+				{ meta: { breakpoint: null, state: null }, props: {}, custom_css: { raw: encodeString( '   \n\t' ) } },
+			],
+		};
+
+		// Act.
+		const renderStyles = createStylesRenderer( { breakpoints: {} as BreakpointsMap, resolve: async () => ( {} ) } );
+		const result = await renderStyles( { styles: [ styleDef ] } );
+
+		// Assert.
+		expect( result[ 0 ].value ).not.toContain( '{;}' );
+	} );
+
+	it( 'should not render custom_css if raw is invalid encoded string', async () => {
+		// Arrange.
+		const styleDef: RendererStyleDefinition = {
+			id: 'test',
+			type: 'class',
+			cssName: 'test',
+			label: 'Test',
+			variants: [
+				{ meta: { breakpoint: null, state: null }, props: {}, custom_css: { raw: 'I cannot be decoded' } },
+			],
+		};
+
+		// Act.
+		const renderStyles = createStylesRenderer( { breakpoints: {} as BreakpointsMap, resolve: async () => ( {} ) } );
+		const result = await renderStyles( { styles: [ styleDef ] } );
+
+		// Assert.
+		expect( result[ 0 ].value ).not.toContain( '{;}' );
+	} );
+
+	it( 'should render custom_css if raw is valid base64 encoded string', async () => {
+		// Arrange.
+		const css = 'transition: 100s; \n .inner-selector { color: red; }';
+		const styleDef: RendererStyleDefinition = {
+			id: 'test',
+			type: 'class',
+			cssName: 'test',
+			label: 'Test',
+			variants: [
+				{
+					meta: { breakpoint: null, state: null },
+					props: {},
+					custom_css: { raw: encodeString( css ) },
+				},
+			],
+		};
+
+		// Act.
+		const renderStyles = createStylesRenderer( { breakpoints: {} as BreakpointsMap, resolve: async () => ( {} ) } );
+		const result = await renderStyles( { styles: [ styleDef ] } );
+
+		// Assert.
+		expect( result[ 0 ].value ).toContain( css );
+	} );
+} );

package/src/renderers/create-styles-renderer.ts

@@ -1,6 +1,13 @@
 import type { Props } from '@elementor/editor-props';
 import { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';
-import { type StyleDefinition, type StyleDefinitionState, type StyleDefinitionType } from '@elementor/editor-styles';
+import {
+	type CustomCss,
+	type StyleDefinition,
+	type StyleDefinitionState,
+	type StyleDefinitionType,
+} from '@elementor/editor-styles';
+import { EXPERIMENTAL_FEATURES, isExperimentActive } from '@elementor/editor-v1-adapters';
+import { decodeString } from '@elementor/utils';
 
 import { type PropsResolver } from './create-props-resolver';
 import { UnknownStyleTypeError } from './errors';
@@ -8,6 +15,7 @@ import { UnknownStyleTypeError } from './errors';
 export type StyleItem = {
 	id: string;
 	value: string;
+	breakpoint: string;
 };
 
 export type StyleRenderer = ReturnType< typeof createStylesRenderer >;
@@ -42,19 +50,21 @@ export 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 } );
+				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 );
+					.wrap( css + customCss );
 			} );
 
 			const variantsCss = await Promise.all( variantCssPromises );
 
 			return {
 				id: style.id,
+				breakpoint: style?.variants[ 0 ]?.meta?.breakpoint || 'desktop',
 				value: variantsCss.join( '' ),
 			};
 		} );
@@ -118,3 +128,17 @@ async function propsToCss( { props, resolve, signal }: PropsToCssArgs ) {
 		}, [] )
 		.join( '' );
 }
+
+function customCssToString( customCss: CustomCss | null ): string {
+	if ( ! isExperimentActive( EXPERIMENTAL_FEATURES.CUSTOM_CSS ) || ! customCss?.raw ) {
+		return '';
+	}
+
+	const decoded = decodeString( customCss.raw );
+
+	if ( ! decoded.trim() ) {
+		return '';
+	}
+
+	return decoded + '\n';
+}