Rework transforms to require less CSS

[cbirdsong]

https://github.com/ndiego/icon-block/blob/611a4f9624c556b04e88ed5daf4475c214eb3c2b/src/index.scss#L53 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".