Skip to content
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.

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

Add SVG pre-commit check to avoid broken colors when using style tags #92744

Closed
wants to merge 1 commit into from

Conversation

ckaiser
Copy link
Contributor

@ckaiser ckaiser commented Jun 4, 2024

Added a pygrep-based check to pre-commit that checks if any fill, stroke and stop-color properties are being set inside style tags in SVG, this prevents introducing icons that will have broken colors in light modes.

I've ran into this issue twice before in #92504 and #91821, because ImageLoaderSVG does a search & replace on the attribute values but not the style tags, and rather than complicate that code it's probably simpler to just avoid committing SVG it doesn't like in the first place.

@ckaiser ckaiser requested a review from a team as a code owner June 4, 2024 02:40
@akien-mga akien-mga added this to the 4.x milestone Jun 4, 2024
@akien-mga
Copy link
Member

CC @MewPurPur

@MewPurPur
Copy link
Contributor

IMO we could just reject the style attribute altogether, they are almost always sign of stuff being unoptimized. But this is fine too.

@ckaiser
Copy link
Contributor Author

ckaiser commented Jun 4, 2024

Another solution could be running SVGO with the convertStyleToAttrs plugin, and as a bonus we get uniformly optimized svg files.

We're already setting up a node environment for eslint in pre-commit so it wouldn't be that much extra work.

@MewPurPur
Copy link
Contributor

No strong opinion here, I think it's up to Akien to determine if we should run an SVG optimizer constantly. But checking for style attributes which can actually cause bugs seems like a great idea. Currently contributors are supposed to run an optimizer themselves, but sometimes it's not enforced, or it's not immediately clear by reviewers that the file wasn't optimized.

I was going to do another rundown of the repository at some point and see if I can trim a couple kilobytes off of the editor/icons folder by cleaning up the SVGs manually.

@Repiteo
Copy link
Contributor

Repiteo commented Jun 4, 2024

I've actually played around with an svgo pre-commit hook before, and it indeed works like a charm! It shouldn't be that difficult to setup here; I'll draft up an alternative to showcase how it'll function compared to this implementation

@ckaiser
Copy link
Contributor Author

ckaiser commented Jun 17, 2024

Closing in favor of #92766

@Repiteo Repiteo removed this from the 4.x milestone Jun 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants