fix(pf3): Use postcss plugin to build pf3 mapper.

Author: Hyperkid123

packages/pf3-component-mapper/package.json

@@ -45,7 +45,7 @@
     "eslint-plugin-react": "^7.11.1",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.4.4",
-    "node-sass": "^4.10.0",
+    "node-sass": "^4.12.0",
     "patternfly-react": "^2.28.2",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
@@ -58,8 +58,8 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-size-snapshot": "^0.10.0",
     "rollup-plugin-terser": "^5.1.2",
     "sass-loader": "^7.1.0",

packages/pf3-component-mapper/rollup.config.js

@@ -5,8 +5,8 @@ import replace from 'rollup-plugin-replace';
 import nodeGlobals from 'rollup-plugin-node-globals';
 import { terser } from 'rollup-plugin-terser';
 import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
-import sass from 'rollup-plugin-sass';
 import async from 'rollup-plugin-async';
+import postcss from 'rollup-plugin-postcss';
 
 const globals = {
   react: 'React',
@@ -51,8 +51,8 @@ export default [{
       keep_classnames: true,
       keep_fnames: true,
     }),
-    sass({
-      insert: true,
+    postcss({
+      inject: true,
     }),
   ],
 }];

packages/pf3-component-mapper/src/form-fields/date-time-picker/date-picker-styles.scss

@@ -1,5 +1,3 @@
-@import '~react-day-picker/lib/style.css';
-
 .picker-input[readonly]:hover {
   border-color: #7dc3e8;
 }

packages/pf3-component-mapper/src/form-fields/date-time-picker/date-time-picker.js

@@ -5,6 +5,8 @@ import PickerInput from './picker-input';
 import PopoverRoot from './popover-root';
 import { createDisabledDays } from './helpers';
 
+import 'react-day-picker/lib/style.css';
+
 const selectValidDate = (newDate, disabledDays) => {
   const { after, before } = disabledDays.find(item => typeof item === 'object' && !(item instanceof Date)) || {};
   if (before && newDate < before) {