kill that stupid plugin, do styles manually, add reset wrapper class

.babelrc

@@ -8,13 +8,6 @@
     "babel-preset-react"
   ],
   "plugins": [
-    "transform-object-rest-spread",
-    ["babel-plugin-react-css-modules", {
-      "webpackHotModuleReloading": true,
-      "filetypes": {
-        ".scss": "postcss-scss"
-      },
-      "generateScopedName": '[name]__[local]___[hash:base64:5]'
-    }]
+    "transform-object-rest-spread"
   ]
 }

package.json

@@ -32,7 +32,6 @@
     "babel-cli": "^6.24.1",
     "babel-jest": "^20.0.3",
     "babel-loader": "^7.0.0",
-    "babel-plugin-react-css-modules": "^2.7.1",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-babili": "^0.0.12",
     "babel-preset-env": "^1.4.0",

src/Button.jsx

-/* eslint-disable no-unused-vars */
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import borders from 'bootstrap/scss/utilities/_borders.scss';
 import buttons from 'bootstrap/scss/_buttons.scss';
 
 function Button(props) {
-  const styles = [
-    ...props.classNames,
-    'buttons.btn',
+  const classes = [
+    buttons.btn,
   ];
 
   if (props.buttonType) {
-    styles.push(`buttons.btn-${props.buttonType}`);
+    classes.push(buttons[`btn-${props.buttonType}`]);
   }
 
   return (
     <button
+      className={classNames([
+        ...classes,
+        ...props.classNames,
+      ])}
       onBlur={props.onBlur}
       onClick={props.onClick}
       onKeyDown={props.onKeyDown}
-      styleName={classNames(styles)}
       type={props.type}
     >
       {props.display}
@@ -33,9 +33,9 @@ Button.propTypes = {
   buttonType: PropTypes.string,
   classNames: PropTypes.arrayOf(PropTypes.string),
   display: PropTypes.string.isRequired,
-  onBlur: PropTypes.function,
-  onClick: PropTypes.function,
-  onKeyDown: PropTypes.function,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onKeyDown: PropTypes.func,
   type: PropTypes.string,
 };
 

src/Dropdown.jsx

 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import 'bootstrap/scss/_dropdown.scss';
+import dd from 'bootstrap/scss/_dropdown.scss';
+import borders from 'bootstrap/scss/utilities/_borders.scss';
 
+import pc from './utils/base-styles.scss';
 import Button from './Button';
 
 const triggerKeys = {
@@ -97,7 +99,7 @@ class Dropdown extends React.Component {
 
   generateMenuItems(menuItems) {
     return menuItems.map((menuItem, i) => (
-      <li styleName='dropdown-item' key={i}>
+      <li className={dd['dropdown-item']} key={i}>
         <a
           role="menuitem"
           href={menuItem.href}
@@ -117,26 +119,31 @@ class Dropdown extends React.Component {
     const menuItems = this.generateMenuItems(this.props.menuItems);
     return (
       <div
-        styleName={classNames([
-          'dropdown',
-        { show: this.state.open },
+        className={classNames([
+          pc['paragon-component'],
+          dd.dropdown,
+        { [dd.show]: this.state.open },
         ])}
         ref={(container) => { this.container = container; }}
       >
         <Button
           aria-expanded={this.state.open}
           aria-haspopup="true"
+          buttonType="secondary"
           display={this.props.title}
-          className="dropdown-toggle"
           onClick={this.toggle}
           onKeyDown={this.handleToggleKeyDown}
+          classNames={[
+            borders['border-0'],
+            dd['dropdown-toggle'],
+          ]}
           type="button"
           ref={(toggleElem) => { this.toggleElem = toggleElem; }}
         />
         <ul
           aria-label={this.props.title}
           aria-hidden={!this.state.open}
-          styleName='dropdown-menu'
+          className={dd['dropdown-menu']}
           role="menu"
         >
           {menuItems}

src/utils/base-styles.scss

+.paragon-component {
+    @import "~bootstrap/scss/_reboot";
+    @import "~bootstrap/scss/_normalize";
+}
\ No newline at end of file