Skip to content

Commit

Permalink
Ensure application CSS has priority over library CSS
Browse files Browse the repository at this point in the history
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.

[1] https://github.com/martinpitt/performance-graphs/issues/10
[2] webpack-contrib/mini-css-extract-plugin#188
  • Loading branch information
martinpitt committed Sep 8, 2020
1 parent cfced19 commit fd9c45f
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 1 deletion.
1 change: 0 additions & 1 deletion src/app.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
1 change: 1 addition & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand Down

0 comments on commit fd9c45f

Please sign in to comment.