[WIP] Fixes #21139 - Migrate css stack to webpack

.storybook/preview-head.html

@@ -1,10 +1,3 @@
-<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/patternfly/3.23.0/css/patternfly.min.css'>
-<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/patternfly/3.23.0/css/patternfly-additions.min.css'>
-<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
-<script src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
-<script src='//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
-<script src='//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js'></script>
-<script src='//cdnjs.cloudflare.com/ajax/libs/patternfly/3.23.0/js/patternfly.min.js'></script>
 <!-- workaround until Jed is moved to webpack - see http://projects.theforeman.org/issues/17263 -->
 <script>
   function __(str) {

.storybook/webpack.config.js

@@ -1,4 +1,5 @@
-let path = require('path');
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
   module: {
@@ -20,17 +21,49 @@ module.exports = {
         }
       },
       {
-        test: /\.css$/,
-        loaders: ['style-loader', 'css-loader']
+        test: /(\.png|\.gif|\.jpg|\.svg|\.eot|\.woff|\.woff2|\.ttf)$/,
+        loader: 'url-loader',
+        options: { limit: 32767 },
       },
       {
-        test: /(\.png|\.gif)$/,
-        loader: 'url-loader?limit=32767'
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader'
+        })
       },
       {
         test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader']
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader', // The backup style loader
+          use: [{
+            loader: 'css-loader',
+            options: { sourceMap: true },
+          }, {
+            // solve the relative image urls inside jquery-ui
+            loader: 'resolve-url-loader',
+          }, {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              includePaths: [
+                // allow scss files to import variables and mixins without full relative path
+                path.join(__dirname, '..', 'webpack/assets/stylesheets/application'),
+                // allow patternfly to import bootstrap and fontawesome
+                path.join(__dirname, '..', 'node_modules/patternfly/node_modules/bootstrap-sass/assets/stylesheets'),
+                path.join(__dirname, '..', 'node_modules/patternfly/node_modules/font-awesome-sass/assets/stylesheets'),
+              ],
+            },
+          }]
+        })
       }
     ]
-  }
+  },
+
+  plugins: [
+    new ExtractTextPlugin({
+      filename: '[name].css',
+      allChunks: true
+    }),
+  ]
 };

app/assets/javascripts/application.js

@@ -1,11 +1,7 @@
 //= require jquery.turbolinks
 //= require turbolinks
 //= require i18n
-//= require jquery.ui.autocomplete
-//= require jquery.ui.spinner
 //= require scoped_search
-//= require bootstrap
-//= require patternfly
 //= require two-pane
 //= require vendor
 //= require jquery.extentions

app/assets/stylesheets/application.scss

@@ -1,13 +1,3 @@
-@import 'jquery.ui.theme';
-@import 'jquery.ui.core';
-@import 'jquery.ui.menu';
-//we need to import all the above because we are using jquery-ui-rails and it uses sprockets require instaed of sass import.
-@import 'jquery.ui.autocomplete';
-@import 'jquery.ui.spinner';
-@import 'jquery.ui.spinner_custom';
+@import 'jquery.gridster';
 @import 'scoped_search';
-@import 'patternfly-sprockets';
-@import 'colors';
-@import 'patternfly';
 @import 'editable/bootstrap-editable';
-@import '/*';

app/controllers/application_controller.rb

@@ -396,7 +396,7 @@ def parameter_filter_context
 
   def allow_webpack
     webpack_csp = { script_src: [webpack_server], connect_src: [webpack_server],
-                    style_src: [webpack_server], img_src: [webpack_server] }
+                    style_src: [webpack_server], img_src: [webpack_server], font_src: ['data:', webpack_server] }
 
     append_content_security_policy_directives(webpack_csp)
   end

bundler.d/assets.rb

@@ -1,6 +1,4 @@
 gem 'jquery-turbolinks', '~> 2.1'
-gem 'jquery-ui-rails', '< 5.0.0'
-gem 'patternfly-sass', '~> 3.32.1'
 gem 'gridster-rails', '~> 0.5'
 gem 'gettext_i18n_rails_js', '~> 1.0'
 gem 'execjs', '>= 1.4.0', '< 3.0'

config/initializers/secure_headers.rb

@@ -10,6 +10,7 @@
     :connect_src => ["'self'", 'ws:', 'wss:'],
     :style_src   => ["'unsafe-inline'", "'self'"],
     :script_src  => ["'unsafe-eval'", "'unsafe-inline'", "'self'"],
-    :img_src     => ["'self'", 'data:', '*.gravatar.com']
+    :img_src     => ["'self'", 'data:', '*.gravatar.com'],
+    :font_src    => ["'self'", 'data:']
   }
 end

config/webpack.config.js

@@ -104,14 +104,33 @@ module.exports = env => {
           })
         },
         {
-          test: /(\.png|\.gif)$/,
-          use: 'url-loader?limit=32767'
+          test: /(\.png|\.gif|\.jpg|\.svg|\.eot|\.woff|\.woff2|\.ttf)$/,
+          loader: 'url-loader',
+          options: { limit: 32767 }
         },
         {
           test: /\.scss$/,
           use: ExtractTextPlugin.extract({
             fallback: 'style-loader', // The backup style loader
-            use: production ? 'css-loader!sass-loader' : 'css-loader?sourceMap!sass-loader?sourceMap'
+            use: [{
+              loader: 'css-loader',
+              options: { sourceMap: true },
+            }, {
+              // solve the relative image urls inside jquery-ui
+              loader: 'resolve-url-loader',
+            }, {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true,
+                includePaths: [
+                  // allow scss files to import variables and mixins without full relative path
+                  path.join(__dirname, '..', 'webpack/assets/stylesheets/application'),
+                  // allow patternfly to import bootstrap and fontawesome
+                  path.join(__dirname, '..', 'node_modules/patternfly/node_modules/bootstrap-sass/assets/stylesheets'),
+                  path.join(__dirname, '..', 'node_modules/patternfly/node_modules/font-awesome-sass/assets/stylesheets'),
+                ],
+              },
+            }]
           })
         }
       ]

config/webpack.vendor.js

@@ -26,6 +26,8 @@ module.exports = [
    */
   'jquery',
   'jquery.cookie',
+  'jquery-ui/autocomplete',
+  'jquery-ui/spinner',
   'select2',
   'multiselect',
   'jquery-ujs',
@@ -59,6 +61,9 @@ module.exports = [
   /**
    * Other packages
    */
+  'patternfly/node_modules/bootstrap',
+  'patternfly/dist/js/patternfly',
+  'c3',
   'diff',
   'ipaddr.js',
   'jstz',

package.json

@@ -43,6 +43,7 @@
     "raf": "^3.4.0",
     "react-test-renderer": "^16.2.0",
     "redux-mock-store": "^1.2.2",
+    "resolve-url-loader": "^2.2.1",
     "sass-loader": "~6.0.6",
     "style-loader": "^0.13.1",
     "stylelint": "^7.13.0",
@@ -67,6 +68,7 @@
     "isomorphic-fetch": "^2.2.1",
     "jquery": "~2.2.4",
     "jquery-flot": "~0.8.3",
+    "jquery-ui": "~1.10.4",
     "jquery-ujs": "~1.2.0",
     "jquery.cookie": "~1.4.1",
     "jstz": "~1.0.7",

test/integration/middleware_test.rb

@@ -8,8 +8,8 @@ class MiddlewareIntegrationTest < ActionDispatch::IntegrationTest
     assert_equal page.response_headers['X-Content-Type-Options'], 'nosniff'
     assert_equal page.response_headers['Content-Security-Policy'], \
       "default-src 'self'; child-src 'self'; connect-src 'self' ws: wss:; "+
-      "img-src 'self' data: *.gravatar.com; script-src 'unsafe-eval' 'unsafe-inline' "+
-      "'self'; style-src 'unsafe-inline' 'self'"
+      "font-src 'self' data:; img-src 'self' data: *.gravatar.com; "+
+      "script-src 'unsafe-eval' 'unsafe-inline' 'self'; style-src 'unsafe-inline' 'self'"
   end
 
   context 'webpack dev server is enabled' do

webpack/assets/javascripts/bundle.js

@@ -6,17 +6,19 @@
 /* eslint-disable import/first */
 import 'babel-polyfill';
 
-require('expose-loader?$!expose-loader?jQuery!jquery');
-require('jquery-ujs');
-require('expose-loader?jstz!jstz');
-require('expose-loader?ipaddr!ipaddr.js');
-require('jquery.cookie');
-require('expose-loader?JsDiff!diff');
-require('./bundle_flot');
-require('./bundle_multiselect');
-require('./bundle_select2');
-require('./bundle_datatables');
-require('./bundle_lodash');
+import 'expose-loader?$!expose-loader?jQuery!jquery';
+import 'jquery-ujs';
+import 'expose-loader?jstz!jstz';
+import 'expose-loader?ipaddr!ipaddr.js';
+import 'jquery.cookie';
+import 'expose-loader?JsDiff!diff';
+import './bundle_flot';
+import './bundle_multiselect';
+import './bundle_select2';
+import './bundle_lodash';
+import './bundle_datatables';
+
+import '../stylesheets/application.scss';
 
 import compute from './foreman_compute_resource';
 

webpack/assets/javascripts/bundle_datatables.js

@@ -1,3 +1,2 @@
 import 'datatables.net-bs/css/dataTables.bootstrap.css';
 import 'datatables.net-bs';
-

webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.scss

@@ -1,10 +1,14 @@
-@import '../../../common/colors';
+@import 'variables';
+
+$tfm-breadcrumb-switcher-popover-max-height: 300px !default;
+$tfm-breadcrumb-switcher-popover-max-width: 200px !default;
+$tfm-breadcrumb-switcher-popover-min-width: 200px !default;
 
 .popover-content {
-  max-height: $switcher-max-height;
+  max-height: $tfm-breadcrumb-switcher-popover-max-height;
   overflow-y: auto;
-  max-width: $switcher-max-width;
-  min-width: $switcher-max-width;
+  max-width: $tfm-breadcrumb-switcher-popover-max-width;
+  min-width: $tfm-breadcrumb-switcher-popover-max-width;
 
   .fa-spinner {
     margin-top: 12px;

webpack/assets/javascripts/react_app/components/PasswordStrength/PasswordStrength.scss

@@ -1,5 +1,4 @@
-@import '~patternfly/dist/sass/patternfly/variables';
-@import '../../common/colors.scss';
+@import 'variables';
 
 .ReactPasswordStrength {
   .ReactPasswordStrength-input {
@@ -23,56 +22,56 @@
 
 #password_react {
   .form-group.has-error .ReactPasswordStrength-input {
-    border: 1px solid $pf-red-100;
+    border: 1px solid $color-pf-red-100;
   }
 
   .is-strength-0 {
     .ReactPasswordStrength-strength-desc {
-      color: $pf-red-200;
+      color: $color-pf-red-200;
     }
 
     .ReactPasswordStrength-strength-bar {
-      background: $pf-red-200;
+      background: $color-pf-red-200;
     }
   }
 
   .is-strength-1 {
     .ReactPasswordStrength-strength-desc {
-      color: $pf-orange-400;
+      color: $color-pf-orange-400;
     }
 
     .ReactPasswordStrength-strength-bar {
-      background: $pf-orange-400;
+      background: $color-pf-orange-400;
     }
   }
 
   .is-strength-2 {
     .ReactPasswordStrength-strength-desc {
-      color: $pf-gold-400;
+      color: $color-pf-gold-400;
     }
 
     .ReactPasswordStrength-strength-bar {
-      background: $pf-gold-400;
+      background: $color-pf-gold-400;
     }
   }
 
   .is-strength-3 {
     .ReactPasswordStrength-strength-desc {
-      color: $pf-green-400;
+      color: $color-pf-green-400;
     }
 
     .ReactPasswordStrength-strength-bar {
-      background: $pf-green-400;
+      background: $color-pf-green-400;
     }
   }
 
   .is-strength-4 {
     .ReactPasswordStrength-strength-desc {
-      color: $pf-green-600;
+      color: $color-pf-green-600;
     }
 
     .ReactPasswordStrength-strength-bar {
-      background: $pf-green-600;
+      background: $color-pf-green-600;
     }
   }
 }