cli: make sure JSS styles receive the highest priority

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.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.

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
       }),
     );
   }