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() {

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

@@ -2,6 +2,7 @@ var React = require('react');
 var types = React.PropTypes;
 var BootstrapRow = require('react-bootstrap/lib/Row');
 import {mergeProps} from 'pui-react-helpers';
+import 'pui-css-grids';
 
 var Row = React.createClass({
   propTypes: {

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

@@ -3,6 +3,7 @@ const {PropTypes} = React;
 const ReactFaIcon = require('react-fa/lib/Icon');
 const objectAssign = require('object-assign');
 const classnames = require('classnames');
+import 'pui-css-iconography';
 
 class Icon extends React.Component {
   render() {

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

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

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

@@ -2,6 +2,7 @@ const React = require('react');
 const types = React.PropTypes;
 import {mergeProps} from 'pui-react-helpers';
 import classnames from 'classnames';
+import 'pui-css-forms';
 
 const SearchInput = React.createClass({
   propTypes: {

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

@@ -1,5 +1,6 @@
 var React = require('react');
 import {mergeProps} from 'pui-react-helpers';
+import 'pui-css-labels';
 
 var Label = React.createClass({
   render() {

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

@@ -1,5 +1,6 @@
 var React = require('react');
 var classnames = require('classnames');
+import 'pui-css-media';
 
 const shortSizes = {xsmall: 'xs', small: 'sm', medium: 'md', large: 'lg', xlarge: 'xl'};
 const charSizes = {small: 's', medium: 'm', large: 'l', xlarge: 'xl'};

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

@@ -1,6 +1,7 @@
 var React = require('react');
 var {DefaultH4} = require('pui-react-typography');
 import {mergeProps} from 'pui-react-helpers';
+import 'pui-css-modals';
 
 const BsModal = require('react-bootstrap/lib/Modal');
 const BsModalHeader = require('react-bootstrap/lib/ModalHeader');

library/src/pivotal-ui-react/overlay-trigger/overlay-trigger.js

@@ -1,6 +1,7 @@
 import BsOverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import React from 'react';
 import uniqueid from 'lodash.uniqueid';
+import 'pui-css-bootstrap';
 
 const OverlayTrigger = React.createClass({
   propTypes: {

library/src/pivotal-ui-react/overlay-trigger/package.json

@@ -3,7 +3,8 @@
   "description": "A React component for displaying a tooltip or popover on user action",
   "dependencies": {
     "lodash.uniqueid": "^3.0.0",
-    "react-bootstrap": "0.28.2"
+    "react-bootstrap": "0.28.2",
+    "pui-css-bootstrap": "^3.2.0"
   },
   "homepage": "http://styleguide.pivotal.io/react.html#tooltips_react"
-}
+}

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

@@ -2,6 +2,7 @@ const React = require('react');
 const types = React.PropTypes;
 const classnames = require('classnames');
 import {mergeProps} from 'pui-react-helpers';
+import 'pui-css-panels';
 
 const paddingTypes = [];
 ['p', 'm'].forEach(type => {

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

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

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

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

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

@@ -1,5 +1,6 @@
 var React = require('react');
 import {mergeProps} from 'pui-react-helpers';
+import 'pui-css-ribbons';
 
 var Ribbon = React.createClass({
   render() {

library/src/pivotal-ui-react/select-fancy/select-fancy.js

@@ -1,6 +1,7 @@
 import classnames from 'classnames';
 import {mergeProps} from 'pui-react-helpers';
 import React from 'react';
+import 'pui-css-forms';
 
 const types = React.PropTypes;
 

library/src/pivotal-ui-react/sortable-table/sortable-table.js

@@ -4,6 +4,8 @@ const sortBy = require('lodash.sortby');
 const types = React.PropTypes;
 import {mergeProps} from 'pui-react-helpers';
 import findindex from 'lodash.findindex';
+import 'pui-css-iconography';
+import 'pui-css-tables';
 
 export const TableHeader = React.createClass({
   propTypes: {

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

@@ -7,6 +7,8 @@ import uniqueid from 'lodash.uniqueid';
 import classnames from 'classnames';
 import raf from 'raf';
 import MediaSize from './media-size';
+import 'pui-css-collapse';
+import 'pui-css-tabs';
 
 const BaseTabs = React.createClass({
   propTypes: {

library/src/pivotal-ui-react/tile-layout/tile-layout.js

@@ -1,6 +1,7 @@
 const React = require('react');
 const classnames = require('classnames');
 import {mergeProps} from 'pui-react-helpers';
+import 'pui-css-tile-layout';
 
 const TileLayout = React.createClass({
   propTypes: {

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

@@ -1,3 +1,5 @@
+import 'pui-css-tooltips';
+
 module.exports = {
   Tooltip: require('react-bootstrap/lib/Tooltip')
 };

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

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

library/src/pivotal-ui/components/alerts/index.js

@@ -0,0 +1,6 @@
+try {
+  require('pui-css-bootstrap');
+  require('pui-css-typography');
+  require('./alerts.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/alignment/index.js

@@ -0,0 +1,4 @@
+try {
+  require('./alignment.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/all/index.js

@@ -0,0 +1,41 @@
+try {
+  require('pui-css-alerts');
+  require('pui-css-alignment');
+  require('pui-css-avatars');
+  require('pui-css-back-to-top');
+  require('pui-css-backgrounds');
+  require('pui-css-bootstrap');
+  require('pui-css-buttons');
+  require('pui-css-code');
+  require('pui-css-collapse');
+  require('pui-css-colors');
+  require('pui-css-dividers');
+  require('pui-css-dropdowns');
+  require('pui-css-ellipsis');
+  require('pui-css-forms');
+  require('pui-css-google-maps');
+  require('pui-css-grids');
+  require('pui-css-hoverable');
+  require('pui-css-iconography');
+  require('pui-css-images');
+  require('pui-css-labels');
+  require('pui-css-links');
+  require('pui-css-lists');
+  require('pui-css-media');
+  require('pui-css-modals');
+  require('pui-css-panels');
+  require('pui-css-panes');
+  require('pui-css-progress-bars');
+  require('pui-css-ribbons');
+  require('pui-css-scales');
+  require('pui-css-spinners');
+  require('pui-css-tables');
+  require('pui-css-tabs');
+  require('pui-css-tile-layout');
+  require('pui-css-tooltips');
+  require('pui-css-traffic-lights');
+  require('pui-css-typography');
+  require('pui-css-vertical-alignment');
+  require('pui-css-whitespace');
+} catch(e) {
+}

library/src/pivotal-ui/components/autocomplete/index.js

@@ -0,0 +1,6 @@
+try {
+  require('pui-css-bootstrap');
+  require('pui-css-forms');
+  require('./autocomplete.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/avatars/index.js

@@ -0,0 +1,5 @@
+try {
+  require('pui-css-bootstrap');
+  require('./avatars.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/back-to-top/index.js

@@ -0,0 +1,7 @@
+try {
+  require('pui-css-bootstrap');
+  require('pui-css-links');
+  require('pui-css-iconography');
+  require('./back-to-top.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/backgrounds/index.js

@@ -0,0 +1,4 @@
+try {
+  require('./backgrounds.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/button-group/index.js

@@ -0,0 +1,6 @@
+try {
+  require('pui-css-bootstrap');
+  require('pui-css-buttons');
+  require('./button-group.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/buttons/index.js

@@ -0,0 +1,6 @@
+try {
+  require('pui-css-bootstrap');
+  require('pui-css-typography');
+  require('./buttons.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/code/code.scss

@@ -30,7 +30,7 @@
   box-shadow: 0 2px 0 $shadow-1;
 
   &::before {
-    content: '\F111 \0000a0 \0000a0 \0000a0 \0000a0 \F111 \0000a0 \0000a0 \0000a0 \0000a0 \F111';
+    content: '\F111 \a0 \a0 \F111 \a0 \a0 \F111';
     color: $gray-4;
     font-size: 13px;
     font-family: FontAwesome;

library/src/pivotal-ui/components/code/index.js

@@ -0,0 +1,5 @@
+try {
+  require('pui-css-iconography');
+  require('./code.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/collapse/index.js

@@ -0,0 +1,5 @@
+try {
+  require('pui-css-bootstrap');
+  require('./collapse.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/colors/index.js

@@ -0,0 +1,4 @@
+try {
+  require('./colors.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/dividers/index.js

@@ -0,0 +1,4 @@
+try {
+  require('./dividers.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/dropdowns/index.js

@@ -0,0 +1,6 @@
+try {
+  require('pui-css-bootstrap');
+  require('pui-css-buttons');
+  require('./dropdowns.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/ellipsis/index.js

@@ -0,0 +1,4 @@
+try {
+  require('./ellipsis.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/forms/index.js

@@ -0,0 +1,5 @@
+try {
+  require('pui-css-bootstrap');
+  require('./forms.css');
+} catch(e) {
+}

library/src/pivotal-ui/components/google-maps/index.js

@@ -0,0 +1,4 @@
+try {
+  require('./google-maps.css');
+} catch(e) {
+}