Merge pull request #161 from data-driven-forms/use-postcss-for-pf3

Use postcss for pf3

Author: rvsia

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',
@@ -23,9 +23,14 @@ const babelOptions = {
 
 const commonjsOptions = {
   ignoreGlobal: true,
-  include: /node_modules/,
+  include: [
+    /node_modules/,
+    '../../node_modules/**',
+
+  ],
   namedExports: {
     '../react-form-renderer/dist/index.js': [ 'composeValidators' ],
+    '../../node_modules/react-day-picker/DayPicker.js': [ 'DayPicker' ],
   },
 };
 
@@ -42,17 +47,17 @@ export default [{
   plugins: [
     async(),
     nodeResolve(),
-    babel(babelOptions),
     commonjs(commonjsOptions),
+    babel(babelOptions),
     nodeGlobals(), // Wait for https://github.com/cssinjs/jss/pull/893
     replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
     sizeSnapshot({ snapshotPath: 'size-snapshot.json' }),
     terser({
       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) {

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

@@ -4,7 +4,7 @@ import Navbar from './navbar';
 import MonthSelector from './month-selector';
 import YearSelector from './year-selector';
 import TimePicker from './time-picker';
-import DayPicker from 'react-day-picker/DayPicker';
+import * as DayPicker from 'react-day-picker/DayPicker';
 import MomentLocaleUtils from 'react-day-picker/moment';
 import './date-picker-styles.scss';
 
@@ -54,7 +54,7 @@ const PopoverRoot = ({
                     onPreviousClick={ () => yearChange(selectedDay ? selectedDay.getFullYear() - 1 : new Date().getFullYear() - 1) }
                   />)
                 :
-                <DayPicker
+                <DayPicker.DayPicker
                   onDayClick={ onDayClick }
                   selectedDays={ selectedDay }
                   month={ selectedDay }