@elementor/editor-canvas 0.9.0 → 0.11.0

package/src/{renderers/__tests__/create-props-resolver.transformers.test.ts → __tests__/styles-prop-resolver.test.ts}

@@ -1,3 +1,4 @@
+import { styleTransformersRegistry } from '@elementor/editor-canvas';
 import {
 	backgroundColorOverlayPropTypeUtil,
 	backgroundImageOverlayPropTypeUtil,
@@ -15,15 +16,15 @@ import {
 	imageSrcPropTypeUtil,
 	layoutDirectionPropTypeUtil,
 	type Props,
-	type PropsSchema,
 	shadowPropTypeUtil,
 	sizePropTypeUtil,
+	stringPropTypeUtil,
 	strokePropTypeUtil,
 } from '@elementor/editor-props';
 import { getMediaAttachment } from '@elementor/wp-media';
 
-import { createPropsResolver } from '../create-props-resolver';
-import { styleTransformers } from '../style-transformers';
+import { initStyleTransformers } from '../init-style-transformers';
+import { createPropsResolver } from '../renderers/create-props-resolver';
 import { stylesSchemaMock } from './__mocks__/styles-schema';
 
 jest.mock( '@elementor/wp-media' );
@@ -32,11 +33,10 @@ type Payload = {
 	name: string;
 	prepare?: () => void;
 	props: Props;
-	schema: PropsSchema;
 	expected: Record< string, unknown >;
 };
 
-describe( 'createPropsResolver - transformers', () => {
+describe( 'styles prop resolver', () => {
 	it.each< Payload >( [
 		{
 			name: 'text-stroke',
@@ -49,7 +49,6 @@ describe( 'createPropsResolver - transformers', () => {
 					color: colorPropTypeUtil.create( '#000000' ),
 				} ),
 			},
-			schema: stylesSchemaMock,
 			expected: {
 				'-webkit-text-stroke': '1px #000000',
 				stroke: '#000000',
@@ -77,7 +76,6 @@ describe( 'createPropsResolver - transformers', () => {
 					} ),
 				] ),
 			},
-			schema: stylesSchemaMock,
 			expected: {
 				'box-shadow': '1px 1px 1px 1px #000000,1px 1px 1px 1px #000000 inset',
 			},
@@ -85,7 +83,7 @@ describe( 'createPropsResolver - transformers', () => {
 		{
 			name: 'linked-dimensional',
 			props: {
-				padding: dimensionsPropTypeUtil.create( {
+				margin: dimensionsPropTypeUtil.create( {
 					top: sizePropTypeUtil.create( {
 						size: 10,
 						unit: 'px',
@@ -98,18 +96,14 @@ describe( 'createPropsResolver - transformers', () => {
 						size: 30,
 						unit: 'px',
 					} ),
-					left: sizePropTypeUtil.create( {
-						size: 40,
-						unit: 'px',
-					} ),
+					left: stringPropTypeUtil.create( 'auto' ),
 				} ),
 			},
-			schema: stylesSchemaMock,
 			expected: {
-				'padding-top': '10px',
-				'padding-right': '20px',
-				'padding-bottom': '30px',
-				'padding-left': '40px',
+				'margin-top': '10px',
+				'margin-right': '20px',
+				'margin-bottom': '30px',
+				'margin-left': 'auto',
 			},
 		},
 		{
@@ -122,7 +116,6 @@ describe( 'createPropsResolver - transformers', () => {
 					left: sizePropTypeUtil.create( { size: 40, unit: 'px' } ),
 				} ),
 			},
-			schema: stylesSchemaMock,
 			expected: {
 				'border-top-width': '10px',
 				'border-right-width': '20px',
@@ -140,7 +133,6 @@ describe( 'createPropsResolver - transformers', () => {
 					'end-end': sizePropTypeUtil.create( { size: 40, unit: 'px' } ),
 				} ),
 			},
-			schema: stylesSchemaMock,
 			expected: {
 				'border-start-start-radius': '10px',
 				'border-start-end-radius': '20px',
@@ -156,7 +148,6 @@ describe( 'createPropsResolver - transformers', () => {
 					column: sizePropTypeUtil.create( { size: 20, unit: 'px' } ),
 				} ),
 			},
-			schema: stylesSchemaMock,
 			expected: {
 				'column-gap': '20px',
 				'row-gap': '10px',
@@ -169,7 +160,6 @@ describe( 'createPropsResolver - transformers', () => {
 					color: colorPropTypeUtil.create( '#ee00ff' ),
 				} ),
 			},
-			schema: stylesSchemaMock,
 			expected: {
 				background: '#ee00ff',
 			},
@@ -191,7 +181,6 @@ describe( 'createPropsResolver - transformers', () => {
 					] ),
 				} ),
 			},
-			schema: stylesSchemaMock,
 			expected: {
 				background: 'url(https://localhost.test/test-image.png)',
 			},
@@ -249,7 +238,6 @@ describe( 'createPropsResolver - transformers', () => {
 					] ),
 				} ),
 			},
-			schema: stylesSchemaMock,
 			expected: {
 				background:
 					'linear-gradient(blue, blue),linear-gradient(yellow, yellow),' +
@@ -291,19 +279,23 @@ describe( 'createPropsResolver - transformers', () => {
 					] ),
 				} ),
 			},
-			schema: stylesSchemaMock,
 			expected: {
 				background: 'url(medium_large-image-url-123) repeat-x,url(thumbnail-image-url-123) fixed',
 			},
 		},
-	] )( 'it should resolve props for `$name`', async ( { prepare, props, schema, expected } ) => {
+	] )( 'it should resolve props for `$name`', async ( { prepare, props, expected } ) => {
 		// Arrange.
 		prepare?.();
 
-		const resolve = createPropsResolver( styleTransformers );
+		initStyleTransformers();
+
+		const resolve = createPropsResolver( {
+			transformers: styleTransformersRegistry.all(),
+			schema: stylesSchemaMock,
+		} );
 
 		// Act.
-		const result = await resolve( { props, schema } );
+		const result = await resolve( { props } );
 
 		// Assert.
 		expect( result ).toStrictEqual( expected );

package/src/index.ts

@@ -1,3 +1,5 @@
 import { init } from './init';
 
+export { styleTransformersRegistry } from './style-transformers-registry';
+
 init();

package/src/init-style-transformers.ts

@@ -0,0 +1,58 @@
+import { styleTransformersRegistry } from './style-transformers-registry';
+import { backgroundColorOverlayTransformer } from './transformers/styles/background-color-overlay-transformer';
+import { backgroundImageOverlayTransformer } from './transformers/styles/background-image-overlay-transformer';
+import { backgroundImagePositionOffsetTransformer } from './transformers/styles/background-image-position-offset-transformer';
+import { backgroundImageSizeScaleTransformer } from './transformers/styles/background-image-size-scale-transformer';
+import { backgroundTransformer } from './transformers/styles/background-transformer';
+import { createCombineArrayTransformer } from './transformers/styles/create-combine-array-transformer';
+import { createMultiPropsTransformer } from './transformers/styles/create-multi-props-transformer';
+import { imageAttachmentTransformer } from './transformers/styles/image-attachment-transformer';
+import { imageSrcTransformer } from './transformers/styles/image-src-transformer';
+import { imageTransformer } from './transformers/styles/image-transformer';
+import { primitiveTransformer } from './transformers/styles/primitive-transformer';
+import { shadowTransformer } from './transformers/styles/shadow-transformer';
+import { sizeTransformer } from './transformers/styles/size-transformer';
+import { strokeTransformer } from './transformers/styles/stroke-transformer';
+
+export function initStyleTransformers() {
+	styleTransformersRegistry
+		.register( 'size', sizeTransformer )
+		.register( 'shadow', shadowTransformer )
+		.register( 'stroke', strokeTransformer )
+		.register(
+			'dimensions',
+			createMultiPropsTransformer(
+				[ 'top', 'right', 'bottom', 'left' ],
+				( { propKey, key } ) => `${ propKey }-${ key }`
+			)
+		)
+		.register( 'color', primitiveTransformer )
+		.register( 'number', primitiveTransformer )
+		.register( 'string', primitiveTransformer )
+		.register( 'url', primitiveTransformer )
+		.register( 'box-shadow', createCombineArrayTransformer( ',' ) )
+		.register( 'background', backgroundTransformer )
+		.register( 'background-overlay', createCombineArrayTransformer( ',' ) )
+		.register( 'background-color-overlay', backgroundColorOverlayTransformer )
+		.register( 'background-image-overlay', backgroundImageOverlayTransformer )
+		.register( 'background-image-position-offset', backgroundImagePositionOffsetTransformer )
+		.register( 'background-image-size-scale', backgroundImageSizeScaleTransformer )
+		.register( 'image-attachment-id', imageAttachmentTransformer )
+		.register( 'image-src', imageSrcTransformer )
+		.register( 'image', imageTransformer )
+		.register(
+			'layout-direction',
+			createMultiPropsTransformer( [ 'row', 'column' ], ( { propKey, key } ) => `${ key }-${ propKey }` )
+		)
+		.register(
+			'border-width',
+			createMultiPropsTransformer( [ 'top', 'right', 'bottom', 'left' ], ( { key } ) => `border-${ key }-width` )
+		)
+		.register(
+			'border-radius',
+			createMultiPropsTransformer(
+				[ 'start-start', 'start-end', 'end-start', 'end-end' ],
+				( { key } ) => `border-${ key }-radius`
+			)
+		);
+}

package/src/init-styles-renderer.ts

@@ -5,7 +5,7 @@ import { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v
 
 import { createPropsResolver } from './renderers/create-props-resolver';
 import renderStyles from './renderers/render-styles';
-import { styleTransformers } from './renderers/style-transformers';
+import { styleTransformersRegistry } from './style-transformers-registry';
 import { enqueueFont } from './sync/enqueue-font';
 import { getCanvasIframeBody } from './sync/get-canvas-iframe-body';
 
@@ -13,18 +13,21 @@ const WRAPPER_DATA_ATTR = 'data-styles-container';
 const SELECTOR_PREFIX = '.elementor';
 
 export function initStylesRenderer() {
-	let abortController: AbortController | null = null;
+	listenTo( v1ReadyEvent(), () => {
+		let abortController: AbortController | null = null;
 
-	const resolve = createPropsResolver( styleTransformers, { onPropResolve: enqueueUsedFonts } );
+		const resolve = createPropsResolver( {
+			transformers: styleTransformersRegistry.all(),
+			schema: getStylesSchema(),
+			onPropResolve: enqueueUsedFonts,
+		} );
 
-	listenTo( v1ReadyEvent(), () => {
 		stylesRepository.subscribe( async () => {
 			const styleContainer = getStylesContainer();
 
 			// Styles should be printed in a reversed order, so the high priority styles will be printed last.
 			const styles = stylesRepository.all().reverse();
 			const breakpoints = getBreakpointsMap();
-			const schema = getStylesSchema();
 
 			if ( abortController ) {
 				abortController.abort();
@@ -38,7 +41,6 @@ export function initStylesRenderer() {
 				breakpoints,
 				selectorPrefix: SELECTOR_PREFIX,
 				signal: abortController.signal,
-				schema,
 			} );
 		} );
 	} );

package/src/init.tsx

@@ -1,9 +1,11 @@
 import { injectIntoTop } from '@elementor/editor';
 
 import { ElementsOverlays } from './components/elements-overlays';
+import { initStyleTransformers } from './init-style-transformers';
 import { initStylesRenderer } from './init-styles-renderer';
 
 export function init() {
+	initStyleTransformers();
 	initStylesRenderer();
 
 	injectIntoTop( {

package/src/renderers/__tests__/create-props-resolver.test.ts

@@ -1,20 +1,21 @@
 import { createMockPropType } from 'test-utils';
 
+import { createTransformer } from '../../transformers/create-transformer';
 import { createPropsResolver } from '../create-props-resolver';
 
 describe( 'createPropsResolver', () => {
 	it( 'should resolve simple props', async () => {
 		// Arrange.
-		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+		const resolve = createPropsResolver( {
+			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			schema: { int: createMockPropType( { kind: 'plain', key: 'int' } ) },
+		} );
 
 		// Act.
 		const result = await resolve( {
 			props: {
 				int: { $$type: 'int', value: 0 },
 			},
-			schema: {
-				int: createMockPropType( { kind: 'plain', key: 'int' } ),
-			},
 		} );
 
 		// Assert.
@@ -23,7 +24,10 @@ describe( 'createPropsResolver', () => {
 
 	it( 'should skip disabled props', async () => {
 		// Arrange.
-		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+		const resolve = createPropsResolver( {
+			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			schema: { int: createMockPropType( { kind: 'plain', key: 'int' } ) },
+		} );
 
 		// Act.
 		const result = await resolve( {
@@ -34,9 +38,6 @@ describe( 'createPropsResolver', () => {
 					disabled: true,
 				},
 			},
-			schema: {
-				int: createMockPropType( { kind: 'plain', key: 'int' } ),
-			},
 		} );
 
 		// Assert.
@@ -45,11 +46,8 @@ describe( 'createPropsResolver', () => {
 
 	it( 'should fallback to default value when there is no value', async () => {
 		// Arrange.
-		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
-
-		// Act.
-		const result = await resolve( {
-			props: {},
+		const resolve = createPropsResolver( {
+			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
 			schema: {
 				int: createMockPropType( {
 					kind: 'plain',
@@ -59,13 +57,21 @@ describe( 'createPropsResolver', () => {
 			},
 		} );
 
+		// Act.
+		const result = await resolve( { props: {} } );
+
 		// Assert.
 		expect( result ).toEqual( { int: 4 } );
 	} );
 
 	it( 'should skip props that are not in the schema', async () => {
 		// Arrange.
-		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+		const resolve = createPropsResolver( {
+			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+			},
+		} );
 
 		// Act.
 		const result = await resolve( {
@@ -79,9 +85,6 @@ describe( 'createPropsResolver', () => {
 					value: 1,
 				},
 			},
-			schema: {
-				int: createMockPropType( { kind: 'plain', key: 'int' } ),
-			},
 		} );
 
 		// Assert.
@@ -90,7 +93,13 @@ describe( 'createPropsResolver', () => {
 
 	it( "should skip props that don't have a transformer", async () => {
 		// Arrange.
-		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+		const resolve = createPropsResolver( {
+			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				invalid: createMockPropType( { kind: 'plain', key: 'invalid' } ),
+			},
+		} );
 
 		// Act.
 		const result = await resolve( {
@@ -104,10 +113,6 @@ describe( 'createPropsResolver', () => {
 					value: 1,
 				},
 			},
-			schema: {
-				int: createMockPropType( { kind: 'plain', key: 'int' } ),
-				invalid: createMockPropType( { kind: 'plain', key: 'invalid' } ),
-			},
 		} );
 
 		// Assert.
@@ -116,9 +121,15 @@ describe( 'createPropsResolver', () => {
 
 	it( 'should skip props when their transformer throws an error', async () => {
 		const resolve = createPropsResolver( {
-			int: ( value ) => value + 1,
-			throws: () => {
-				throw new Error( 'Not Working!' );
+			transformers: {
+				int: createTransformer( ( value: number ) => value + 1 ),
+				throws: createTransformer< number >( () => {
+					throw new Error( 'Not Working!' );
+				} ),
+			},
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				invalid: createMockPropType( { kind: 'plain', key: 'throws' } ),
 			},
 		} );
 
@@ -134,10 +145,6 @@ describe( 'createPropsResolver', () => {
 					value: 1,
 				},
 			},
-			schema: {
-				int: createMockPropType( { kind: 'plain', key: 'int' } ),
-				invalid: createMockPropType( { kind: 'plain', key: 'throws' } ),
-			},
 		} );
 
 		// Assert.
@@ -147,7 +154,14 @@ describe( 'createPropsResolver', () => {
 	it( 'should trigger onResolve when resolving a prop', async () => {
 		const onResolve = jest.fn();
 
-		const resolve = createPropsResolver( { int: ( value ) => value + 1 }, { onPropResolve: onResolve } );
+		const resolve = createPropsResolver( {
+			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				int2: createMockPropType( { kind: 'plain', key: 'int' } ),
+			},
+			onPropResolve: onResolve,
+		} );
 
 		// Act.
 		await resolve( {
@@ -161,10 +175,6 @@ describe( 'createPropsResolver', () => {
 					value: 3,
 				},
 			},
-			schema: {
-				int: createMockPropType( { kind: 'plain', key: 'int' } ),
-				int2: createMockPropType( { kind: 'plain', key: 'int' } ),
-			},
 		} );
 
 		// Assert.

package/src/renderers/__tests__/render-styles.test.ts

@@ -1,18 +1,10 @@
 /* eslint-disable testing-library/render-result-naming-convention */
-import { createMockPropType } from 'test-utils';
 import type { BreakpointsMap } from '@elementor/editor-responsive';
-import { getStylesSchema, type StyleDefinition } from '@elementor/editor-styles';
+import { type StyleDefinition } from '@elementor/editor-styles';
 
 import renderStyles from '../render-styles';
-import { stylesSchemaMock } from './__mocks__/styles-schema';
-
-jest.mock( '@elementor/editor-styles' );
 
 describe( 'renderStyles', () => {
-	beforeEach( () => {
-		jest.mocked( getStylesSchema ).mockReturnValue( stylesSchemaMock );
-	} );
-
 	it( 'should render media queries', async () => {
 		// Arrange.
 		const styleDef: StyleDefinition = {
@@ -32,14 +24,12 @@ describe( 'renderStyles', () => {
 		};
 
 		const resolve = jest.fn( ( { props } ) => props );
-		const schema = { 'font-size': createMockPropType( { kind: 'plain', key: 'string' } ) };
 
 		// Act.
 		const cssString = await renderStyles( {
 			styles: [ styleDef ],
 			resolve,
 			breakpoints: { tablet: { width: 992, type: 'max-width' } } as BreakpointsMap,
-			schema,
 		} );
 
 		// Assert.
@@ -49,8 +39,8 @@ describe( 'renderStyles', () => {
 		expect( cssString ).toBe( `<style data-style-id="test">${ defaultStyle }${ tabletStyle }</style>` );
 
 		expect( resolve ).toHaveBeenCalledTimes( 2 );
-		expect( resolve ).toHaveBeenNthCalledWith( 1, { props: { 'font-size': '24px' }, schema } );
-		expect( resolve ).toHaveBeenNthCalledWith( 2, { props: { 'font-size': '18px' }, schema } );
+		expect( resolve ).toHaveBeenNthCalledWith( 1, { props: { 'font-size': '24px' } } );
+		expect( resolve ).toHaveBeenNthCalledWith( 2, { props: { 'font-size': '18px' } } );
 	} );
 
 	it( 'should render pseudo classes', async () => {
@@ -82,7 +72,6 @@ describe( 'renderStyles', () => {
 			styles: [ styleDef ],
 			resolve,
 			breakpoints: { mobile: { width: 768, type: 'max-width' } } as BreakpointsMap,
-			schema: { 'font-size': createMockPropType( { kind: 'plain', key: 'string' } ) },
 		} );
 
 		// Assert.
@@ -115,7 +104,6 @@ describe( 'renderStyles', () => {
 		const result = await renderStyles( {
 			styles: [ styleDef ],
 			resolve,
-			schema: getStylesSchema(),
 			selectorPrefix: '.elementor-prefix',
 			breakpoints: {} as BreakpointsMap,
 		} );

package/src/renderers/create-props-resolver.ts

@@ -7,16 +7,18 @@ import {
 	type PropValue,
 } from '@elementor/editor-props';
 
+import { type TransformersMap } from '../transformers/types';
 import { getMultiPropsValue, isMultiProps } from './multi-props';
-import { type TransformersMap } from './types';
 
-type CreatePropResolverOptions = {
+type CreatePropResolverArgs = {
+	transformers: TransformersMap;
+	schema: PropsSchema;
 	onPropResolve?: ( args: { key: string; value: unknown } ) => void;
 };
 
 type ResolveArgs = {
 	props: Props;
-	schema: PropsSchema;
+	schema?: PropsSchema;
 	signal?: AbortSignal;
 };
 
@@ -32,10 +34,33 @@ export type PropsResolver = ReturnType< typeof createPropsResolver >;
 
 const TRANSFORM_DEPTH_LIMIT = 3;
 
-export function createPropsResolver(
-	transformers: TransformersMap,
-	{ onPropResolve }: CreatePropResolverOptions = {}
-) {
+export function createPropsResolver( { transformers, schema: initialSchema, onPropResolve }: CreatePropResolverArgs ) {
+	async function resolve( { props, schema, signal }: ResolveArgs ) {
+		schema = schema ?? initialSchema;
+
+		const promises = Promise.all(
+			Object.entries( schema ).map( async ( [ key, type ] ) => {
+				const value = props[ key ] ?? type.default;
+
+				const transformed = await transform( { value, key, type, signal } );
+
+				if ( transformed === null ) {
+					return;
+				}
+
+				onPropResolve?.( { key, value: transformed } );
+
+				if ( isMultiProps( transformed ) ) {
+					return getMultiPropsValue( transformed );
+				}
+
+				return { [ key ]: transformed };
+			} )
+		);
+
+		return Object.assign( {}, ...( await promises ).filter( Boolean ) );
+	}
+
 	async function transform( { value, key, type, signal, depth = 0 }: TransformArgs ) {
 		if ( value === null || value === undefined ) {
 			return null;
@@ -95,29 +120,5 @@ export function createPropsResolver(
 		}
 	}
 
-	async function resolve( { props, schema, signal }: ResolveArgs ) {
-		const promises = Promise.all(
-			Object.entries( schema ).map( async ( [ key, type ] ) => {
-				const value = props[ key ] ?? type.default;
-
-				const transformed = await transform( { value, key, type, signal } );
-
-				if ( transformed === null ) {
-					return;
-				}
-
-				onPropResolve?.( { key, value: transformed } );
-
-				if ( isMultiProps( transformed ) ) {
-					return getMultiPropsValue( transformed );
-				}
-
-				return { [ key ]: transformed };
-			} )
-		);
-
-		return Object.assign( {}, ...( await promises ).filter( Boolean ) );
-	}
-
 	return resolve;
 }

package/src/renderers/render-styles.ts

@@ -1,4 +1,4 @@
-import { type Props, type PropsSchema } from '@elementor/editor-props';
+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';
 
@@ -8,7 +8,6 @@ import { UnknownStyleTypeError } from './errors';
 type RenderParams = {
 	resolve: PropsResolver;
 	styles: StyleDefinition[];
-	schema: PropsSchema;
 	breakpoints: BreakpointsMap;
 	selectorPrefix?: string;
 	signal?: AbortSignal;
@@ -16,7 +15,6 @@ type RenderParams = {
 
 type PropsToCssArgs = {
 	props: Props;
-	schema: PropsSchema;
 	resolve: PropsResolver;
 	signal?: AbortSignal;
 };
@@ -28,14 +26,13 @@ const SELECTORS_MAP: Record< StyleDefinitionType, string > = {
 export default async function renderStyles( {
 	resolve,
 	styles,
-	schema,
 	breakpoints,
 	selectorPrefix = '',
 	signal,
 }: RenderParams ) {
 	const stylesCssPromises = styles.map( async ( style ) => {
 		const variantCssPromises = Object.values( style.variants ).map( async ( variant ) => {
-			const css = await propsToCss( { props: variant.props, schema, resolve, signal } );
+			const css = await propsToCss( { props: variant.props, resolve, signal } );
 
 			return createStyleWrapper()
 				.forStyle( style )
@@ -95,8 +92,8 @@ function createStyleWrapper( value: string = '', wrapper?: ( css: string ) => st
 	};
 }
 
-async function propsToCss( { props, resolve, signal, schema }: PropsToCssArgs ) {
-	const transformed = await resolve( { props, schema, signal } );
+async function propsToCss( { props, resolve, signal }: PropsToCssArgs ) {
+	const transformed = await resolve( { props, signal } );
 
 	return Object.entries( transformed )
 		.reduce< string[] >( ( acc, [ propName, propValue ] ) => {

package/src/style-transformers-registry.ts

@@ -0,0 +1,3 @@
+import { createTransformersRegistry } from './transformers/create-transformers-registry';
+
+export const styleTransformersRegistry = createTransformersRegistry();

package/src/transformers/create-transformer.ts

@@ -0,0 +1,13 @@
+import { type AnyTransformable } from '@elementor/editor-props';
+
+import { type Transformer, type UnbrandedTransformer } from './types';
+
+// Wrap transformer for better DX (types).
+// Inspired by: https://tkdodo.eu/blog/the-query-options-api
+export function createTransformer< TValue = never >(
+	cb: TValue extends AnyTransformable
+		? 'Transformable values are invalid, use the actual value instead.'
+		: UnbrandedTransformer< TValue >
+): Transformer< NoInfer< TValue > > {
+	return cb as never;
+}