Remove all mixins supporting vendor prefixes (Fix #957)

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

Author: stephaniehobson

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;
         }