From dcf5c242fb825eba4f00588071a31d285fe9df15 Mon Sep 17 00:00:00 2001
From: Thomas Weber <muffin@muffin.ink>
Date: Sun, 27 Mar 2022 21:28:00 -0500
Subject: [PATCH] Insert scaffolding styles at start of <head> instead of end
 of <head>

This lets us remove an !important and makes using custom CSS more
intuitive, see #402
---
 src/packager/packager.js |  2 +-
 webpack.config.js        | 27 +++++++++++++++++++--------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/packager/packager.js b/src/packager/packager.js
index 1985697..58c3037 100644
--- a/src/packager/packager.js
+++ b/src/packager/packager.js
@@ -941,7 +941,7 @@ cd "$(dirname "$0")"
       cursor: ${await this.generateCursor()};
     }
     .sc-monitor-root[opcode^="data_"] .sc-monitor-value-color {
-      background-color: ${this.options.monitors.variableColor} !important;
+      background-color: ${this.options.monitors.variableColor};
     }
     ${this.options.custom.css}
   </style>
diff --git a/webpack.config.js b/webpack.config.js
index 7bab4f1..9e61e41 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -87,15 +87,26 @@ const makeScaffolding = ({full}) => ({
       }]),
       {
         test: /\.css$/i,
-        use: ['style-loader', {
-          loader: 'css-loader',
-          options: {
-            modules: {
-              localIdentName: 'sc-[local]',
-              exportLocalsConvention: 'camelCase',
-            },
+        use: [
+          {
+            loader: 'style-loader',
+            options: {
+              insert: (styleElement) => {
+                var el = document.head || document.body || document.documentElement;
+                el.insertBefore(styleElement, el.firstChild);
+              }
+            }
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: 'sc-[local]',
+                exportLocalsConvention: 'camelCase',
+              },
+            }
           }
-        }],
+        ],
       }
     ]
   },