From 25f637f39f5066b2c7d3bc21118f712b7ac2a974 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 11 Nov 2021 18:15:39 +0100
Subject: [PATCH] cli: make sure JSS styles receive the highest priority

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/moody-snails-admire.md          |  5 ++++
 packages/cli/src/lib/bundler/transforms.ts | 27 +++++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/moody-snails-admire.md

diff --git a/.changeset/moody-snails-admire.md b/.changeset/moody-snails-admire.md
new file mode 100644
index 0000000000..7622546989
--- /dev/null
+++ b/.changeset/moody-snails-admire.md
@@ -0,0 +1,5 @@
+---
+'@backstage/cli': minor
+---
+
+Tweaked style insertion logic to make sure that JSS stylesheets always receive the highest priority.
diff --git a/packages/cli/src/lib/bundler/transforms.ts b/packages/cli/src/lib/bundler/transforms.ts
index cf9e873a66..863728b8f8 100644
--- a/packages/cli/src/lib/bundler/transforms.ts
+++ b/packages/cli/src/lib/bundler/transforms.ts
@@ -32,6 +32,23 @@ export const transforms = (options: TransformOptions): Transforms => {
 
   const extraTransforms = isDev ? ['react-hot-loader'] : [];
 
+  // This ensures that styles inserted from the style-loader and any
+  // async style chunks are always given lower priority than JSS styles.
+  // Note that this function is stringified and executed in the browser
+  // after transpilation, so stick to simple syntax
+  function insertBeforeJssStyles(element: any) {
+    const head = document.head;
+    // This makes sure that any style elements we insert get put before the
+    // dynamic styles from JSS, such as the ones from `makeStyles()`.
+    // TODO(Rugvip): This will likely break in material-ui v5, keep an eye on it.
+    const firstJssNode = head.querySelector('style[data-jss]');
+    if (!firstJssNode) {
+      head.appendChild(element);
+    } else {
+      head.insertBefore(element, firstJssNode);
+    }
+  }
+
   const loaders = [
     {
       test: /\.(tsx?)$/,
@@ -112,7 +129,14 @@ export const transforms = (options: TransformOptions): Transforms => {
     {
       test: /\.css$/i,
       use: [
-        isDev ? require.resolve('style-loader') : MiniCssExtractPlugin.loader,
+        isDev
+          ? {
+              loader: require.resolve('style-loader'),
+              options: {
+                insert: insertBeforeJssStyles,
+              },
+            }
+          : MiniCssExtractPlugin.loader,
         {
           loader: require.resolve('css-loader'),
           options: {
@@ -132,6 +156,7 @@ export const transforms = (options: TransformOptions): Transforms => {
       new MiniCssExtractPlugin({
         filename: 'static/[name].[contenthash:8].css',
         chunkFilename: 'static/[name].[id].[contenthash:8].css',
+        insert: insertBeforeJssStyles, // Only applies to async chunks
       }),
     );
   }