Remove all mixins supporting vendor prefixes (Fix #957) #1043

stephaniehobson · 2025-03-20T23:16:58Z

Description

This version removes mixins which added vendor-prefixes. Browser support for these is now excellent.

I have recorded this change in CHANGELOG.md.

Issue

Fix #957

Testing

View the affected components to make sure they are still displaying properly.

janbrasna

💟 Love it!

Unfortunately I can't seem to identify the mzp-a-fade-* build issue just from glancing it, pretty sure it's all in the correct order… 🤷

Some copy/formatting nits in the meantime:

CHANGELOG.md

stephaniehobson · 2025-05-15T04:14:59Z

I'm pretty sure the mzp-a-fade-* build issue has turned up because I'm actually declaring an animation in the code now - instead of what we were doing before which was use an include that was not being evaluated for validity. So, a nice side affect of the change is better linting! The downside is I think we have to disable the rule since Stylelint doesn't evaluate Sass includes/use rules.

maureenlholland · 2025-07-09T15:26:23Z

Do Not Merge until Icon release is published

janbrasna · 2025-09-30T21:33:27Z

assets/sass/protocol/includes/mixins/_utils.scss

-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-}
-
-@mixin flex($values: auto) {
-    -webkit-box-flex: $values;
-    -moz-box-flex: $values;
-    -webkit-flex: $values;
-    flex: $values;
-}
-
-@mixin flex-direction($value: column) {
-    -webkit-box-direction: $value;
-    flex-direction: $value;
-}
-
-@mixin flex-wrap($value: wrap) {
-    -ms-flex-wrap: $value;
-    flex-wrap: $value;
-}
-
-@mixin align-items($align: stretch) {
-    -webkit-box-align: $align;
-    align-items: $align;
-}
-
-@mixin justify-content($justify: flex-start) {
-    -webkit-box-pack: $justify;


FYI these all might be necessary to remove before upgrading https://github.com/mozilla/protocol/actions/runs/17982808350/job/51153182926 — what's interesting is that new property-no-deprecated rule uncovered a handful of other occurrences directly in the components and declarations.

(I'll probably open a separate issue for visibility.)

Copilot

Pull request overview

This PR removes mixins that added vendor prefixes for CSS properties, as modern browser support for these properties is now universal. The change affects numerous components and base styles across the Protocol design system.

Key Changes:

Removed all vendor-prefix utility mixins from _utils.scss (transition, transform, flexbox, border-box, appearance, etc.)
Replaced mixin calls throughout components with standard CSS properties
Updated changelog with migration guidance and list of affected mixins

Reviewed changes

Copilot reviewed 23 out of 23 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`assets/sass/protocol/includes/mixins/_utils.scss`	Removed vendor-prefix mixins (transition, transform, flexbox, border-box, appearance, animation, etc.)
`assets/sass/protocol/includes/mixins/_grid.scss`	Replaced `border-box` mixin calls with standard CSS property
`assets/sass/protocol/includes/mixins/_details.scss`	Replaced `background-size`, `transition`, and `transform` mixin calls
`assets/sass/protocol/includes/forms/_index.scss`	Replaced `border-box` mixin calls with standard property
`assets/sass/protocol/components/forms/_choice.scss`	Replaced `border-box` mixin with standard property
`assets/sass/protocol/components/_sticky-promo.scss`	Replaced `animation` and `background-size` mixins
`assets/sass/protocol/components/_split.scss`	Replaced `border-box` mixin calls
`assets/sass/protocol/components/_sidebar-menu.scss`	Replaced `transform` mixin call
`assets/sass/protocol/components/_picto.scss`	Replaced `border-box` mixin call
`assets/sass/protocol/components/_notification-bar.scss`	Replaced `border-box` mixin call
`assets/sass/protocol/components/_navigation.scss`	Replaced `transition`, `transform`, and `background-size` mixin calls
`assets/sass/protocol/components/_modal.scss`	Replaced `animation`, `background-size`, `transition`, and `transform` mixin calls
`assets/sass/protocol/components/_menu.scss`	Replaced `border-box`, `transition`, `transform`, and `animation` mixin calls
`assets/sass/protocol/components/_menu-list.scss`	Replaced `background-size`, `transition`, and `transform` mixin calls
`assets/sass/protocol/components/_menu-item.scss`	Replaced `transition` mixin calls
`assets/sass/protocol/components/_footer.scss`	Replaced `border-box`, `background-size`, `transition`, and `transform` mixin calls
`assets/sass/protocol/components/_feature-card.scss`	Replaced `grid-column-gap` and `flexbox` mixin calls
`assets/sass/protocol/components/_card.scss`	Replaced `border-box` and `transition` mixin calls
`assets/sass/protocol/components/_callout.scss`	Replaced `grid-column-gap` and `flexbox` mixin calls
`assets/sass/protocol/components/_button.scss`	Replaced `border-box` and `transition` mixin calls
`assets/sass/protocol/components/_billboard.scss`	Replaced `border-box`, `align-items`, `flexbox`, and `justify-content` mixin calls
`assets/sass/protocol/base/elements/_forms.scss`	Replaced `appearance` and `border-box` mixin calls
`CHANGELOG.md`	Added changelog entry with migration guidance and list of affected mixins

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

assets/sass/protocol/components/_modal.scss

assets/sass/protocol/components/_button.scss

assets/sass/protocol/components/_menu.scss

stephaniehobson · 2026-01-07T18:40:37Z

I ran some visual regression tests against this branch locally and no differences were found in Chrome.

This version removes mixins which added vendor-prefixes. Browser support for these is now excellent. - One migration path is to edit your code to use the unprefixed versions. - Another option is to move these utility mixins into your own code base (though, be aware they are no longer used in Protocol and this will not give you backwards compatible Protocol components). - If you need that level of vendor prefix support consider adding a tool such as [autoprefixer](https://github.com/postcss/autoprefixer) to your code base. - Effected mixins are: - `animation` - `appearance` - `background-size` - `box-decoration-break` - `box-sizing` - `flexbox`, `flex`, `flex-direction`, `flex-wrap`, `align-itmes`, `justify-content,` - `transform`, `transform-origin`, `transform-style` - `transition`, `transition-property`, `transition-duration`, `transition-delay` - Disable no-unknown-animation rule on animations

stephaniehobson added the Do Not Merge ⚠️ Do Not Merge label Mar 20, 2025

stephaniehobson force-pushed the vendor branch 2 times, most recently from 559b65b to e535cd3 Compare March 20, 2025 23:31

janbrasna reviewed Mar 28, 2025

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

CHANGELOG.md Outdated Show resolved Hide resolved

CHANGELOG.md Show resolved Hide resolved

stephaniehobson force-pushed the vendor branch from e535cd3 to 5456249 Compare May 14, 2025 20:53

stephaniehobson force-pushed the vendor branch from 34eff14 to a583594 Compare May 15, 2025 04:24

stephaniehobson mentioned this pull request Aug 12, 2025

Protocol v23 #1084

Open

janbrasna reviewed Sep 30, 2025

View reviewed changes

stephaniehobson removed the Do Not Merge ⚠️ Do Not Merge label Jan 6, 2026

stephaniehobson force-pushed the vendor branch 2 times, most recently from e0578a6 to 19d2f6c Compare January 6, 2026 21:45

stephaniehobson marked this pull request as ready for review January 6, 2026 21:46

stephaniehobson requested a review from Copilot January 6, 2026 21:46

Copilot AI reviewed Jan 6, 2026

View reviewed changes

assets/sass/protocol/components/_modal.scss Outdated Show resolved Hide resolved

assets/sass/protocol/components/_button.scss Outdated Show resolved Hide resolved

assets/sass/protocol/components/_menu.scss Show resolved Hide resolved

stephaniehobson added the Needs:Review 👋 Ready for Developer Review label Jan 7, 2026

stephaniehobson requested a review from maureenlholland January 7, 2026 18:40

stephaniehobson force-pushed the vendor branch from e9a7ea7 to 921576a Compare January 7, 2026 19:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Remove all mixins supporting vendor prefixes (Fix #957) #1043

Remove all mixins supporting vendor prefixes (Fix #957) #1043

Uh oh!

stephaniehobson commented Mar 20, 2025 •

edited

Loading

Uh oh!

janbrasna left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

stephaniehobson commented May 15, 2025

Uh oh!

maureenlholland commented Jul 9, 2025

Uh oh!

janbrasna Sep 30, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

stephaniehobson commented Jan 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Remove all mixins supporting vendor prefixes (Fix #957) #1043

Are you sure you want to change the base?

Remove all mixins supporting vendor prefixes (Fix #957) #1043

Uh oh!

Conversation

stephaniehobson commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Issue

Testing

Uh oh!

janbrasna left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

stephaniehobson commented May 15, 2025

Uh oh!

maureenlholland commented Jul 9, 2025

Uh oh!

janbrasna Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

stephaniehobson commented Jan 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

stephaniehobson commented Mar 20, 2025 •

edited

Loading