From e5bfb92564935003943e8684133da2d83634915a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 24 Mar 2024 05:34:22 +0100
Subject: [PATCH] Compile admin CSS in a different stylesheet

With this change, on my browser, reloading a page in development after
changing a CSS file is about 25% faster than simply splitting the CSS
code between `application.css` and `vendored.css`. Compared to using
only one `application.css` file containing everything, reloading a page
in development is about 35% faster.

The combined size of all the generated stylesheets is now about 0.5%
bigger. Not sure why (maybe placeholder selectors?), but the difference
is negligible.

Note that we could load the `administration.css` file only in the admin
area, reducing the size of the page for people accessing the public
area. However, the size of this stylesheet (compressed) is 28K, which is
less than 3% of the overall size of a page and, on the other hand,
there's a risk of some styles no longer being applied because we might
have overlooked the fact that some styles in the `administration.css`
are also applied to the public area.

So, for now, we're still loading the administration styles in the public
area. We might reconsider in the future.
---
 app/assets/config/manifest.js                    |  2 ++
 app/assets/stylesheets/administration-rtl.scss   |  3 +++
 app/assets/stylesheets/administration.scss       |  3 +++
 app/assets/stylesheets/application.scss          | 11 +----------
 app/assets/stylesheets/dashboard_poster.scss     |  6 +-----
 app/assets/stylesheets/mixins_and_variables.scss |  8 ++++++++
 app/views/layouts/_common_head.html.erb          |  2 ++
 7 files changed, 20 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/stylesheets/administration-rtl.scss
 create mode 100644 app/assets/stylesheets/administration.scss
 create mode 100644 app/assets/stylesheets/mixins_and_variables.scss

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index f4b547003..7c90a34ed 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -4,6 +4,8 @@
 //= link_tree ../images
 //= link application.css
 //= link application-rtl.css
+//= link administration.css
+//= link administration-rtl.css
 //= link vendored.css
 //= link vendored-rtl.css
 //= link application.js
diff --git a/app/assets/stylesheets/administration-rtl.scss b/app/assets/stylesheets/administration-rtl.scss
new file mode 100644
index 000000000..e839730bb
--- /dev/null
+++ b/app/assets/stylesheets/administration-rtl.scss
@@ -0,0 +1,3 @@
+$global-text-direction: rtl;
+
+@import "administration";
diff --git a/app/assets/stylesheets/administration.scss b/app/assets/stylesheets/administration.scss
new file mode 100644
index 000000000..f87ed692d
--- /dev/null
+++ b/app/assets/stylesheets/administration.scss
@@ -0,0 +1,3 @@
+@import "mixins_and_variables";
+@import "admin";
+@import "admin/**/*";
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index a6fdf6d98..202e903de 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,15 +1,7 @@
-@import "font-awesome-sprockets";
-@import "font-awesome/variables";
-@import "font-awesome/path";
-@import "font-awesome/mixins";
-@import "font-awesome/core";
-@import "foundation_and_overrides";
+@import "mixins_and_variables";
 @import "fonts";
 @import "icons";
-@import "functions/*";
-@import "mixins/*";
 
-@import "admin";
 @import "annotator_overrides";
 @import "autocomplete_overrides";
 @import "datepicker_overrides";
@@ -27,7 +19,6 @@
 @import "sticky_overrides";
 @import "tags";
 @import "account/**/*";
-@import "admin/**/*";
 @import "budgets/**/*";
 @import "comments/**/*";
 @import "debates/**/*";
diff --git a/app/assets/stylesheets/dashboard_poster.scss b/app/assets/stylesheets/dashboard_poster.scss
index 620458dbd..1c450d991 100644
--- a/app/assets/stylesheets/dashboard_poster.scss
+++ b/app/assets/stylesheets/dashboard_poster.scss
@@ -1,6 +1,2 @@
-@import "font-awesome/variables";
-@import "font-awesome/mixins";
-@import "font-awesome/core";
-@import "foundation_and_overrides";
-@import "mixins/*";
+@import "mixins_and_variables";
 @import "dashboard";
diff --git a/app/assets/stylesheets/mixins_and_variables.scss b/app/assets/stylesheets/mixins_and_variables.scss
new file mode 100644
index 000000000..2915aabef
--- /dev/null
+++ b/app/assets/stylesheets/mixins_and_variables.scss
@@ -0,0 +1,8 @@
+@import "font-awesome-sprockets";
+@import "font-awesome/variables";
+@import "font-awesome/path";
+@import "font-awesome/mixins";
+@import "font-awesome/core";
+@import "foundation_and_overrides";
+@import "functions/*";
+@import "mixins/*";
diff --git a/app/views/layouts/_common_head.html.erb b/app/views/layouts/_common_head.html.erb
index 137e2a84e..8e7dbf587 100644
--- a/app/views/layouts/_common_head.html.erb
+++ b/app/views/layouts/_common_head.html.erb
@@ -6,9 +6,11 @@
 <% if rtl? %>
   <%= stylesheet_link_tag "vendored-rtl" %>
   <%= stylesheet_link_tag "application-rtl" %>
+  <%= stylesheet_link_tag "administration-rtl" %>
 <% else %>
   <%= stylesheet_link_tag "vendored" %>
   <%= stylesheet_link_tag "application" %>
+  <%= stylesheet_link_tag "administration" %>
 <% end %>
 <%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
 <%= csrf_meta_tags %>