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

@@ -1,3 +1,28 @@
+# HEAD
+
+* **css:** (breaking) Remove support for vendor prefixing (#957)
+
+## 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-items`, `justify-content`
+    - `grid*-gap`
+    - `inline-block`
+    - `multi-column*`
+    - `transform`, `transform-origin`, `transform-style`
+    - `transition`, `transition-property`, `transition-duration`, `transition-delay`
+
 # 22.0.0
 
 ## Features
@@ -84,6 +109,7 @@
 
 * **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

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

@@ -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, box-shadow 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

@@ -38,7 +38,7 @@
 
 .mzp-c-footer-primary {
     @include text-body-md;
-    @include border-box;
+    box-sizing: border-box;
     @include clearfix;
     margin: 0 auto $layout-sm;
 
@@ -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;
@@ -171,10 +171,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;
@@ -184,7 +183,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

@@ -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,7 +87,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;
@@ -96,12 +95,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,