Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Rework transforms to require less CSS#32

Merged
ndiego merged 6 commits into
ndiego:mainfrom
cbirdsong:main
Jul 29, 2023
Merged

Rework transforms to require less CSS#32
ndiego merged 6 commits into
ndiego:mainfrom
cbirdsong:main

Conversation

@cbirdsong

@cbirdsong cbirdsong commented Apr 19, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor

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

@ndiego ndiego left a comment

Copy link
Copy Markdown
Owner

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