Upgrade font awesome to version 6 (#40524)

laoneo · web-flow · commit ffa3108dcee4 · 2023-05-29T09:33:00.000+02:00
* Upgrade font awesome to version 6

* shim
diff --git a/build/build-modules-js/init/patches.es6.js b/build/build-modules-js/init/patches.es6.js
@@ -34,20 +34,10 @@ document.addEventListener("joomla:updated", (event) => [].slice.call(event.targe
 `);
   await writeFile(shortandsweetPath, ShortandsweetJs, { encoding: 'utf8', mode: 0o644 });
 
-  // Patch the Font Awesome math.div sass deprecations
-  // _larger.scss
-  let faPath = join(mediaVendorPath, 'fontawesome-free/scss/_larger.scss');
-  let newScss = (await readFile(faPath, { encoding: 'utf8' })).replace('(4em / 3)', '(4em * .333)').replace('(3em / 4)', '(3em * .25)');
-  await writeFile(faPath, newScss, { encoding: 'utf8', mode: 0o644 });
-  await writeFile(join(RootPath, 'node_modules/@fortawesome/fontawesome-free/scss/_larger.scss'), newScss, { encoding: 'utf8', mode: 0o644 });
-  // _list.scss
-  faPath = join(mediaVendorPath, 'fontawesome-free/scss/_list.scss');
-  newScss = (await readFile(faPath, { encoding: 'utf8' })).replace('5/4', '1.25');
-  await writeFile(faPath, newScss, { encoding: 'utf8', mode: 0o644 });
-  await writeFile(join(RootPath, 'node_modules/@fortawesome/fontawesome-free/scss/_list.scss'), newScss, { encoding: 'utf8', mode: 0o644 });
-  // _variables.scss
-  faPath = join(mediaVendorPath, 'fontawesome-free/scss/_variables.scss');
-  newScss = (await readFile(faPath, { encoding: 'utf8' })).replace('(20em / 16)', '(20em * .0625)');
+  // 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 });
-  await writeFile(join(RootPath, 'node_modules/@fortawesome/fontawesome-free/scss/_variables.scss'), newScss, { encoding: 'utf8', mode: 0o644 });
 };
diff --git a/build/media_source/com_media/scss/components/_media-browser.scss b/build/media_source/com_media/scss/components/_media-browser.scss
@@ -88,7 +88,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);
@@ -354,7 +354,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;
diff --git a/build/media_source/plg_system_debug/widgets/languageStrings/widget.css b/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;*/
 }
diff --git a/build/media_source/plg_system_debug/widgets/sqlqueries/widget.css b/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;
diff --git a/build/media_source/system/scss/joomla-fontawesome.scss b/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";
diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_global.scss b/build/media_source/templates/administrator/atum/scss/blocks/_global.scss
@@ -178,7 +178,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";
diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss b/build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss
@@ -20,7 +20,7 @@
 
       &::before {
         margin-inline-end: .5rem;
-        font-family: "Font Awesome 5 Free";
+        font-family: "Font Awesome 6 Free";
         font-weight: 900;
         content: "\f054" #{"/*!rtl:\"\f053\"*/"};
       }
diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss b/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;
       content: "\f054" #{"/*!rtl:\"\f053\"*/"};
     }
@@ -255,7 +255,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";
     }
diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss b/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;
@@ -163,7 +163,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";
     }
diff --git a/build/media_source/templates/administrator/atum/scss/vendor/fontawesome-free/fontawesome.scss b/build/media_source/templates/administrator/atum/scss/vendor/fontawesome-free/fontawesome.scss
@@ -2,14 +2,17 @@
 $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";
 
diff --git a/build/media_source/templates/site/cassiopeia/scss/blocks/_toolbar.scss b/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;
diff --git a/installation/template/scss/template.scss b/installation/template/scss/template.scss
@@ -8,12 +8,15 @@ $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts";
 // Font Awesome
 @import "../../../media/templates/administrator/atum/scss/vendor/fontawesome-free/fontawesome";
 
-// "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";
 @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";
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@claviska/jquery-minicolors": "^2.3.6",
-    "@fortawesome/fontawesome-free": "^5.15.4",
+    "@fortawesome/fontawesome-free": "^6.4.0",
     "@joomla/joomla-a11y-checker": "^1.0.0",
     "@popperjs/core": "^2.11.7",
     "@webcomponents/webcomponentsjs": "^2.8.0",

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ table.phpdebugbar-widgets-languageStrings span.phpdebugbar-widgets-eye-dash {`
`44`	`44`
`45`	`45`	`table.phpdebugbar-widgets-languageStrings span.phpdebugbar-widgets-eye:before,`
`46`	`46`	`table.phpdebugbar-widgets-languageStrings span.phpdebugbar-widgets-eye-dash:before {`
`47`		`- font-family:"Font Awesome 5 Free";`
	`47`	`+ font-family:"Font Awesome 6 Free";`
`48`	`48`	`margin-right: 4px;`
`49`	`49`	`/font-size: 12px;/`
`50`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`
`21`	`21`	`&::before {`
`22`	`22`	`margin-inline-end: .5rem;`
`23`		`- font-family: "Font Awesome 5 Free";`
	`23`	`+ font-family: "Font Awesome 6 Free";`
`24`	`24`	`font-weight: 900;`
`25`	`25`	`content: "\f054" #{"/!rtl:\"\f053\"/"};`
`26`	`26`	`}`