@elementor/editor-canvas 0.21.3 → 0.22.1

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renderStyles should render styles 1`] = `
+[
+  {
+    "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;}}",
+  },
+  {
+    "id": "test-2",
+    "value": ".custom-name{font-size:50px;}",
+  },
+]
+`;

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

@@ -1,72 +1,45 @@
 /* eslint-disable testing-library/render-result-naming-convention */
 import type { BreakpointsMap } from '@elementor/editor-responsive';
-import { type StyleDefinition } from '@elementor/editor-styles';
 
-import { createStylesRenderer } from '../create-styles-renderer';
+import { createStylesRenderer, type RendererStyleDefinition } from '../create-styles-renderer';
 
 describe( 'renderStyles', () => {
-	it( 'should render media queries', async () => {
+	it( 'should render styles', async () => {
 		// Arrange.
-		const styleDef: StyleDefinition = {
+		const styleDef: RendererStyleDefinition = {
 			id: 'test',
 			type: 'class',
+			cssName: 'test',
 			label: 'Test',
 			variants: [
 				{
 					meta: { breakpoint: null, state: null },
-					props: { 'font-size': '24px' },
+					props: { 'font-size': '10px' },
+				},
+				{
+					meta: { breakpoint: null, state: 'hover' },
+					props: { 'font-size': '20px' },
 				},
 				{
 					meta: { breakpoint: 'tablet', state: null },
-					props: { 'font-size': '18px' },
+					props: { 'font-size': '30px' },
+				},
+				{
+					meta: { breakpoint: 'mobile', state: 'focus' },
+					props: { 'font-size': '40px' },
 				},
 			],
 		};
 
-		const resolve = jest.fn( ( { props } ) => props );
-
-		const renderStyles = createStylesRenderer( {
-			breakpoints: { tablet: { width: 992, type: 'max-width' } } as BreakpointsMap,
-			resolve,
-		} );
-
-		// Act.
-		const result = await renderStyles( { styles: [ styleDef ] } );
-
-		// Assert.
-		const defaultStyle = '.test{font-size:24px;}';
-		const tabletStyle = '@media(max-width:992px){.test{font-size:18px;}}';
-
-		expect( result ).toEqual( [
-			{
-				id: 'test',
-				value: `${ defaultStyle }${ tabletStyle }`,
-			},
-		] );
-
-		expect( resolve ).toHaveBeenCalledTimes( 2 );
-		expect( resolve ).toHaveBeenNthCalledWith( 1, { props: { 'font-size': '24px' } } );
-		expect( resolve ).toHaveBeenNthCalledWith( 2, { props: { 'font-size': '18px' } } );
-	} );
-
-	it( 'should render pseudo classes', async () => {
-		// Arrange.
-		const styleDef: StyleDefinition = {
-			id: 'test',
+		const styleDefWithCssName: RendererStyleDefinition = {
+			id: 'test-2',
 			type: 'class',
-			label: 'Test',
+			cssName: 'custom-name',
+			label: 'Test 2',
 			variants: [
 				{
 					meta: { breakpoint: null, state: null },
-					props: { 'font-size': '24px' },
-				},
-				{
-					meta: { breakpoint: null, state: 'hover' },
-					props: { 'font-size': '18px' },
-				},
-				{
-					meta: { breakpoint: 'mobile', state: 'focus' },
-					props: { 'font-size': '12px' },
+					props: { 'font-size': '50px' },
 				},
 			],
 		};
@@ -74,31 +47,33 @@ describe( 'renderStyles', () => {
 		const resolve = jest.fn( ( { props } ) => props );
 
 		const renderStyles = createStylesRenderer( {
-			breakpoints: { mobile: { width: 768, type: 'max-width' } } as BreakpointsMap,
+			breakpoints: {
+				tablet: { width: 992, type: 'max-width' },
+				mobile: { width: 768, type: 'max-width' },
+			} as BreakpointsMap,
 			resolve,
 		} );
 
 		// Act.
-		const cssString = await renderStyles( { styles: [ styleDef ] } );
+		const result = await renderStyles( { styles: [ styleDef, styleDefWithCssName ] } );
 
 		// Assert.
-		const defaultStyle = '.test{font-size:24px;}';
-		const hoverStyle = '.test:hover{font-size:18px;}';
-		const focusStyle = '@media(max-width:768px){.test:focus{font-size:12px;}}';
-
-		expect( cssString ).toEqual( [
-			{
-				id: 'test',
-				value: `${ defaultStyle }${ hoverStyle }${ focusStyle }`,
-			},
-		] );
+		expect( result ).toMatchSnapshot();
+
+		expect( resolve ).toHaveBeenCalledTimes( 5 );
+		expect( resolve ).toHaveBeenNthCalledWith( 1, { props: { 'font-size': '10px' } } );
+		expect( resolve ).toHaveBeenNthCalledWith( 2, { props: { 'font-size': '20px' } } );
+		expect( resolve ).toHaveBeenNthCalledWith( 3, { props: { 'font-size': '30px' } } );
+		expect( resolve ).toHaveBeenNthCalledWith( 4, { props: { 'font-size': '40px' } } );
+		expect( resolve ).toHaveBeenNthCalledWith( 5, { props: { 'font-size': '50px' } } );
 	} );
 
 	it( 'should add selector prefix to the output', async () => {
 		// Arrange.
-		const styleDef: StyleDefinition = {
+		const styleDef: RendererStyleDefinition = {
 			id: 'test',
 			type: 'class',
+			cssName: 'test',
 			label: 'Test',
 			variants: [
 				{

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

@@ -18,8 +18,12 @@ type CreateStyleRendererArgs = {
 	selectorPrefix?: string;
 };
 
+export type RendererStyleDefinition = StyleDefinition & {
+	cssName: string;
+};
+
 type StyleRendererArgs = {
-	styles: StyleDefinition[];
+	styles: RendererStyleDefinition[];
 	signal?: AbortSignal;
 };
 
@@ -40,7 +44,7 @@ export function createStylesRenderer( { resolve, breakpoints, selectorPrefix = '
 				const css = await propsToCss( { props: variant.props, resolve, signal } );
 
 				return createStyleWrapper()
-					.forStyle( style )
+					.for( style.cssName, style.type )
 					.withPrefix( selectorPrefix )
 					.withState( variant.meta.state )
 					.withMediaQuery( variant.meta.breakpoint ? breakpoints[ variant.meta.breakpoint ] : null )
@@ -61,14 +65,14 @@ export function createStylesRenderer( { resolve, breakpoints, selectorPrefix = '
 
 function createStyleWrapper( value: string = '', wrapper?: ( css: string ) => string ) {
 	return {
-		forStyle: ( { id, type }: StyleDefinition ) => {
+		for: ( cssName: RendererStyleDefinition[ 'cssName' ], type: RendererStyleDefinition[ 'type' ] ) => {
 			const symbol = SELECTORS_MAP[ type ];
 
 			if ( ! symbol ) {
 				throw new UnknownStyleTypeError( { context: { type } } );
 			}
 
-			return createStyleWrapper( `${ value }${ symbol }${ id }`, wrapper );
+			return createStyleWrapper( `${ value }${ symbol }${ cssName }`, wrapper );
 		},
 
 		withPrefix: ( prefix: string ) =>

package/src/transformers/settings/classes-transformer.ts

@@ -0,0 +1,31 @@
+import { stylesRepository } from '@elementor/editor-styles-repository';
+
+import { createTransformer } from '../create-transformer';
+
+export function createClassesTransformer() {
+	const cache = new Map< string, string >();
+
+	return createTransformer( ( value: string[] ) => {
+		return value
+			.map( ( id ) => {
+				if ( ! cache.has( id ) ) {
+					cache.set( id, getCssName( id ) );
+				}
+
+				return cache.get( id );
+			} )
+			.filter( Boolean );
+	} );
+}
+
+function getCssName( id: string ) {
+	const provider = stylesRepository.getProviders().find( ( p ) => {
+		return p.actions.all().find( ( style ) => style.id === id );
+	} );
+
+	if ( ! provider ) {
+		return id;
+	}
+
+	return provider.actions.resolveCssName( id );
+}

package/src/transformers/settings/array-transformer.ts

@@ -1,5 +0,0 @@
-import { createTransformer } from '../create-transformer';
-
-export const arrayTransformer = createTransformer( ( value: unknown[] ) => {
-	return value.filter( Boolean );
-} );