Remove all mixins supporting vendor prefixes (Fix #957)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Features
 
+* **css:** (breaking) Remove support for vendor prefixing (#957)
 * **css:** Apply hover cursor from Details component to Details element (#948)
 
 ## Bug Fixes
@@ -10,6 +11,21 @@
 
 ## Migration Tips
 
+* 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-itmes`, `justify-content,`
+    - `transform`, `transform-origin`, `transform-style`
+    - `transition`, `transition-property`, `transition-duration`, `transition-delay`
 * See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540)
 
 # 19.3.0
@@ -58,7 +74,7 @@
 * Update references to the `call-out` SCSS file to `callout` in any `@import` or `@use` rules.
   ** e.g. `@use 'components/call-out';` should change to `@use 'components/callout';`
 * The rebuilt Callout doesn't feature integrated brand logos. Use Logo and Wordmark components instead.
-* The rebuilt Compact Callout lacks an integrated logo, so it no longer positions the logo at one end of the component. A Logo or Wordmark component should appear in the body instead.
+* The rebuilt Compact Callout lacks an integrated logo`, `so it no longer positions the logo at one end of the component. A Logo or Wordmark component should appear in the body instead.
 * Convert any instances of the Hero component to either Split or Callout.
 * Convert any instances of the Picto Card component to Picto.
 

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

@@ -295,8 +295,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/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

@@ -78,9 +78,9 @@
 
 .mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
 a.mzp-c-button {
-    @include border-box;
+    box-sizing: border-box;
     @include font-size(16px);
-    @include transition(background-color 100ms, box-shadow 100ms, color 100ms);
+    transition: background-color 100ms, box-shadow 100ms, color 100ms;
     border-radius: $border-radius-sm;
     border: 2px solid transparent;
     cursor: pointer;

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;
     }
 
@@ -107,12 +107,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

@@ -36,7 +36,7 @@
 
 .mzp-c-footer-primary {
     @include text-body-md;
-    @include border-box;
+    box-sizing: border-box;
     @include clearfix;
     margin: 0 auto $spacing-2xl;
 
@@ -53,8 +53,7 @@
 
     a {
         background: url('#{$image-path}/logos/mozilla/logo-word-hor-white.svg') no-repeat;
-
-        @include background-size(100px, 32px);
+        background-size: 100px, 32px;
         @include image-replaced;
         display: inline-block;
         height: 32px;
@@ -159,10 +158,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;
@@ -172,7 +170,7 @@
         }
 
         button[aria-expanded='true']::before {
-            @include transform(rotate(45deg));
+            transform: rotate(45deg);
         }
     }
 

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

@@ -27,7 +27,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;
             }
@@ -118,7 +118,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

@@ -38,7 +38,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: '';
@@ -87,21 +87,19 @@
             width: 100%;
 
             &::after {
-                @include background-size(20px, 20px);
                 @include bidi(((right, 0, left, auto),));
-                background: $url-image-arrow-down-link center bottom no-repeat;
+                background: $url-image-arrow-down-link center bottom / 20px, 20px no-repeat;
                 bottom: 1px;
                 content: '';
                 display: inline-block;
                 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

@@ -74,11 +74,9 @@
         text-decoration: none;
 
         &::before {
-            background: $url-image-expand-black top left no-repeat;
-
-            @include background-size(20px, 20px);
+            background: $url-image-expand-black top left / 20px, 20px no-repeat;
             @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 +166,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 +179,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;
             }
         }
 
@@ -204,7 +202,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 +211,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 no-repeat;
         border: none;
         cursor: pointer;
@@ -227,7 +225,7 @@
 
         &:hover,
         &:focus {
-            @include transform(scale(1.2));
+            transform: scale(1.2);
         }
 
         @media #{$mq-md} {
@@ -250,7 +248,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;
     background: $color-black;
     background: rgba(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 {