feat(css-compiling): use webpack to compile react components' css

[#113975075]

Signed-off-by: Adam Berkovec <aberkovec@pivotal.io>

Author: elenasharma

library/helpers/pui-aliases.js

@@ -2,10 +2,20 @@ import glob from 'glob';
 import path from 'path';
 
 const reactPackageDirs = glob.sync('src/pivotal-ui-react/*', {realpath: true});
-
-export default reactPackageDirs.reduce((memo, packageDir) => {
+const reactAliases = reactPackageDirs.reduce((memo, packageDir) => {
   const componentName = path.basename(packageDir);
   memo[`pui-react-${componentName}\$`] = path.join(packageDir, `${componentName}.js`);
   memo[`pui-react-${componentName}`] = packageDir;
   return memo;
 }, {});
+
+const cssPackageDirs = glob.sync('src/pivotal-ui/components/*', {realpath: true});
+const cssAliases = cssPackageDirs.reduce((memo, packageDir) => {
+  const componentName = path.basename(packageDir);
+  memo[`pui-css-${componentName}\$`] = path.join(packageDir, 'index.js');
+  memo[`pui-css-${componentName}`] = packageDir;
+  return memo;
+}, {});
+
+
+export default {...cssAliases, ...reactAliases}

library/src/pivotal-ui-react/alerts/alerts.js

@@ -2,6 +2,8 @@ var React = require('react');
 var types = React.PropTypes;
 var BsAlert = require('react-bootstrap/lib/Alert');
 var {Media} = require('pui-react-media');
+import 'pui-css-alerts';
+import 'pui-css-iconography';
 
 var Alert = React.createClass({
   propTypes: {

library/src/pivotal-ui-react/autocomplete/autocomplete.js

@@ -7,6 +7,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var scrollIntoView = require('scroll-into-view');
 var TrieSearch = require('trie-search');
+import 'pui-css-autocomplete';
 
 var types = React.PropTypes;
 

library/src/pivotal-ui-react/back-to-top/back-to-top.js

@@ -3,6 +3,7 @@ var AnimationMixin = require('pui-react-animation');
 var throttle = require('lodash.throttle');
 var {getScrollTop, setScrollTop} = require('./scroll-top');
 import {mergeProps} from 'pui-react-helpers';
+import 'pui-css-back-to-top';
 
 var BackToTop = React.createClass({
   mixins: [AnimationMixin],

library/src/pivotal-ui-react/buttons/buttons.js

@@ -1,5 +1,6 @@
 var React = require('react');
 import {mergeProps} from 'pui-react-helpers';
+import 'pui-css-buttons';
 
 var UIButton = React.createClass({
   propTypes: {

library/src/pivotal-ui-react/collapse/collapse.js

@@ -2,6 +2,9 @@ var React = require('react');
 var types = React.PropTypes;
 var BsPanel = require('react-bootstrap/lib/Panel');
 import {mergeProps} from 'pui-react-helpers';
+import 'pui-css-collapse';
+import 'pui-css-iconography';
+import 'pui-css-dividers';
 
 var BaseCollapse = React.createClass({
   propTypes: {

library/src/pivotal-ui-react/dividers/dividers.js

@@ -1,6 +1,7 @@
 var React = require('react');
 var types = React.PropTypes;
 import {mergeProps} from 'pui-react-helpers';
+import 'pui-css-dividers';
 
 var DividerProps = {
   propTypes: {

library/src/pivotal-ui-react/draggable-list/draggable-list.js

@@ -3,6 +3,7 @@ var types = React.PropTypes;
 var classnames = require('classnames');
 var move = require('./move_helper');
 import {mergeProps} from 'pui-react-helpers';
+import 'pui-css-lists';
 
 var HoverMixin = {
   getInitialState() {

library/src/pivotal-ui-react/dropdowns/dropdowns.js

@@ -1,6 +1,9 @@
 var React = require('react');
 import classnames from 'classnames';
 import uniqueid from 'lodash.uniqueid';
+import 'pui-css-dropdowns';
+import 'pui-css-iconography';
+import 'pui-css-button-group';
 
 var BsDropdown = require('react-bootstrap/lib/Dropdown');
 

library/src/pivotal-ui-react/expander/expander.js

@@ -1,5 +1,6 @@
 const React = require('react');
 const Collapse = require('react-bootstrap/lib/Collapse');
+import 'pui-css-bootstrap';
 
 const ExpanderTrigger = React.createClass({
   getInitialState() {