Skip to content

Rework transforms to require less CSS #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
ndiego merged 6 commits into from
Jul 29, 2023
Merged

Rework transforms to require less CSS #32

ndiego merged 6 commits into from
Jul 29, 2023

Conversation

@cbirdsong
Copy link
Contributor

@cbirdsong cbirdsong commented Apr 19, 2023 •
edited
Loading

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
ndiego approved these changes Jul 29, 2023
View reviewed changes
Copy link
Owner

@ndiego ndiego left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@ndiego ndiego merged commit e78fa7f into ndiego:main Jul 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ndiego ndiego ndiego approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@cbirdsong @ndiego