feat(cssModule): add support for css module (#206)

Add cssModule prop to every component which produces a css classname Add mapToCssModule util will can turn a normal css className string into module className if the module object/mapping is provided. Closes #205
reactstrap · Oct 27, 2016 · 3a69f14 · 3a69f14
1 parent 18d7d04
commit 3a69f14
Show file tree

Hide file tree

Showing 66 changed files with 437 additions and 213 deletions.
diff --git a/src/Alert.js b/src/Alert.js
@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import { mapToCssModules } from './utils';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
 const FirstChild = ({ children }) => (
@@ -9,13 +10,14 @@ const FirstChild = ({ children }) => (
 const propTypes = {
   children: PropTypes.node,
   className: PropTypes.any,
+  cssModule: PropTypes.object,
   color: PropTypes.string,
   isOpen: PropTypes.bool,
   toggle: PropTypes.func,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   transitionAppearTimeout: PropTypes.number,
   transitionEnterTimeout: PropTypes.number,
-  transitionLeaveTimeout: PropTypes.number
+  transitionLeaveTimeout: PropTypes.number,
 };
 
 const defaultProps = {
@@ -30,6 +32,7 @@ const defaultProps = {
 const Alert = (props) => {
   const {
     className,
+    cssModule,
     tag: Tag,
     color,
     isOpen,
@@ -41,12 +44,12 @@ const Alert = (props) => {
     ...attributes
   } = props;
 
-  const classes = classNames(
+  const classes = mapToCssModules(classNames(
     className,
     'alert',
     `alert-${color}`,
     { 'alert-dismissible': toggle }
-  );
+  ), cssModule);
 
   const alert = (
     <Tag {...attributes} className={classes} role="alert">

diff --git a/src/Breadcrumb.js b/src/Breadcrumb.js
@@ -1,9 +1,11 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import { mapToCssModules } from './utils';
 
 const propTypes = {
   tag: PropTypes.string,
-  className: PropTypes.any
+  className: PropTypes.any,
+  cssModule: PropTypes.object,
 };
 
 const defaultProps = {
@@ -13,13 +15,14 @@ const defaultProps = {
 const Breadcrumb = (props) => {
   const {
     className,
+    cssModule,
     tag: Tag,
     ...attributes
   } = props;
-  const classes = classNames(
+  const classes = mapToCssModules(classNames(
     className,
     'breadcrumb'
-  );
+  ), cssModule);
 
   return (
     <Tag {...attributes} className={classes} />

diff --git a/src/BreadcrumbItem.js b/src/BreadcrumbItem.js
@@ -1,10 +1,12 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import { mapToCssModules } from './utils';
 
 const propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   active: PropTypes.bool,
-  className: PropTypes.any
+  className: PropTypes.any,
+  cssModule: PropTypes.object,
 };
 
 const defaultProps = {
@@ -14,15 +16,16 @@ const defaultProps = {
 const BreadcrumbItem = (props) => {
   const {
     className,
+    cssModule,
     active,
     tag: Tag,
     ...attributes
   } = props;
-  const classes = classNames(
+  const classes = mapToCssModules(classNames(
     className,
     active ? 'active' : false,
     'breadcrumb-item'
-  );
+  ), cssModule);
 
   return (
     <Tag {...attributes} className={classes} />

diff --git a/src/Button.js b/src/Button.js
@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import { mapToCssModules } from './utils';
 
 const propTypes = {
   active: PropTypes.bool,
@@ -11,7 +12,8 @@ const propTypes = {
   onClick: PropTypes.func,
   size: PropTypes.string,
   children: PropTypes.node,
-  className: PropTypes.any
+  className: PropTypes.any,
+  cssModule: PropTypes.object,
 };
 
 const defaultProps = {
@@ -42,21 +44,22 @@ class Button extends React.Component {
       active,
       block,
       className,
+      cssModule,
       color,
       outline,
       size,
       tag: Tag,
       ...attributes
     } = this.props;
 
-    const classes = classNames(
+    const classes = mapToCssModules(classNames(
       className,
       'btn',
       `btn${outline ? '-outline' : ''}-${color}`,
       size ? `btn-${size}` : false,
       block ? 'btn-block' : false,
       { active, disabled: this.props.disabled }
-    );
+    ), cssModule);
 
     if (attributes.href && Tag === 'button') {
       Tag = 'a';

diff --git a/src/ButtonDropdown.js b/src/ButtonDropdown.js
@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import Dropdown from './Dropdown';
 
 const propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
 };
 
 const ButtonDropdown = (props) => {

diff --git a/src/ButtonGroup.js b/src/ButtonGroup.js
@@ -1,12 +1,14 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import { mapToCssModules } from './utils';
 
 const propTypes = {
   'aria-label': PropTypes.string,
-  className: PropTypes.string,
+  className: PropTypes.any,
+  cssModule: PropTypes.object,
   role: PropTypes.string,
   size: PropTypes.string,
-  vertical: PropTypes.bool
+  vertical: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -16,16 +18,17 @@ const defaultProps = {
 const ButtonGroup = (props) => {
   const {
     className,
+    cssModule,
     size,
     vertical,
     ...attributes
   } = props;
 
-  const classes = classNames(
+  const classes = mapToCssModules(classNames(
     className,
     size ? 'btn-group-' + size : false,
     vertical ? 'btn-group-vertical' : 'btn-group'
-  );
+  ), cssModule);
 
   return (
     <div {...attributes} className={classes} />

diff --git a/src/ButtonToolbar.js b/src/ButtonToolbar.js
@@ -1,10 +1,12 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import { mapToCssModules } from './utils';
 
 const propTypes = {
   'aria-label': PropTypes.string,
-  className: PropTypes.string,
-  role: PropTypes.string
+  className: PropTypes.any,
+  cssModule: PropTypes.object,
+  role: PropTypes.string,
 };
 
 const defaultProps = {
@@ -14,13 +16,14 @@ const defaultProps = {
 const ButtonToolbar = (props) => {
   const {
     className,
+    cssModule,
     ...attributes
   } = props;
 
-  const classes = classNames(
+  const classes = mapToCssModules(classNames(
     className,
     'btn-toolbar'
-  );
+  ), cssModule);
 
   return (
     <div {...attributes} className={classes} />

diff --git a/src/Card.js b/src/Card.js
@@ -1,13 +1,15 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import { mapToCssModules } from './utils';
 
 const propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   inverse: PropTypes.bool,
   color: PropTypes.string,
   block: PropTypes.bool,
   outline: PropTypes.bool,
-  className: PropTypes.any
+  className: PropTypes.any,
+  cssModule: PropTypes.object,
 };
 
 const defaultProps = {
@@ -17,20 +19,21 @@ const defaultProps = {
 const Card = (props) => {
   const {
     className,
+    cssModule,
     color,
     block,
     inverse,
     outline,
     tag: Tag,
     ...attributes
   } = props;
-  const classes = classNames(
+  const classes = mapToCssModules(classNames(
     className,
     'card',
     inverse ? 'card-inverse' : false,
     block ? 'card-block' : false,
     color ? `card${outline ? '-outline' : ''}-${color}` : false
-  );
+  ), cssModule);
 
   return (
     <Tag {...attributes} className={classes} />

diff --git a/src/CardBlock.js b/src/CardBlock.js
@@ -1,9 +1,11 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import { mapToCssModules } from './utils';
 
 const propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.any
+  className: PropTypes.any,
+  cssModule: PropTypes.object,
 };
 
 const defaultProps = {
@@ -13,13 +15,14 @@ const defaultProps = {
 const CardBlock = (props) => {
   const {
     className,
+    cssModule,
     tag: Tag,
     ...attributes
   } = props;
-  const classes = classNames(
+  const classes = mapToCssModules(classNames(
     className,
     'card-block'
-  );
+  ), cssModule);
 
   return (
     <Tag {...attributes} className={classes} />

diff --git a/src/CardColumns.js b/src/CardColumns.js
@@ -1,9 +1,11 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import { mapToCssModules } from './utils';
 
 const propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.any
+  className: PropTypes.any,
+  cssModule: PropTypes.object,
 };
 
 const defaultProps = {
@@ -13,13 +15,14 @@ const defaultProps = {
 const CardColumns = (props) => {
   const {
     className,
+    cssModule,
     tag: Tag,
     ...attributes
   } = props;
-  const classes = classNames(
+  const classes = mapToCssModules(classNames(
     className,
     'card-columns'
-  );
+  ), cssModule);
 
   return (
     <Tag {...attributes} className={classes} />

diff --git a/src/CardDeck.js b/src/CardDeck.js
@@ -1,10 +1,12 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import { mapToCssModules } from './utils';
 
 const propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   className: PropTypes.any,
-  flex: PropTypes.bool
+  cssModule: PropTypes.object,
+  flex: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -15,14 +17,15 @@ const defaultProps = {
 const CardDeck = (props) => {
   const {
     className,
+    cssModule,
     tag: Tag,
     flex,
     ...attributes
   } = props;
-  const classes = classNames(
+  const classes = mapToCssModules(classNames(
     className,
     'card-deck'
-  );
+  ), cssModule);
 
   if (flex) {
     return (

diff --git a/src/CardFooter.js b/src/CardFooter.js
@@ -1,9 +1,11 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import { mapToCssModules } from './utils';
 
 const propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.any
+  className: PropTypes.any,
+  cssModule: PropTypes.object,
 };
 
 const defaultProps = {
@@ -13,13 +15,14 @@ const defaultProps = {
 const CardFooter = (props) => {
   const {
     className,
+    cssModule,
     tag: Tag,
     ...attributes
   } = props;
-  const classes = classNames(
+  const classes = mapToCssModules(classNames(
     className,
     'card-footer'
-  );
+  ), cssModule);
 
   return (
     <Tag {...attributes} className={classes} />