From 080b20af94b10887f946d9bc98cd64f890bd02b1 Mon Sep 17 00:00:00 2001
From: Martin Pitt <martinpitt@users.noreply.github.com>
Date: Tue, 8 Sep 2020 18:53:12 +0200
Subject: [PATCH] Ensure application CSS has priority over library CSS

Import our application CSS as the very last thing, so that it can
properly override  PatternFly variables. Before, our application CSS
could land in the first third of dist/index.css *before* PatternFly's
definitions, so that the latter overrode the former [1].

This is a long-standing bug in mini-css-extract-plugin ([2] and
countless things that point to it) with `NODE_ENV=production` builds.

As a workaround, make sure that app.scss is the absolutely last imported
CSS, instead of "almost last". It is still conceptually correct for the
application CSS to be able to override patternfly-4-overrides.scss.

Closes #362
[1] https://github.com/martinpitt/performance-graphs/issues/10
[2] https://github.com/webpack-contrib/mini-css-extract-plugin/issues/188
---
 src/app.jsx  | 1 -
 src/index.js | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.jsx b/src/app.jsx
index fd9d3df..c88d25e 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -20,7 +20,6 @@
 import cockpit from 'cockpit';
 import React from 'react';
 import { Alert, Card, CardTitle, CardBody } from '@patternfly/react-core';
-import './app.scss';
 
 const _ = cockpit.gettext;
 
diff --git a/src/index.js b/src/index.js
index b718ab6..11a1c9c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -32,6 +32,7 @@ import { Application } from './app.jsx';
  * the overrides will be correctly in the end of our stylesheet.
  */
 import "./lib/patternfly/patternfly-4-overrides.scss";
+import './app.scss';
 
 document.addEventListener("DOMContentLoaded", function () {
     ReactDOM.render(React.createElement(Application, {}), document.getElementById('app'));