Fixes #37904 - move css from vendor to foreman

app/helpers/reactjs_helper.rb

@@ -42,7 +42,7 @@ def get_webpack_foreman_vendor_js
   end
 
   def get_webpack_foreman_vendor_css
-    foreman_vendor_css = get_webpack_chunk('foreman-vendor', 'css')
+    foreman_vendor_css = get_webpack_chunk('vendorStyles', 'css')
     stylesheet_link_tag("/webpack/#{foreman_vendor_css}")
   end
 

config/webpack.config.js

@@ -14,6 +14,7 @@ const { ModuleFederationPlugin } = require('webpack').container;
 var pluginUtils = require('../script/plugin_webpack_directories');
 var { generateExportsFile }= require('../webpack/assets/javascripts/exportAll');
 var CompressionPlugin = require('compression-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 class AddRuntimeRequirement {
   // to avoid "webpackRequire.l is not a function" error
@@ -166,7 +167,8 @@ const coreConfig = function() {
       __dirname,
       '..',
       'webpack/assets/javascripts/all_react_app_exports.js'
-    ),
+    ), 
+    vendorStyles: path.join(__dirname, '..', 'webpack/assets/javascripts/react_app/common/scss/vendor-core.scss'),
   };
   config.output = {
     path: path.join(__dirname, '..', 'public', 'webpack'),
@@ -189,10 +191,14 @@ const coreConfig = function() {
       filename: manifestFilename,
     })
   );
+  plugins.push(
+    new MiniCssExtractPlugin()
+  );
   config.plugins = plugins;
   var rules = config.module.rules;
   rules.push({
     test: /\.(sa|sc|c)ss$/,
+    exclude: /vendor-core/i,
     use: [
       {
         loader: 'style-loader',
@@ -205,6 +211,14 @@ const coreConfig = function() {
       'sass-loader',
     ],
   });
+  rules.push({
+    test: /vendor-core/i,
+    use: [
+      MiniCssExtractPlugin.loader,
+      'css-loader',
+      'sass-loader',
+    ],
+  });
   config.module.rules = rules;
   return config;
 };

package.json

@@ -69,6 +69,7 @@
     "jest-svg-transformer": "^1.0.0",
     "jest-transform-graphql": "^2.1.0",
     "jsx-ast-utils": "^3.3.3",
+    "mini-css-extract-plugin": "^2.9.1",
     "path-browserify": "^1.0.1",
     "prettier": "^1.19.1",
     "pretty-format": "26.6.2",

webpack/assets/javascripts/exportAll.js

@@ -19,6 +19,7 @@ function generateExports(directoryPath, exportFileContent = '') {
         !dirent.name.endsWith('.test.js') &&
         !dirent.name.endsWith('.fixtures.js') &&
         !dirent.name.endsWith('mockRequests.js') &&
+        !dirent.name.endsWith('vendor-core.scss') &&
         !fileNameWithoutExtension.includes('TestHelper') &&
         !fileNameWithoutExtension.includes('testHelper') &&
         !fileNameWithoutExtension.includes('APITestSetup')

webpack/assets/javascripts/react_app/common/scss/mixins.scss

@@ -0,0 +1,21 @@
+// Mixins - Bootstrap overrides
+// -------------------
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+          box-shadow: $shadow;
+}
+
+// Form control outline
+@mixin form-control-outline($color: $input-border-focus){
+  $color-rgba: rgba(red($color), green($color), blue($color), .6);
+  &:focus {
+    border-color: $color;
+    outline: 0 !important;
+    @include box-shadow(unquote("inset 0 1px 1px rgba(3, 3, 3, 0.075), 0 0 8px #{$color-rgba}"));
+  }
+}
+/**
+  Third Party mixins imports here
+*/
+@import '~patternfly/dist/sass/patternfly/bootstrap-mixin-overrides';
+@import '~patternfly/dist/sass/patternfly/mixins';

webpack/assets/javascripts/react_app/common/scss/vendor-core.scss

@@ -0,0 +1,21 @@
+/**
+  Third Party libraries imports here
+*/
+@import '../variables';
+@import './mixins';
+
+@import '~multiselect/css/multi-select.css';
+@import '~react-diff-view/style/index.css';
+@import '~select2/src/scss/core.scss';
+@import "~dsmorse-gridster/dist/jquery.gridster";
+@import "~datatables.net-bs/css/dataTables.bootstrap.css";
+@import "~@redhat-cloud-services/frontend-components/index.css";
+
+// patternfly v3
+@import '~patternfly-react/dist/sass/_patternfly-react.scss';
+@import '~patternfly-react-extensions/dist/sass/_select.scss';
+@import '~patternfly/dist/sass/patternfly/_loading-state';
+
+// patternfly v5
+@import '~@patternfly/patternfly/patternfly';
+@import '~@patternfly/patternfly/patternfly-addons';

webpack/assets/javascripts/react_app/common/variables.scss

@@ -1,3 +1,20 @@
-@import '~@theforeman/vendor/scss/variables.scss';
+/**
+  Third Party variables imports here
+*/
+// patternfly v3
+$font-path: '~patternfly/dist/fonts/';
+$img-path: '~patternfly/dist/img/';
+$icon-font-path: '~patternfly/dist/fonts/';
+@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
+@import '~patternfly/dist/sass/patternfly/variables';
 
-$header-max-width: calc(#{$pf-v5-global--breakpoint--lg} + 70px); //TODO move into @theforeman/vendor/scss/variables
+// patternfly v5
+@import '~@patternfly/patternfly/base/patternfly-variables';
+$pf-v5-global--font-path: '~@patternfly/patternfly/assets/fonts';
+$fa-font-path: '~@patternfly/patternfly/assets/fonts/webfonts';
+$pf-v5-global--fonticon-path: '~@patternfly/patternfly/assets/pficon';
+$pf-v5-global--image-path: '~@patternfly/patternfly/assets/images';
+$pf-prefix: 'pf-v5-';
+$button: #{$pf-prefix + 'c-button'};
+
+$header-max-width: calc(#{$pf-v5-global--breakpoint--lg} + 70px);

webpack/assets/javascripts/react_app/components/Layout/components/ImpersonateIcon/ImpersonateIcon.scss

@@ -1,4 +1,4 @@
-@import "~@theforeman/vendor/scss/variables";
+@import "../../../../common/variables";
 
 @keyframes blink {
   0% {

webpack/assets/javascripts/react_app/components/Layout/components/TaxonomySwitcher/TaxonomyDropdown.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import '../../../../common/variables';
 
 .pf-v5-c-masthead .pf-v5-c-toolbar {
   .pf-v5-c-context-selector__menu-search {

webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.scss

@@ -1,4 +1,4 @@
-@import '../../../../common/variables.scss';
+@import '../../../../common/variables';
 
 #data-toolbar {
   background-color: unset;

webpack/assets/javascripts/react_app/components/Layout/layout.scss

@@ -1,5 +1,5 @@
 @import '../../common/colors.scss';
-@import '../../common/variables.scss';
+@import '../../common/variables';
 
 .react-page #foreman-main-container {
   overflow-x: auto;

webpack/assets/javascripts/react_app/components/PF4/Bookmarks/bookmarks.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import '../../../common/variables';
 
 .bookmarks-dropdown-item {
   word-break: break-word;

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

@@ -1,4 +1,4 @@
-@import "~@theforeman/vendor/scss/variables";
+@import '../../common/variables';
 @import '../../common/colors.scss';
 
 .ReactPasswordStrength {

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

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import '../../common/variables';
 
 .autocomplete-search {
   width: 100%;

webpack/assets/javascripts/react_app/components/common/forms/DateTime/DateTimeOverrides.scss

@@ -1,4 +1,4 @@
-@import "~@theforeman/vendor/scss/variables";
+@import "../../../../common/variables";
 
 $screen-md:                  992px !default;
 $screen-md-min:              $screen-md !default;

webpack/assets/javascripts/react_app/components/common/forms/NumericInput.scss

@@ -1,5 +1,5 @@
-@import "~@theforeman/vendor/scss/variables";
-@import "~@theforeman/vendor/scss/mixins";
+@import "../../../common/variables";
+@import "../../../common/scss/mixins";
 
 .foreman-numeric-input {
   position: relative;