From 0bada3abf104a4983b7869a42a1994daae712c74 Mon Sep 17 00:00:00 2001
From: Elliot Winkler <elliot.winkler@gmail.com>
Date: Fri, 7 Jan 2022 12:17:21 -0700
Subject: [PATCH] Clear Sass deprecations (#13227)

Sass has changed the syntax for dividing two numbers. Previously you
would use `/`, but because this causes some ambiguity with color
functions (`rgb()`, `rgba()`, and the like), where `/` is regularly used
to separate color channel information from an alpha value, Sass has
deprecate the use of `/` for division. [1]

This commit converts all such usages to use `math.div()` instead. This
is a little bit difficult because there are a few places in
`@fortawesome/fontawesome-free` which use the old syntax. There is an
issue open here about it [2] but that has not been fixed yet. So we have
to patch this package to make the deprecation warnings go away.

[1]: https://sass-lang.com/documentation/breaking-changes/slash-div
[2]: https://github.com/FortAwesome/Font-Awesome/issues/18371
---
 ...@fortawesome+fontawesome-free+5.13.0.patch | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 patches/@fortawesome+fontawesome-free+5.13.0.patch

diff --git a/patches/@fortawesome+fontawesome-free+5.13.0.patch b/patches/@fortawesome+fontawesome-free+5.13.0.patch
new file mode 100644
index 000000000..f3d47f421
--- /dev/null
+++ b/patches/@fortawesome+fontawesome-free+5.13.0.patch
@@ -0,0 +1,55 @@
+diff --git a/node_modules/@fortawesome/fontawesome-free/scss/_larger.scss b/node_modules/@fortawesome/fontawesome-free/scss/_larger.scss
+index 27c2ad5..5b82984 100644
+--- a/node_modules/@fortawesome/fontawesome-free/scss/_larger.scss
++++ b/node_modules/@fortawesome/fontawesome-free/scss/_larger.scss
+@@ -1,10 +1,12 @@
++@use "sass:math";
++
+ // Icon Sizes
+ // -------------------------
+ 
+ // makes the font 33% larger relative to the icon container
+ .#{$fa-css-prefix}-lg {
+-  font-size: (4em / 3);
+-  line-height: (3em / 4);
++  font-size: math.div(4em, 3);
++  line-height: math.div(3em, 4);
+   vertical-align: -.0667em;
+ }
+ 
+diff --git a/node_modules/@fortawesome/fontawesome-free/scss/_list.scss b/node_modules/@fortawesome/fontawesome-free/scss/_list.scss
+index 8ebf333..233923a 100644
+--- a/node_modules/@fortawesome/fontawesome-free/scss/_list.scss
++++ b/node_modules/@fortawesome/fontawesome-free/scss/_list.scss
+@@ -1,9 +1,11 @@
++@use "sass:math";
++
+ // List Icons
+ // -------------------------
+ 
+ .#{$fa-css-prefix}-ul {
+   list-style-type: none;
+-  margin-left: $fa-li-width * 5/4;
++  margin-left: $fa-li-width * math.div(5, 4);
+   padding-left: 0;
+ 
+   > li { position: relative; }
+diff --git a/node_modules/@fortawesome/fontawesome-free/scss/_variables.scss b/node_modules/@fortawesome/fontawesome-free/scss/_variables.scss
+index fad7705..d0da3ae 100644
+--- a/node_modules/@fortawesome/fontawesome-free/scss/_variables.scss
++++ b/node_modules/@fortawesome/fontawesome-free/scss/_variables.scss
+@@ -1,3 +1,5 @@
++@use "sass:math";
++
+ // Variables
+ // --------------------------
+ 
+@@ -9,7 +11,7 @@ $fa-version:           "5.13.0" !default;
+ $fa-border-color:      #eee !default;
+ $fa-inverse:           #fff !default;
+ $fa-li-width:          2em !default;
+-$fa-fw-width:          (20em / 16);
++$fa-fw-width:          math.div(20em, 16);
+ $fa-primary-opacity:   1 !default;
+ $fa-secondary-opacity: .4 !default;
+