[WIP] Move patternfly out of asset pipeline

app/stylesheet/application-webpack.scss

@@ -7,3 +7,19 @@
 @import '~@manageiq/react-ui-components/dist/textual_summary.css';
 @import '~@manageiq/react-ui-components/dist/tagging.css';
 @import '~@manageiq/ui-components/dist/css/ui-components.css';
+
+@import './legacy/main.scss';
+@import './legacy/automate_import_export.css';
+@import './legacy/dialog_fields.css';
+@import './legacy/angular.css';
+@import './legacy/notifications.scss';
+@import './legacy/schedule_editor.scss';
+@import './legacy/miq_tree.scss';
+@import './legacy/timeline.scss';
+@import './legacy/topology.css';
+@import './legacy/container_topology.css';
+@import './legacy/physical_infra_topology.scss';
+@import './legacy/metrics.scss';
+@import './legacy/service_dialogs.css';
+@import './legacy/remote_console.scss';
+@import './legacy/piecharts.scss';

app/assets/stylesheets/main.scss → app/stylesheet/legacy/main.scss

@@ -27,18 +27,21 @@ $login-container-bg-color:                  #000000;
 $login-container-bg-color-rgba:             rgba(0, 0, 0, 0.2);
 $login-container-details-border-color-rgba: rgba(0, 0, 0, 0.5);
 
-@import "font-fabulous-sprockets";
-@import "font-fabulous";
-@import "patternfly-sprockets";
-@import "patternfly";
-@import "patternfly_overrides";
-@import "icon_customizations";
-@import "header_background"; // sets a custom background image in the header
-@import "about_modal_background"; // sets a custom background image in the 'About' modal
-@import "timeline"; // used for the patternfly-timeline styles
-@import "alerts";
-@import "graphql_explorer";
-@import "dual_list";
+
+@import "~@manageiq/font-fabulous/assets/stylesheets/_font-fabulous-sprockets.scss";
+@import "~@manageiq/font-fabulous/assets/stylesheets/_font-fabulous.scss";
+
+@import "~patternfly/dist/sass/_patternfly-sprockets.scss";
+@import "~patternfly/dist/sass/_patternfly.scss";
+
+@import "./patternfly_overrides";
+@import "./icon_customizations";
+@import "./header_background"; // sets a custom background image in the header
+@import "./about_modal_background"; // sets a custom background image in the 'About' modal
+@import "./timeline"; // used for the patternfly-timeline styles
+@import "./alerts";
+@import "./graphql_explorer";
+@import "./dual_list";
 
 .login-pf #brand img { // sets size of brand.svg on login screen (upstream only)
   height: 38px;

app/assets/stylesheets/print.scss → app/stylesheet/legacy/print.scss

@@ -1,15 +1,8 @@
-/*
- * Unfortunately ui-components needs to be loaded like this :(
- * This is due to the fact that we have ui-components through yarn
- *= require @manageiq/ui-components/dist/css/ui-components
- */
-
-@import 'patternfly-sprockets';
-@import 'patternfly/variables';
-@import 'patternfly/icons';
-@import 'font-awesome';
-@import "font-fabulous-sprockets";
-@import "font-fabulous";
+@import "~@manageiq/ui-components/dist/css/ui-components.css";
+@import "~patternfly/dist/sass/patternfly/_variables.scss";
+@import "~patternfly/dist/sass/patternfly/_icons.scss";
+@import "~font-awesome/scss/font-awesome.scss";
+@import "~@manageiq/font-fabulous/assets/stylesheets/_font-fabulous.scss";
 
 @page {
   margin-top: 40pt;

config/webpack/loaders.js

@@ -1,4 +1,5 @@
 const merge = require('webpack-merge')
+const { resolve } = require('path');
 
 const { env, publicPath } = require('./configuration.js')
 const babelrc = require('../../.babelrc.js');
@@ -68,6 +69,7 @@ module.exports = [
         loader: 'sass-loader',
         options: {
           sourceMap: true,
+          includePaths: ['bootstrap-sass', 'font-awesome-sass'].map((pkg) => resolve(__dirname, '../../node_modules', pkg, 'assets/stylesheets')),
         },
       },
     ],

lib/manageiq/ui/classic/engine.rb

@@ -1,26 +1,6 @@
 require 'rails/engine'
 require 'sprockets/railtie'
 
-# Since we serve our assets directly through apache on an appliance after they
-# are pre-compiled, there is no need to have sass/coffeescript loaded in the
-# application, so we can save a bit of resources by not loading these two.
-#
-# That said, we still need to load both of these when pre-compiling the assets
-# in production mode, so if Rake is defined, load things like we used to.
-#
-# For this to work properly, it is dependent on patternfly/patternfly-sass#150
-if ENV["RAILS_ENV"] != "production" || defined?(Rake)
-  require 'sass-rails'
-  require 'coffee-rails'
-  require 'font-fabulous'
-  require 'patternfly-sass'
-else
-  require 'bootstrap-sass/engine'
-  require 'font_awesome/sass/rails/engine'
-  require 'font-fabulous/engine'
-  require 'patternfly-sass/engine'
-end
-
 require 'high_voltage'
 require "novnc-rails"
 require 'webpacker'

manageiq-ui-classic.gemspec

@@ -21,13 +21,9 @@ Gem::Specification.new do |s|
 
   s.add_dependency "rails", ">= 5.0.0.1", "< 5.2"
 
-  s.add_dependency "coffee-rails"
-  s.add_dependency "font-fabulous", "~> 1.0.3"
   s.add_dependency "high_voltage", "~> 3.0.0"
   s.add_dependency "more_core_extensions", "~>3.2"
   s.add_dependency "novnc-rails", "~>0.2"
-  s.add_dependency "patternfly-sass", "~> 3.59.1"
-  s.add_dependency "sass-rails"
   s.add_dependency "uglifier", "~>3.0.0"
   s.add_dependency "webpacker", "~>2.0.0"
 

package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@data-driven-forms/pf3-component-mapper": "^1.9.9",
     "@data-driven-forms/react-form-renderer": "^1.9.9",
+    "@manageiq/font-fabulous": "~1.0.3",
     "@manageiq/react-ui-components": "~0.11.17",
     "@manageiq/ui-components": "~1.2.6",
     "@pf3/select": "~1.12.6",