From 6af8c2f83eb201d5e22e03dda97f684cf6cd3ab0 Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Fri, 18 Oct 2024 10:50:26 -0400
Subject: [PATCH] Fix multiple copies of utility classes being loaded by the
 app (#28802)

* Fix multiple copies of utility classes being loaded by the app

When using SASS's at-import rule for a file containing CSS classes, the
entirity of the imported file is included into that chunk of the JS
bundle. This leads to those class definitions being duplicated multiple
times in the code loaded by the browser. That doesn't happen for mixins,
functions, or SASS variables which are evaluated at compile time.

To prevent those classes from being repeatedly defined, we need to not
import them into multiple bundles. We already load the utility classes
into the root bundle, so we just need to make sure not to import
sass/utils/_module.scss, sass/utils/_flex.scss,
sass/utils/_animations.scss, or sass/utils/_modifiers.scss into any
CSS files which are imported into individual components.

* Canonize import paths for SCSS mixins and functions

We previously imported some .scss files as `src/sass/...` and others as
`sass/...`. This was allowed becuase sass-loader's
`sassOptions.includePaths` included both `src` and `src/sass`. I've made
that more consistent now and removed the redundant include path.
---
 .../billing/billing_subscriptions/billing_subscriptions.scss  | 2 +-
 .../system_user_detail/team_list/abstract_list.scss           | 4 ++--
 .../admin_console/system_user_detail/team_list/team_row.scss  | 2 +-
 .../components/admin_console/system_users/system_users.scss   | 2 +-
 .../dnd_custom_time_picker_modal.scss                         | 2 --
 .../channels/src/components/invitation_modal/invite_view.scss | 2 +-
 webapp/channels/src/components/link_tooltip/link_tooltip.scss | 2 +-
 .../markdown_image_expand/markdown_image_expand.scss          | 4 ++--
 .../post_reminder_custom_time_picker_modal.scss               | 2 --
 .../channels/src/components/post_view/reaction/reaction.scss  | 4 ++--
 .../unread_channel_indicator/unread_channel_indicator.scss    | 2 +-
 .../threading/global_threads/thread_item/thread_item.scss     | 2 +-
 .../src/components/widgets/admin_console/admin_panel.scss     | 2 +-
 .../src/components/widgets/menu/menu_items/menu_item.scss     | 2 +-
 webapp/channels/src/components/widgets/menu/menu_wrapper.scss | 2 +-
 .../channels/src/components/widgets/separator/separator.scss  | 2 +-
 .../channels/src/components/widgets/team_icon/team_icon.scss  | 3 ++-
 webapp/channels/webpack.config.js                             | 2 +-
 18 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss
index a7e20e7412..570720b149 100644
--- a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss
+++ b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss
@@ -1,4 +1,4 @@
-@import 'sass/utils/_mixins';
+@import 'utils/_mixins';
 @import './mixins';
 
 .BillingSubscriptions {
diff --git a/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss b/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss
index 50a5041f85..8ae885e5ea 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss
+++ b/webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss
@@ -1,5 +1,5 @@
-@import 'sass/utils/variables';
-@import 'sass/utils/functions';
+@import 'utils/variables';
+@import 'utils/functions';
 
 .AbstractList {
     padding: 1rem 2rem 2rem 2rem;
diff --git a/webapp/channels/src/components/admin_console/system_user_detail/team_list/team_row.scss b/webapp/channels/src/components/admin_console/system_user_detail/team_list/team_row.scss
index 9b4d5294f4..d77002c80c 100644
--- a/webapp/channels/src/components/admin_console/system_user_detail/team_list/team_row.scss
+++ b/webapp/channels/src/components/admin_console/system_user_detail/team_list/team_row.scss
@@ -1,4 +1,4 @@
-@import 'sass/utils/module';
+@import 'utils/variables';
 
 .TeamRow {
     &:nth-child(odd) {
diff --git a/webapp/channels/src/components/admin_console/system_users/system_users.scss b/webapp/channels/src/components/admin_console/system_users/system_users.scss
index b9c2ec7965..adc9595a8d 100644
--- a/webapp/channels/src/components/admin_console/system_users/system_users.scss
+++ b/webapp/channels/src/components/admin_console/system_users/system_users.scss
@@ -1,4 +1,4 @@
-@import "sass/utils/_mixins";
+@import 'utils/_mixins';
 
 table.systemUsersTable {
     thead {
diff --git a/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.scss b/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.scss
index 0d79a4d7cc..520bc450dc 100644
--- a/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.scss
+++ b/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.scss
@@ -1,5 +1,3 @@
-@import '../../sass/utils/module';
-
 .DndModal {
     width: 600px;
 
diff --git a/webapp/channels/src/components/invitation_modal/invite_view.scss b/webapp/channels/src/components/invitation_modal/invite_view.scss
index 25a378fd1a..5762694ed8 100644
--- a/webapp/channels/src/components/invitation_modal/invite_view.scss
+++ b/webapp/channels/src/components/invitation_modal/invite_view.scss
@@ -1,4 +1,4 @@
-@import 'sass/utils/_mixins';
+@import 'utils/_mixins';
 
 .InviteView {
     &__sectionTitle {
diff --git a/webapp/channels/src/components/link_tooltip/link_tooltip.scss b/webapp/channels/src/components/link_tooltip/link_tooltip.scss
index d5c6a25fe7..fb7bdbef60 100644
--- a/webapp/channels/src/components/link_tooltip/link_tooltip.scss
+++ b/webapp/channels/src/components/link_tooltip/link_tooltip.scss
@@ -1,4 +1,4 @@
-@import 'sass/utils/variables';
+@import 'utils/variables';
 
 .tooltip-container {
     opacity: 0;
diff --git a/webapp/channels/src/components/markdown_image_expand/markdown_image_expand.scss b/webapp/channels/src/components/markdown_image_expand/markdown_image_expand.scss
index 4138d18454..b55aec1c09 100644
--- a/webapp/channels/src/components/markdown_image_expand/markdown_image_expand.scss
+++ b/webapp/channels/src/components/markdown_image_expand/markdown_image_expand.scss
@@ -1,5 +1,5 @@
-@import "sass/utils/functions";
-@import "utils/variables";
+@import 'utils/functions';
+@import 'utils/variables';
 
 .markdown-image-expand {
     position: relative;
diff --git a/webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.scss b/webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.scss
index 55c36d5ee3..32fc814b4d 100644
--- a/webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.scss
+++ b/webapp/channels/src/components/post_reminder_custom_time_picker_modal/post_reminder_custom_time_picker_modal.scss
@@ -1,5 +1,3 @@
-@import '../../sass/utils/module';
-
 .post-reminder-modal {
     .modal-body {
         overflow: visible;
diff --git a/webapp/channels/src/components/post_view/reaction/reaction.scss b/webapp/channels/src/components/post_view/reaction/reaction.scss
index bf19cf21d9..ffb4be7512 100644
--- a/webapp/channels/src/components/post_view/reaction/reaction.scss
+++ b/webapp/channels/src/components/post_view/reaction/reaction.scss
@@ -1,5 +1,5 @@
-@import 'sass/utils/mixins';
-@import 'sass/utils/functions';
+@import 'utils/mixins';
+@import 'utils/functions';
 
 .reaction-emoji--large img {
     width: 48px;
diff --git a/webapp/channels/src/components/sidebar/unread_channel_indicator/unread_channel_indicator.scss b/webapp/channels/src/components/sidebar/unread_channel_indicator/unread_channel_indicator.scss
index 1cf62e081d..578a672ca1 100644
--- a/webapp/channels/src/components/sidebar/unread_channel_indicator/unread_channel_indicator.scss
+++ b/webapp/channels/src/components/sidebar/unread_channel_indicator/unread_channel_indicator.scss
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@import 'sass/utils/variables';
+@import 'utils/variables';
 
 .nav-pills__unread-indicator {
     position: absolute;
diff --git a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss
index ee82f56c5f..1029a38809 100644
--- a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss
+++ b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import "sass/utils/_mixins";
+@import 'utils/_mixins';
 
 .ThreadItem {
     position: relative;
diff --git a/webapp/channels/src/components/widgets/admin_console/admin_panel.scss b/webapp/channels/src/components/widgets/admin_console/admin_panel.scss
index bee34c8a79..4e149f64bc 100644
--- a/webapp/channels/src/components/widgets/admin_console/admin_panel.scss
+++ b/webapp/channels/src/components/widgets/admin_console/admin_panel.scss
@@ -1,4 +1,4 @@
-@import 'utils/module';
+@import 'utils/variables';
 
 .AdminPanel {
     overflow: hidden;
diff --git a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss
index 0c6e4c2e06..09618b9a55 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss
+++ b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss
@@ -1,4 +1,4 @@
-@import '../../../../sass/utils/module';
+@import 'utils/variables';
 
 .Menu {
     .MenuItem {
diff --git a/webapp/channels/src/components/widgets/menu/menu_wrapper.scss b/webapp/channels/src/components/widgets/menu/menu_wrapper.scss
index f704db00fc..271fde0aae 100644
--- a/webapp/channels/src/components/widgets/menu/menu_wrapper.scss
+++ b/webapp/channels/src/components/widgets/menu/menu_wrapper.scss
@@ -1,4 +1,4 @@
-@import 'utils/module';
+@import 'utils/functions';
 
 .MenuWrapper {
     position: relative;
diff --git a/webapp/channels/src/components/widgets/separator/separator.scss b/webapp/channels/src/components/widgets/separator/separator.scss
index 490b0463c7..191f734bea 100644
--- a/webapp/channels/src/components/widgets/separator/separator.scss
+++ b/webapp/channels/src/components/widgets/separator/separator.scss
@@ -1,6 +1,6 @@
 @charset 'UTF-8';
 
-@import 'utils/module';
+@import 'utils/functions';
 
 .Separator {
     position: relative;
diff --git a/webapp/channels/src/components/widgets/team_icon/team_icon.scss b/webapp/channels/src/components/widgets/team_icon/team_icon.scss
index e51430e756..2bdf0a76f9 100644
--- a/webapp/channels/src/components/widgets/team_icon/team_icon.scss
+++ b/webapp/channels/src/components/widgets/team_icon/team_icon.scss
@@ -1,6 +1,7 @@
 @charset 'UTF-8';
 
-@import 'utils/module';
+@import 'utils/mixins';
+@import 'utils/variables';
 
 .TeamIcon__content {
     display: flex;
diff --git a/webapp/channels/webpack.config.js b/webapp/channels/webpack.config.js
index ec216e61ae..d580d34921 100644
--- a/webapp/channels/webpack.config.js
+++ b/webapp/channels/webpack.config.js
@@ -97,7 +97,7 @@ var config = {
                         loader: 'sass-loader',
                         options: {
                             sassOptions: {
-                                includePaths: ['src', 'src/sass'],
+                                includePaths: ['src/sass'],
                             },
                         },
                     },