From d0f8560c331af984ec053032910461d6a8cbcf5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 19 Jun 2021 15:17:04 +0200
Subject: [PATCH] Fix SVG icons on old browsers

We were using an `@extend` selector inside a `@supports` condition,
which didn't generate the `@supports` clause as we intended to, so
browsers with no support for mask images were still applying properties
which were meant for browsers with support for mask images.
---
 app/assets/stylesheets/mixins/icons.scss | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss
index aced0dc28fc..e7cf32e2ca7 100644
--- a/app/assets/stylesheets/mixins/icons.scss
+++ b/app/assets/stylesheets/mixins/icons.scss
@@ -6,12 +6,14 @@
 }
 
 %svg-icon {
-  background: currentcolor;
-  content: "";
-  height: 1em;
-  mask-repeat: no-repeat;
-  mask-size: 100% 100%;
-  width: 1em;
+  @supports (mask-image: url()) {
+    background: currentcolor;
+    content: "";
+    height: 1em;
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    width: 1em;
+  }
 }
 
 %admin-menu-icon {
@@ -37,11 +39,8 @@
     }
   }
 
-  @supports (mask-image: url()) {
-
-    &::#{$position} {
-      @extend %svg-icon;
-      mask-image: image-url("fontawesome/#{$style}/#{$icon}.svg");
-    }
+  &::#{$position} {
+    @extend %svg-icon;
+    mask-image: image-url("fontawesome/#{$style}/#{$icon}.svg");
   }
 }