[4.2] Remove the SCSS deprecations

build/build-modules-js/init/patches.es6.js

@@ -29,4 +29,11 @@ module.exports.patchPackages = async (options) => {
   let ShortandsweetJs = await readFile(shortandsweetPath, { encoding: 'utf8' });
   ShortandsweetJs = ShortandsweetJs.concat('shortAndSweet(\'textarea.charcount\', {counterClassName: \'small text-muted\'});');
   await writeFile(shortandsweetPath, ShortandsweetJs, { encoding: 'utf8', mode: 0o644 });
+
+  // Include the v5 shim for Font Awesome
+  const faPath = join(mediaVendorPath, 'fontawesome-free/scss/fontawesome.scss');
+  const newScss = (await readFile(faPath, { encoding: 'utf8' })).concat(`
+@import 'shims';
+`);
+  await writeFile(faPath, newScss, { encoding: 'utf8', mode: 0o644 });
 };

build/media_source/com_media/scss/components/_layout.scss

@@ -27,8 +27,8 @@
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: ($col-gutter-width / 2);
-  padding-left: ($col-gutter-width / 2);
+  padding-right: $col-gutter-width * .5;
+  padding-left: $col-gutter-width * .5;
 }
 
 @media (min-width: var(--breakpoint-md)) {

build/media_source/com_media/scss/components/_media-browser.scss

@@ -90,7 +90,7 @@
     left: 0;
     width: calc(#{$grid-item-icon-size} * 1.3);
     height: calc(#{$grid-item-icon-size} * 1.3);
-    font-family: "Font Awesome 5 Free";
+    font-family: "Font Awesome 6 Free";
     font-size: $grid-item-icon-size;
     font-weight: 900;
     line-height: calc(#{$grid-item-icon-size} * 1.3);
@@ -329,7 +329,7 @@
       transition: all .2s cubic-bezier(.4, 0, .2, 1);
     }
     &::before {
-      font-family: "Font Awesome 5 Free";
+      font-family: "Font Awesome 6 Free";
       color: $table-item-icon-color;
       .selected & {
         color: $table-item-icon-color-selected;

build/media_source/com_media/scss/components/_media-infobar.scss

@@ -27,16 +27,16 @@ $fa-css-prefix:    fa;
   dl {
     display: flex;
     flex-wrap: wrap;
-    margin-right: -($col-gutter-width / 2);
-    margin-left: -($col-gutter-width / 2);
+    margin-right: -($col-gutter-width * .5);
+    margin-left: -($col-gutter-width * .5);
   }
   dt, dd {
     position: relative;
     direction: ltr;
     width: 100%;
     min-height: 1px;
-    padding-right: ($col-gutter-width / 2);
-    padding-left: ($col-gutter-width / 2);
+    padding-right: $col-gutter-width * .5;
+    padding-left: $col-gutter-width * .5;
     [dir=rtl] & {
       text-align: end;
     }

build/media_source/com_media/scss/components/_media-tree.scss

@@ -41,7 +41,7 @@ ul.media-tree {
   display: block;
   &::before {
     position: absolute;
-    top: ($sidebar-tree-line-height / 2);
+    top: $sidebar-tree-line-height * .5;
     left: 0;
     width: 10px;
     height: 1px;
@@ -61,7 +61,7 @@ ul.media-tree {
   }
   &:last-child {
     &::after {
-      height: ($sidebar-tree-line-height / 2);
+      height: $sidebar-tree-line-height * .5;
     }
   }
   li {

build/media_source/plg_system_debug/widgets/languageStrings/widget.css

@@ -44,7 +44,7 @@ table.phpdebugbar-widgets-languageStrings span.phpdebugbar-widgets-eye-dash {
 
 table.phpdebugbar-widgets-languageStrings span.phpdebugbar-widgets-eye:before,
 table.phpdebugbar-widgets-languageStrings span.phpdebugbar-widgets-eye-dash:before {
-    font-family:"Font Awesome 5 Free";
+    font-family:"Font Awesome 6 Free";
     margin-right: 4px;
     /*font-size: 12px;*/
 }

build/media_source/plg_system_debug/widgets/sqlqueries/widget.css

@@ -49,7 +49,7 @@ div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-eye:before,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-eye-dash:before,
 div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id:before,
 div.phpdebugbar-widgets-sqlqueries a.phpdebugbar-widgets-editor-link:before {
-    font-family: "Font Awesome 5 Free";
+    font-family: "Font Awesome 6 Free";
     margin-right: 4px;
     font-size: 12px;
     font-weight: 900;

build/media_source/system/scss/fields/switcher.scss

@@ -75,12 +75,12 @@ $switcher-height: 28px;
 .switcher .toggle-inside {
   position: absolute;
   left: 0;
-  width: ($switcher-width - 6) / 2;
+  width: ($switcher-width - 6) * .5;
   height: $switcher-height;
   background: #fff;
   transition: .4s ease all;
 }
 
 .switcher input ~ input:checked ~ .toggle-outside .toggle-inside {
-  left: ($switcher-width / 2) - 1;
+  left: ($switcher-width * .5) - 1;
 }

build/media_source/system/scss/joomla-fontawesome.scss

@@ -2,7 +2,7 @@
 $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts" !default;
 $fa-font-display: block !default;
 
-// Font Awesome 5 Free
+// Font Awesome 6 Free
 @import "../../../../media/vendor/fontawesome-free/scss/fontawesome";
 @import "../../../../media/vendor/fontawesome-free/scss/regular";
 @import "../../../../media/vendor/fontawesome-free/scss/solid";

build/media_source/templates/administrator/atum/scss/blocks/_global.scss

@@ -183,7 +183,7 @@ body:not(.contentpane) .main-card {
 // external links with icons
 a[target="_blank"]::before {
   padding-inline-end: 3px;
-  font-family: "Font Awesome 5 Free";
+  font-family: "Font Awesome 6 Free";
   font-size: 14px;
   font-weight: 900;
   content: "\f35d";

build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss

@@ -20,7 +20,7 @@
 
       &::before {
         margin-right: .5rem;
-        font-family: "Font Awesome 5 Free";
+        font-family: "Font Awesome 6 Free";
         font-weight: 900;
         content: "\f054";
 
@@ -33,7 +33,7 @@
       &::after {
         [dir="rtl"] & {
           margin-inline-end: .5rem;
-          font-family: "Font Awesome 5 Free";
+          font-family: "Font Awesome 6 Free";
           font-weight: 900;
           content: "\f053";
         }

build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss

@@ -141,7 +141,7 @@
       align-items: center;
       justify-content: center;
       width: 2rem;
-      font-family: "Font Awesome 5 Free";
+      font-family: "Font Awesome 6 Free";
       font-weight: 900;
 
       [dir="ltr"] & {
@@ -267,7 +267,7 @@
 
     .navbar-toggler-icon::before {
       display: inline-block;
-      font: normal normal 900 28px/1 "Font Awesome 5 Free";
+      font: normal normal 900 28px/1 "Font Awesome 6 Free";
       color: var(--toggle-color);
       content: "\f00d";
     }

build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss

@@ -93,7 +93,7 @@
 
       &::after {
         width: 2.375rem;
-        font-family: "Font Awesome 5 Free";
+        font-family: "Font Awesome 6 Free";
         font-weight: 900;
         content: "\f078";
         border: 0;
@@ -170,7 +170,7 @@
     border-radius: 30px;
 
     .toggler-toolbar-icon::before {
-      font: normal normal 900 28px/1 "Font Awesome 5 Free";
+      font: normal normal 900 28px/1 "Font Awesome 6 Free";
       color: var(--toggle-color);
       content: "\f00d";
     }

build/media_source/templates/administrator/atum/scss/vendor/fontawesome-free/fontawesome.scss

@@ -2,16 +2,19 @@
 $fa-css-prefix:                    fa;
 $fa-font-path:                     "../../../../../../vendor/fontawesome-free/webfonts" !default;
 
-// Font Awesome 5 Free
+// Font Awesome 6 Free
 @import "../../../../../../../../media/vendor/fontawesome-free/scss/fontawesome";
 @import "../../../../../../../../media/vendor/fontawesome-free/scss/regular";
 @import "../../../../../../../../media/vendor/fontawesome-free/scss/solid";
 
 // Brands must be imported last
 @import "../../../../../../../../media/vendor/fontawesome-free/scss/brands";
 
+// B/C with Font Awesome 5
+@import "../../../../../../../../media/vendor/fontawesome-free/scss/shims";
+
 // B/C for Icomoon
-@import "../../../../../../system/scss/icomoon";
+@import "../../../../../../../../media/system/scss/icomoon";
 
 // RTL override
 html[dir=rtl] .float-right {

build/media_source/templates/site/cassiopeia/scss/blocks/_back-to-top.scss

@@ -7,7 +7,7 @@
   inset-inline-end: 1rem;
   bottom: 1rem;
   z-index: 10000;
-  padding: $cassiopeia-grid-gutter/2;
+  padding: $cassiopeia-grid-gutter * .5;
   color: var(--cassiopeia-color-primary, $standard-color-primary);
   pointer-events: all;
   background-color: var(--white, $white);

build/media_source/templates/site/cassiopeia/scss/blocks/_footer.scss

@@ -9,7 +9,7 @@
   .grid-child {
     align-items: center;
     justify-content: space-between;
-    padding: 2.5rem ($cassiopeia-grid-gutter/2);
+    padding: 2.5rem ($cassiopeia-grid-gutter * .5);
   }
 
   a {

build/media_source/templates/site/cassiopeia/scss/blocks/_global.scss

@@ -84,7 +84,7 @@ a {
 .btn-group {
   margin-bottom: $cassiopeia-grid-gutter;
   > input {
-    padding: $cassiopeia-grid-gutter/2;
+    padding: $cassiopeia-grid-gutter * .5;
     border: 1px solid $gray-400;
     @include border-start-radius($border-radius);
     @include border-end-radius(0);

build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss

@@ -12,12 +12,12 @@
   }
 
   .grid-child {
-    padding: ($cassiopeia-grid-gutter / 2);
+    padding: $cassiopeia-grid-gutter * .5;
   }
 
   nav {
     padding: 0;
-    margin-top: $cassiopeia-grid-gutter / 2;
+    margin-top: $cassiopeia-grid-gutter * .5;
   }
 
   .site-description {
@@ -210,7 +210,7 @@
   }
 
   .container-search {
-    margin-top: $cassiopeia-grid-gutter / 2;
+    margin-top: $cassiopeia-grid-gutter * .5;
   }
 
   .mod-finder {

build/media_source/templates/site/cassiopeia/scss/blocks/_layout.scss

@@ -32,7 +32,7 @@
   position: relative;
   > * {
     flex: 1;
-    margin: ($cassiopeia-grid-gutter / 2) 0;
+    margin: ($cassiopeia-grid-gutter * .5) 0;
   }
 
   @include media-breakpoint-down(lg) {

build/media_source/templates/site/cassiopeia/scss/blocks/_modifiers.scss

@@ -85,9 +85,9 @@
   flex-wrap: wrap;
   width: 100%;
   padding: 0;
-  margin-right: -($cassiopeia-grid-gutter / 2);
+  margin-right: -($cassiopeia-grid-gutter * .5);
   margin-bottom: $cassiopeia-grid-gutter;
-  margin-left: -($cassiopeia-grid-gutter / 2);
+  margin-left: -($cassiopeia-grid-gutter * .5);
 
   @include media-breakpoint-up(lg) {
     &.columns-2 {
@@ -113,7 +113,7 @@
 .blog-item {
   display: flex;
   flex-direction: column;
-  padding: 0 ($cassiopeia-grid-gutter / 2) $cassiopeia-grid-gutter;
+  padding: 0 ($cassiopeia-grid-gutter * .5) $cassiopeia-grid-gutter;
   overflow: hidden;
 
   .boxed & {

build/media_source/templates/site/cassiopeia/scss/blocks/_toolbar.scss

@@ -93,7 +93,7 @@
 
       &::after {
         width: 2.375rem;
-        font-family: "Font Awesome 5 Free";
+        font-family: "Font Awesome 6 Free";
         font-weight: 900;
         content: "\f078";
         border: 0;

build/media_source/templates/site/cassiopeia/scss/vendor/_chosen.scss

@@ -97,7 +97,7 @@ $chosen-select-padding-y: $form-select-padding-y + .21;
         &::before {
           position: absolute;
           top: 6px;
-          right: ($chosen-multi-close-width / 4);
+          right: $chosen-multi-close-width * .25;
           font-size: $font-size-base;
           color: $white;
           content: "\00d7";

build/media_source/templates/site/cassiopeia/scss/vendor/metismenu/_metismenu.scss

@@ -30,7 +30,7 @@
         display: flex;
         flex-wrap: wrap;
         align-items: center;
-        padding: ($cassiopeia-grid-gutter/2) $cassiopeia-grid-gutter;
+        padding: ($cassiopeia-grid-gutter * .5) $cassiopeia-grid-gutter;
         font-size: 1.1rem;
         line-height: 1.5;
 
@@ -138,8 +138,8 @@
             position: relative;
             top: 0;
             flex-basis: calc(100% + #{$cassiopeia-grid-gutter});
-            margin-top: ($cassiopeia-grid-gutter/2);
-            margin-bottom: ($cassiopeia-grid-gutter/-2);
+            margin-top: $cassiopeia-grid-gutter * .5;
+            margin-bottom: $cassiopeia-grid-gutter * -.5;
             background-color: hsla(0, 0%, 0%, .03);
             box-shadow: none;
           }

installation/template/scss/template.scss

@@ -13,6 +13,9 @@ $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts";
 @import "../../../media/vendor/fontawesome-free/scss/solid";
 @import "../../../media/vendor/fontawesome-free/scss/brands"; // order of loading is important.
 
+// B/C with Font Awesome 5
+@import "../../../media/vendor/fontawesome-free/scss/shims";
+
 // B/C for Icomoon
 @import "../../../build/media_source/system/scss/icomoon";