Skip to content

Tweak: Optimize CSS output for Masks [ED-20001]#31825

Merged
rami-elementor merged 4 commits intomainfrom
ED-20001-mask-css
Jul 13, 2025
Merged

Tweak: Optimize CSS output for Masks [ED-20001]#31825
rami-elementor merged 4 commits intomainfrom
ED-20001-mask-css

Conversation

@rami-elementor
Copy link
Copy Markdown
Member

@rami-elementor rami-elementor commented Jul 12, 2025 •
edited by gitstream-cm bot
Loading

When using masks on widgets/elements, the CSS output in post-{id}.css is as follows:

.elementor-18207 .elementor-element.elementor-element-db3efd9:not( .elementor-widget-image ) {
    -webkit-mask-image: url( http://dev.local/wp-content/plugins/elementor/assets/mask-shapes/blob.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
}
.elementor-18207 .elementor-element.elementor-element-db3efd9.elementor-widget-image img {
    -webkit-mask-image: url( http://dev.local/wp-content/plugins/elementor/assets/mask-shapes/blob.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
}

It can be optimized. The output can be cut by half and get the same result by consolidating duplicate style rules into a single selector. The final CSS will be as follows:

.elementor-18207 .elementor-element.elementor-element-db3efd9:not( .elementor-widget-image ),
.elementor-18207 .elementor-element.elementor-element-db3efd9.elementor-widget-image img {
    -webkit-mask-image: url( http://dev.local/wp-content/plugins/elementor/assets/mask-shapes/blob.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
}

Same result, smaller CSS.

✨ PR Description

Purpose: Optimize CSS output for Masks by consolidating duplicate selector rules into a single rule to reduce CSS file size.
Main changes:

  • Combined separate selectors for default and image masks into a single CSS selector with identical rules

Generated by LinearB AI and added by gitStream.
AI-generated content may contain inaccuracies. Please verify before using. We'd love your feedback! 🚀

gitstream-cm[bot]

This comment was marked as resolved.

Sign in to view

gitstream-cm[bot]

This comment was marked as resolved.

Sign in to view

@rami-elementor rami-elementor added the run-tests Runs Playwright tests on Pull request label Jul 13, 2025
gitstream-cm[bot]

This comment was marked as resolved.

Sign in to view

gitstream-cm[bot]

This comment was marked as resolved.

Sign in to view

@rami-elementor rami-elementor merged commit c95d3f0 into main Jul 13, 2025
63 checks passed
@rami-elementor rami-elementor deleted the ED-20001-mask-css branch July 13, 2025 10:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@gitstream-cm gitstream-cm[bot] gitstream-cm[bot] left review comments

@arielk arielk arielk approved these changes

@KingYes KingYes Awaiting requested review from KingYes

@nuritsha nuritsha Awaiting requested review from nuritsha

+1 more reviewer

@TzviRabinovitch TzviRabinovitch TzviRabinovitch approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

1 min review run-tests Runs Playwright tests on Pull request

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@rami-elementor @arielk @TzviRabinovitch @elementorbot