Skip to content

Commit 3a69f14

Browse files
TheSharpieOneeddywashere
TheSharpieOne
authored and
eddywashere
committed
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
1 parent 18d7d04 commit 3a69f14

66 files changed

Lines changed: 437 additions & 213 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/Alert.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { PropTypes } from 'react';
22
import classNames from 'classnames';
3+
import { mapToCssModules } from './utils';
34
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
45

56
const FirstChild = ({ children }) => (
@@ -9,13 +10,14 @@ const FirstChild = ({ children }) => (
910
const propTypes = {
1011
children: PropTypes.node,
1112
className: PropTypes.any,
13+
cssModule: PropTypes.object,
1214
color: PropTypes.string,
1315
isOpen: PropTypes.bool,
1416
toggle: PropTypes.func,
1517
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
1618
transitionAppearTimeout: PropTypes.number,
1719
transitionEnterTimeout: PropTypes.number,
18-
transitionLeaveTimeout: PropTypes.number
20+
transitionLeaveTimeout: PropTypes.number,
1921
};
2022

2123
const defaultProps = {
@@ -30,6 +32,7 @@ const defaultProps = {
3032
const Alert = (props) => {
3133
const {
3234
className,
35+
cssModule,
3336
tag: Tag,
3437
color,
3538
isOpen,
@@ -41,12 +44,12 @@ const Alert = (props) => {
4144
...attributes
4245
} = props;
4346

44-
const classes = classNames(
47+
const classes = mapToCssModules(classNames(
4548
className,
4649
'alert',
4750
`alert-${color}`,
4851
{ 'alert-dismissible': toggle }
49-
);
52+
), cssModule);
5053

5154
const alert = (
5255
<Tag {...attributes} className={classes} role="alert">

‎src/Breadcrumb.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React, { PropTypes } from 'react';
22
import classNames from 'classnames';
3+
import { mapToCssModules } from './utils';
34

45
const propTypes = {
56
tag: PropTypes.string,
6-
className: PropTypes.any
7+
className: PropTypes.any,
8+
cssModule: PropTypes.object,
79
};
810

911
const defaultProps = {
@@ -13,13 +15,14 @@ const defaultProps = {
1315
const Breadcrumb = (props) => {
1416
const {
1517
className,
18+
cssModule,
1619
tag: Tag,
1720
...attributes
1821
} = props;
19-
const classes = classNames(
22+
const classes = mapToCssModules(classNames(
2023
className,
2124
'breadcrumb'
22-
);
25+
), cssModule);
2326

2427
return (
2528
<Tag {...attributes} className={classes} />

‎src/BreadcrumbItem.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, { PropTypes } from 'react';
22
import classNames from 'classnames';
3+
import { mapToCssModules } from './utils';
34

45
const propTypes = {
56
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
67
active: PropTypes.bool,
7-
className: PropTypes.any
8+
className: PropTypes.any,
9+
cssModule: PropTypes.object,
810
};
911

1012
const defaultProps = {
@@ -14,15 +16,16 @@ const defaultProps = {
1416
const BreadcrumbItem = (props) => {
1517
const {
1618
className,
19+
cssModule,
1720
active,
1821
tag: Tag,
1922
...attributes
2023
} = props;
21-
const classes = classNames(
24+
const classes = mapToCssModules(classNames(
2225
className,
2326
active ? 'active' : false,
2427
'breadcrumb-item'
25-
);
28+
), cssModule);
2629

2730
return (
2831
<Tag {...attributes} className={classes} />

‎src/Button.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { PropTypes } from 'react';
22
import classNames from 'classnames';
3+
import { mapToCssModules } from './utils';
34

45
const propTypes = {
56
active: PropTypes.bool,
@@ -11,7 +12,8 @@ const propTypes = {
1112
onClick: PropTypes.func,
1213
size: PropTypes.string,
1314
children: PropTypes.node,
14-
className: PropTypes.any
15+
className: PropTypes.any,
16+
cssModule: PropTypes.object,
1517
};
1618

1719
const defaultProps = {
@@ -42,21 +44,22 @@ class Button extends React.Component {
4244
active,
4345
block,
4446
className,
47+
cssModule,
4548
color,
4649
outline,
4750
size,
4851
tag: Tag,
4952
...attributes
5053
} = this.props;
5154

52-
const classes = classNames(
55+
const classes = mapToCssModules(classNames(
5356
className,
5457
'btn',
5558
`btn${outline ? '-outline' : ''}-${color}`,
5659
size ? `btn-${size}` : false,
5760
block ? 'btn-block' : false,
5861
{ active, disabled: this.props.disabled }
59-
);
62+
), cssModule);
6063

6164
if (attributes.href && Tag === 'button') {
6265
Tag = 'a';

‎src/ButtonDropdown.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
22
import Dropdown from './Dropdown';
33

44
const propTypes = {
5-
children: PropTypes.node
5+
children: PropTypes.node,
66
};
77

88
const ButtonDropdown = (props) => {

‎src/ButtonGroup.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React, { PropTypes } from 'react';
22
import classNames from 'classnames';
3+
import { mapToCssModules } from './utils';
34

45
const propTypes = {
56
'aria-label': PropTypes.string,
6-
className: PropTypes.string,
7+
className: PropTypes.any,
8+
cssModule: PropTypes.object,
79
role: PropTypes.string,
810
size: PropTypes.string,
9-
vertical: PropTypes.bool
11+
vertical: PropTypes.bool,
1012
};
1113

1214
const defaultProps = {
@@ -16,16 +18,17 @@ const defaultProps = {
1618
const ButtonGroup = (props) => {
1719
const {
1820
className,
21+
cssModule,
1922
size,
2023
vertical,
2124
...attributes
2225
} = props;
2326

24-
const classes = classNames(
27+
const classes = mapToCssModules(classNames(
2528
className,
2629
size ? 'btn-group-' + size : false,
2730
vertical ? 'btn-group-vertical' : 'btn-group'
28-
);
31+
), cssModule);
2932

3033
return (
3134
<div {...attributes} className={classes} />

‎src/ButtonToolbar.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, { PropTypes } from 'react';
22
import classNames from 'classnames';
3+
import { mapToCssModules } from './utils';
34

45
const propTypes = {
56
'aria-label': PropTypes.string,
6-
className: PropTypes.string,
7-
role: PropTypes.string
7+
className: PropTypes.any,
8+
cssModule: PropTypes.object,
9+
role: PropTypes.string,
810
};
911

1012
const defaultProps = {
@@ -14,13 +16,14 @@ const defaultProps = {
1416
const ButtonToolbar = (props) => {
1517
const {
1618
className,
19+
cssModule,
1720
...attributes
1821
} = props;
1922

20-
const classes = classNames(
23+
const classes = mapToCssModules(classNames(
2124
className,
2225
'btn-toolbar'
23-
);
26+
), cssModule);
2427

2528
return (
2629
<div {...attributes} className={classes} />

‎src/Card.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React, { PropTypes } from 'react';
22
import classNames from 'classnames';
3+
import { mapToCssModules } from './utils';
34

45
const propTypes = {
56
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
67
inverse: PropTypes.bool,
78
color: PropTypes.string,
89
block: PropTypes.bool,
910
outline: PropTypes.bool,
10-
className: PropTypes.any
11+
className: PropTypes.any,
12+
cssModule: PropTypes.object,
1113
};
1214

1315
const defaultProps = {
@@ -17,20 +19,21 @@ const defaultProps = {
1719
const Card = (props) => {
1820
const {
1921
className,
22+
cssModule,
2023
color,
2124
block,
2225
inverse,
2326
outline,
2427
tag: Tag,
2528
...attributes
2629
} = props;
27-
const classes = classNames(
30+
const classes = mapToCssModules(classNames(
2831
className,
2932
'card',
3033
inverse ? 'card-inverse' : false,
3134
block ? 'card-block' : false,
3235
color ? `card${outline ? '-outline' : ''}-${color}` : false
33-
);
36+
), cssModule);
3437

3538
return (
3639
<Tag {...attributes} className={classes} />

‎src/CardBlock.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React, { PropTypes } from 'react';
22
import classNames from 'classnames';
3+
import { mapToCssModules } from './utils';
34

45
const propTypes = {
56
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
6-
className: PropTypes.any
7+
className: PropTypes.any,
8+
cssModule: PropTypes.object,
79
};
810

911
const defaultProps = {
@@ -13,13 +15,14 @@ const defaultProps = {
1315
const CardBlock = (props) => {
1416
const {
1517
className,
18+
cssModule,
1619
tag: Tag,
1720
...attributes
1821
} = props;
19-
const classes = classNames(
22+
const classes = mapToCssModules(classNames(
2023
className,
2124
'card-block'
22-
);
25+
), cssModule);
2326

2427
return (
2528
<Tag {...attributes} className={classes} />

‎src/CardColumns.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React, { PropTypes } from 'react';
22
import classNames from 'classnames';
3+
import { mapToCssModules } from './utils';
34

45
const propTypes = {
56
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
6-
className: PropTypes.any
7+
className: PropTypes.any,
8+
cssModule: PropTypes.object,
79
};
810

911
const defaultProps = {
@@ -13,13 +15,14 @@ const defaultProps = {
1315
const CardColumns = (props) => {
1416
const {
1517
className,
18+
cssModule,
1619
tag: Tag,
1720
...attributes
1821
} = props;
19-
const classes = classNames(
22+
const classes = mapToCssModules(classNames(
2023
className,
2124
'card-columns'
22-
);
25+
), cssModule);
2326

2427
return (
2528
<Tag {...attributes} className={classes} />

0 commit comments

Comments
 (0)