Remove all mixins supporting vendor prefixes (Fix #957)

CHANGELOG.md

@@ -6,6 +6,9 @@ The good news is we don't expect any visible changes in modern browsers and you
 
 Introducing theme variables! CSS variables beginning with `--theme-` will adjust based on media queries.
 
+## Browser Support
+
+* **css:** (breaking) Remove support for vendor prefixing (#957)
 
 ## Typography
 
@@ -65,6 +68,24 @@ See the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for
   * `type-scale()` function and associated lookup tables
   * `text-body-cta` mixin (use `text-body-md` instead)
 * You can remove `@supports (--css: variables)` blocks that only contain font declarations, as CSS custom properties are now required.
+* 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.
+  - Affected mixins are:
+    - `animation`
+    - `appearance`
+    - `background-size`
+    - `box-decoration-break`
+    - `box-sizing`
+    - `flexbox`, `flex`, `flex-direction`, `flex-wrap`, `align-items`, `justify-content`
+    - `grid*-gap`
+    - `inline-block`
+    - `multi-column*`
+    - `transform`, `transform-origin`, `transform-style`
+    - `transition`, `transition-property`, `transition-duration`, `transition-delay`
 
 # 22.0.0
 
@@ -152,6 +173,7 @@ See the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for
 
 * **fonts:** Any use of `font-mozilla` mixin should be replaced with `font-mozilla-headline`. NOTE: we recommend `font-mozilla-headline` only for text over 24px (below should be `font-mozilla-text`)
 * Headings are now [balanced](https://developer.mozilla.org/docs/Web/CSS/text-wrap-style#balanced_text), which can impact other wrapping rules. Make sure any changes to `h1`–`h6` rendering end up styled as expected, especially if you apply any `white-space`, `word-break` or `hyphens` customizations.
+
 * See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540)
 
 # 19.3.0

assets/sass/protocol/base/elements/_forms.scss

@@ -298,8 +298,8 @@ input[type='file'] {
 // with thanks to https://www.filamentgroup.com/lab/select-css.html
 
 select {
-    @include appearance(none);
-    @include border-box;
+    appearance: none;
+    box-sizing: border-box;
     @include bidi((
         (background-position, right 8px top 50%, left 8px top 50%),
         (padding, forms.$field-padding forms.$symbol-spacing forms.$field-padding forms.$field-padding, forms.$field-padding forms.$field-padding forms.$field-padding forms.$symbol-spacing),

assets/sass/protocol/base/elements/_reset.scss

@@ -75,7 +75,6 @@ img,
 video,
 object,
 embed {
-    -ms-interpolation-mode: bicubic;
     height: auto;
     max-width: 100%;
 }

assets/sass/protocol/components/_billboard.scss

@@ -13,7 +13,7 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med
     position: relative;
 
     .mzp-c-billboard-content {
-        @include border-box;
+        box-sizing: border-box;
         margin: 0 auto;
         max-width: 346px;
         text-align: center;
@@ -51,9 +51,9 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med
         }
 
         .mzp-c-billboard-content-container {
-            @include align-items(center);
-            @include flexbox;
-            @include justify-content(center);
+            align-items: center;
+            display: flex;
+            justify-content: center;
         }
 
         .mzp-c-billboard-image-container {
@@ -98,7 +98,7 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med
         margin: $layout-xl 0;
 
         .mzp-c-billboard-content {
-            @include border-box;
+            box-sizing: border-box;
             max-width: 374px;
         }
 

assets/sass/protocol/components/_button.scss

@@ -10,9 +10,9 @@
 // Button shape and size
 
 .mzp-c-button {
-    @include border-box;
+    box-sizing: border-box;
     @include font-size(16px);
-    @include transition(background-color 100ms, border-color 100ms, color 100ms);
+    transition: background-color 100ms, border-color 100ms, color 100ms;
     border: 2px solid transparent;
     cursor: pointer;
     display: inline-block;

assets/sass/protocol/components/_callout.scss

@@ -71,7 +71,7 @@
     @supports (display: grid) {
         @media #{$mq-md} {
             .mzp-l-content {
-                @include grid-column-gap($spacing-xl);
+                grid-column-gap: $spacing-xl;
                 display: grid;
                 grid-template-columns: 2fr 1fr;
             }
@@ -82,7 +82,7 @@
             }
 
             .mzp-c-callout-cta {
-                @include flexbox;
+                display: flex;
                 align-items: center;
                 justify-content: flex-end;
                 width: auto;

assets/sass/protocol/components/_card.scss

@@ -8,7 +8,7 @@
 // Base card class
 
 .mzp-c-card {
-    @include border-box;
+    box-sizing: border-box;
     background: $color-white;
     margin-bottom: $spacing-lg;
 
@@ -40,7 +40,7 @@
     }
 
     .mzp-c-card-content {
-        @include border-box;
+        box-sizing: border-box;
         padding: $spacing-sm;
     }
 
@@ -103,12 +103,12 @@
         &:hover,
         &:active,
         &:focus {
-            @include transition(box-shadow 0.1s ease-in-out);
+            transition: box-shadow 0.1s ease-in-out;
             box-shadow: 0 0 0 4px $color-marketing-gray-20;
 
             .mzp-c-card-title,
             .mzp-c-card-cta-text {
-                @include transition(border-bottom-color 100ms ease-in-out);
+                transition: border-bottom-color 100ms ease-in-out;
                 border-bottom: 2px solid;
             }
         }

assets/sass/protocol/components/_feature-card.scss

@@ -159,11 +159,11 @@
             &.mzp-l-card-feature-right-half,
             &.mzp-l-card-feature-left-third,
             &.mzp-l-card-feature-right-third {
-                @include grid-column-gap($spacing-xl);
+                grid-column-gap: $spacing-xl;
                 display: grid;
 
                 .mzp-c-card-feature-content {
-                    @include flexbox;
+                    display: flex;
                     align-items: center;
                 }
             }
@@ -220,7 +220,7 @@
             &.mzp-l-card-feature-right-half,
             &.mzp-l-card-feature-left-third,
             &.mzp-l-card-feature-right-third {
-                @include grid-column-gap($spacing-2xl);
+                grid-column-gap: $spacing-2xl;
             }
         }
     }

assets/sass/protocol/components/_footer.scss

@@ -37,8 +37,8 @@
 // Footer primary section, contains logo and sections with links
 
 .mzp-c-footer-primary {
+    box-sizing: border-box;
     margin: 0 auto $layout-sm;
-    @include border-box;
     @include clearfix;
     @include text-body-md;
 
@@ -59,7 +59,7 @@
 
     a {
         background: url('#{$image-path}/logos/mozilla/logo-lockup-hor-white.svg') no-repeat;
-        @include background-size(134px, 32px);
+        background-size: 134px, 32px;
         @include image-replaced;
         display: inline-block;
         height: 32px;
@@ -176,10 +176,9 @@
 
         button::before {
             background: $url-image-expand-white top left no-repeat;
-
-            @include background-size(24px, 24px);
+            background-size: 24px, 24px;
             @include bidi(((right, 8px, left, auto),));
-            @include transition(transform 100ms ease-in-out);
+            transition: transform 100ms ease-in-out;
             content: '';
             height: 24px;
             margin-top: -12px;
@@ -189,7 +188,7 @@
         }
 
         button[aria-expanded='true']::before {
-            @include transform(rotate(45deg));
+            transform: rotate(45deg);
         }
     }
 

assets/sass/protocol/components/_menu-item.scss

@@ -19,7 +19,7 @@ $icon-size: 24px;
         &:active,
         &:focus {
             .mzp-c-menu-item-title {
-                @include transition(border-bottom-color 100ms ease-in-out);
+                transition: border-bottom-color 100ms ease-in-out;
                 border-bottom: 2px solid $color-black;
                 color: $color-black;
             }
@@ -114,7 +114,7 @@ $icon-size: 24px;
 
     @media #{$mq-md} {
         &:hover {
-            @include transition(box-shadow 0.1s ease-in-out);
+            transition: box-shadow 0.1s ease-in-out;
             box-shadow: 0 0 0 4px $color-marketing-gray-20;
         }
 

assets/sass/protocol/components/_menu-list.scss

@@ -34,7 +34,7 @@
             @include bidi(((padding-right, $spacing-sm * 2 + 14px, padding-left, $spacing-sm),));
 
             &::after {
-                @include background-size(20px, 20px);
+                background-size: 20px, 20px;
                 @include bidi(((right, $spacing-sm, left, auto),));
                 bottom: $spacing-sm;
                 content: '';
@@ -83,7 +83,6 @@
             width: 100%;
 
             &::after {
-                @include background-size(20px, 20px);
                 @include bidi(((right, 0, left, auto),));
                 background: $url-image-caret-down-link center bottom no-repeat;
                 bottom: 1px;
@@ -92,12 +91,11 @@
                 position: absolute;
                 top: 0;
                 width: 16px;
-
-                @include transition(transform 200ms ease-in-out);
+                transition: transform 200ms ease-in-out;
             }
 
             &[aria-expanded='true']::after {
-                @include transform(scaleY(-1));
+                transform: scaleY(-1);
             }
 
             &:hover,

assets/sass/protocol/components/_menu.scss

@@ -75,10 +75,9 @@
 
         &::before {
             background: $url-image-expand-black top left no-repeat;
-
-            @include background-size(20px, 20px);
+            background-size: 20px 20px;
             @include bidi(((right, 8px, left, auto),));
-            @include transition(transform 100ms ease-in-out);
+            transition: transform 100ms ease-in-out;
             content: '';
             height: 20px;
             margin-top: -8px;
@@ -168,7 +167,7 @@
 .mzp-c-menu.mzp-is-enhanced .mzp-c-menu-category {
     &.mzp-is-selected {
         .mzp-c-menu-title::before {
-            @include transform(rotate(45deg));
+            transform: rotate(45deg);
         }
 
         .mzp-c-menu-panel {
@@ -181,7 +180,7 @@
         &.mzp-is-animated {
             .mzp-c-menu-panel,
             .mzp-c-menu-title::after {
-                @include animation(mzp-a-fade-in 80ms ease-in 0ms 1 normal both);
+                animation: mzp-a-fade-in 80ms ease-in 0ms 1 normal both; /* stylelint-disable-line no-unknown-animations */
             }
         }
 
@@ -204,7 +203,7 @@
 // Menu panel
 
 .mzp-c-menu-panel {
-    @include border-box;
+    box-sizing: border-box;
     background: $color-white;
     display: none;
     padding-top: $spacing-lg;
@@ -213,7 +212,7 @@
     // Close button is only visible for large screens.
     .mzp-c-menu-button-close {
         @include image-replaced;
-        @include transition(transform 100ms ease-in-out);
+        transition: transform 100ms ease-in-out;
         background: transparent url('#{$image-path}/icons/close.svg') center center / 125% no-repeat;
         border: none;
         cursor: pointer;
@@ -227,7 +226,7 @@
 
         &:hover,
         &:focus {
-            @include transform(scale(1.2));
+            transform: scale(1.2);
         }
 
         @media #{$mq-md} {
@@ -250,7 +249,7 @@
     }
 
     .mzp-c-menu-panel-container {
-        @include border-box;
+        box-sizing: border-box;
         margin: 0 auto;
         max-width: $content-max;
         padding: 0;

assets/sass/protocol/components/_modal.scss

@@ -31,7 +31,7 @@ html.mzp-is-noscroll {
 }
 
 .mzp-c-modal {
-    @include animation(mzp-a-fade-in 300ms ease-in 0ms 1 normal both);
+    animation: mzp-a-fade-in 300ms ease-in 0ms 1 normal both; /* stylelint-disable-line no-unknown-animations */
     background: $color-black;
     background: rgb(0, 0, 0, 0.85);
     bottom: 0;
@@ -79,9 +79,7 @@ html.mzp-is-noscroll {
 
     .mzp-c-modal-button-close {
         @include image-replaced;
-        background: transparent url('#{$image-path}/icons/close-white.svg') center center no-repeat;
-
-        @include background-size(20px 20px);
+        background: transparent url('#{$image-path}/icons/close-white.svg') center center / 20px 20px no-repeat;
         border: none;
         height: 42px;
         min-width: 0;
@@ -91,8 +89,8 @@ html.mzp-is-noscroll {
 
         &:hover,
         &:focus {
-            @include transition(transform 0.1s ease-in-out);
-            @include transform(scale(1.1));
+            transition: transform 0.1s ease-in-out;
+            transform: scale(1.1);
         }
 
         &:focus {