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
This commit is contained in:
Martin Pitt 2020-09-08 18:53:12 +02:00 committed by GitHub
parent cfced19000
commit 080b20af94
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 1 additions and 1 deletions

View file

@ -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;

View file

@ -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'));