Rework transforms to require less CSS

[cbirdsong]

icon-block/src/index.scss

Line 53 in 611a4f9

/* There is likely a more efficient way to handle the rotation/flipping */

It's true! You could do this:

	&.rotate-90,
	.rotate-90 {
		svg {
			rotate: 90deg;
		}
	}

	&.rotate-180,
	.rotate-180 {
		svg {
			rotate: 180deg;
		}
	}

	&.rotate-270,
	.rotate-270 {
		svg {
			rotate: 270deg;
		}
	}

	&.flip-horizontal,
	.flip-horizontal {
		svg {
			scale: -1 1;
		}
	}

	&.flip-vertical,
	.flip-vertical {
		svg {
			scale: 1 -1;
		}
	}

	&.flip-vertical.flip-horizontal,
	.flip-vertical.flip-horizontal {
		svg {
			scale: -1 -1;
		}
	}

However, the rotate and scale CSS properties have much less browser support (~90%) compared to transform (~98%).

This PR uses custom properties instead:

	svg {
		transform: rotate(var(--outermost--icon-transform-rotate, 0deg)) scaleX(var(--outermost--icon-transform-scale-x, 1)) scaleY(var(--outermost--icon-transform-scale-y, 1));
	}

	&.rotate-90,
	.rotate-90 {
		--outermost--icon-transform-rotate: 90deg;
	}

	&.rotate-180,
	.rotate-180 {
		--outermost--icon-transform-rotate: 180deg;
	}

	&.rotate-270,
	.rotate-270 {
		--outermost--icon-transform-rotate: 270deg;
	}

	&.flip-horizontal,
	.flip-horizontal {
		--outermost--icon-transform-scale-x: -1;
	}

	&.flip-vertical,
	.flip-vertical {
		--outermost--icon-transform-scale-y: -1;
	}

	&.flip-vertical.flip-horizontal,
	.flip-vertical.flip-horizontal {
		--outermost--icon-transform-scale-x: -1;
		--outermost--icon-transform-scale-y: -1;
	}

They are much better supported (~96%) and are also used heavily in the editor CSS. This reduces the CSS sent to the front end by 40%, which sounds more impressive than "1,212 bytes".

[ndiego]

This looks great, thanks @cbirdsong. I just tweaked the variable names.