Skip to content

Commit ba67d36

Browse files
gajusgajus
committed
ESLint compliance.
1 parent b59e040 commit ba67d36

File tree

5 files changed

+51
-51
lines changed

5 files changed

+51
-51
lines changed

‎README.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ However, this approach has several disadvantages:
5959
* Mixing CSS Modules and global CSS classes is cumbersome.
6060
* Reference to an undefined CSS Module resolves to `undefined` without a warning.
6161

62-
React CSS Modules component automates loading of CSS Modules using `moduleName` property, e.g.
62+
React CSS Modules component automates loading of CSS Modules using `localClassName` property, e.g.
6363

6464
```js
6565
import React from 'react';
@@ -68,9 +68,9 @@ import CSSModules from 'react-css-modules';
6868

6969
class Car extends React.Component {
7070
render () {
71-
return <div moduleName='car'>
72-
<div moduleName='front-door'></div>
73-
<div moduleName='back-door'></div>
71+
return <div localClassName='car'>
72+
<div localClassName='front-door'></div>
73+
<div localClassName='back-door'></div>
7474
</div>;
7575
}
7676
}
@@ -85,15 +85,15 @@ Using `react-css-modules`:
8585
* There is clear distinction between global CSS and CSS Modules, e.g.
8686

8787
```js
88-
<div className='global-css' moduleName='local-module'></div>
88+
<div className='global-css' localClassName='local-module'></div>
8989
```
9090

91-
* You are warned when `moduleName` refers to an undefined CSS Module ([`errorWhenNotFound`](#errorwhennotfound) option).
91+
* You are warned when `localClassName` refers to an undefined CSS Module ([`errorWhenNotFound`](#errorwhennotfound) option).
9292
* You can enforce use of a single CSS module per `ReactElement` ([`allowMultiple`](#allowmultiple) option).
9393

9494
## The Implementation
9595

96-
`react-css-modules` extends `render` method of the target component. It will use the value of `moduleName` to look for CSS Modules in the associated styles object and will append the matching unique CSS class names to the `ReactElement` `className` property value.
96+
`react-css-modules` extends `render` method of the target component. It will use the value of `localClassName` to look for CSS Modules in the associated styles object and will append the matching unique CSS class names to the `ReactElement` `className` property value.
9797

9898
[Awesome!](https://twitter.com/intent/retweet?tweet_id=636497036603428864)
9999

@@ -217,14 +217,14 @@ Allows multiple CSS Module names.
217217
When `false`, the following will cause an error:
218218

219219
```js
220-
<div moduleName='foo bar' />
220+
<div localClassName='foo bar' />
221221
```
222222

223223
#### `errorWhenNotFound`
224224

225225
Default: `true`.
226226

227-
Throws an error when `moduleName` cannot be mapped to an existing CSS Module.
227+
Throws an error when `localClassName` cannot be mapped to an existing CSS Module.
228228

229229
## SASS, SCSS, LESS and other CSS Preprocessors
230230

@@ -275,7 +275,7 @@ Composition promotes better separation of markup and style using semantics that
275275

276276
To learn more about composing CSS rules, I suggest reading Glen Maddern article about [CSS Modules](http://glenmaddern.com/articles/css-modules) and the official [spec of the CSS Modules](https://github.com/css-modules/css-modules).
277277

278-
That said, if you enable [`allowMultiple`](#allowmultiple) option, you can map multiple CSS Modules to a single `ReactElement`. `react-css-modules` will append a unique class name for every CSS Module it matches in the `moduleName` declaration, e.g.
278+
That said, if you enable [`allowMultiple`](#allowmultiple) option, you can map multiple CSS Modules to a single `ReactElement`. `react-css-modules` will append a unique class name for every CSS Module it matches in the `localClassName` declaration, e.g.
279279

280280
```css
281281
.button {
@@ -288,7 +288,7 @@ That said, if you enable [`allowMultiple`](#allowmultiple) option, you can map m
288288
```
289289

290290
```js
291-
<div moduleName='button active'></div>
291+
<div localClassName='button active'></div>
292292
```
293293

294294
This will map both [Interoperable CSS](https://github.com/css-modules/icss) CSS classes to the target element.

‎dist/linkClass.js

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,28 +22,28 @@ linkClass = function (element) {
2222
var styles = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
2323
var options = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
2424

25-
var childrenCount = undefined,
25+
var appendClassName = undefined,
26+
childrenCount = undefined,
2627
clonedElement = undefined,
27-
moduleNames = undefined,
28+
localClassNames = undefined,
2829
newChildren = undefined,
29-
newProps = undefined,
30-
appendClassName = undefined;
30+
newProps = undefined;
3131

32-
moduleNames = element.props.moduleName;
32+
localClassNames = element.props.localClassName;
3333

34-
if (moduleNames) {
35-
moduleNames = moduleNames.split(' ');
34+
if (localClassNames) {
35+
localClassNames = localClassNames.split(' ');
3636

37-
if (options.allowMultiple === false && moduleNames.length > 1) {
38-
throw new Error('ReactElement moduleName property defines multiple module names ("' + element.props.moduleName + '").');
37+
if (options.allowMultiple === false && localClassNames.length > 1) {
38+
throw new Error('ReactElement localClassName property defines multiple module names ("' + element.props.localClassName + '").');
3939
}
4040

41-
appendClassName = moduleNames.map(function (moduleName) {
42-
if (styles[moduleName]) {
43-
return styles[moduleName];
41+
appendClassName = localClassNames.map(function (localClassName) {
42+
if (styles[localClassName]) {
43+
return styles[localClassName];
4444
} else {
4545
if (options.errorWhenNotFound === true) {
46-
throw new Error('"' + moduleName + '" CSS module is undefined.');
46+
throw new Error('"' + localClassName + '" CSS module is undefined.');
4747
}
4848

4949
return '';

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"css",
1313
"modules"
1414
],
15-
"version": "5.0.0",
15+
"version": "2.0.0",
1616
"author": {
1717
"name": "Gajus Kuizinas",
1818
"email": "gk@anuary.com",

‎src/linkClass.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,28 @@ let linkClass;
99
* @return {ReactElement}
1010
*/
1111
linkClass = (element, styles = {}, options = {}) => {
12-
let childrenCount,
12+
let appendClassName,
13+
childrenCount,
1314
clonedElement,
14-
moduleNames,
15+
localClassNames,
1516
newChildren,
16-
newProps,
17-
appendClassName;
17+
newProps;
1818

19-
moduleNames = element.props.moduleName;
19+
localClassNames = element.props.localClassName;
2020

21-
if (moduleNames) {
22-
moduleNames = moduleNames.split(' ');
21+
if (localClassNames) {
22+
localClassNames = localClassNames.split(' ');
2323

24-
if (options.allowMultiple === false && moduleNames.length > 1) {
25-
throw new Error(`ReactElement moduleName property defines multiple module names ("${element.props.moduleName}").`);
24+
if (options.allowMultiple === false && localClassNames.length > 1) {
25+
throw new Error(`ReactElement localClassName property defines multiple module names ("${element.props.localClassName}").`);
2626
}
2727

28-
appendClassName = moduleNames.map((moduleName) => {
29-
if (styles[moduleName]) {
30-
return styles[moduleName];
28+
appendClassName = localClassNames.map((localClassName) => {
29+
if (styles[localClassName]) {
30+
return styles[localClassName];
3131
} else {
3232
if (options.errorWhenNotFound === true) {
33-
throw new Error(`"${moduleName}" CSS module is undefined.`);
33+
throw new Error(`"${localClassName}" CSS module is undefined.`);
3434
}
3535

3636
return '';
@@ -65,7 +65,7 @@ linkClass = (element, styles = {}, options = {}) => {
6565

6666
if (appendClassName) {
6767
if (element.props.className) {
68-
appendClassName = element.props.className + ' ' + appendClassName;
68+
appendClassName = `${element.props.className} ${appendClassName}`;
6969
}
7070

7171
newProps = {

‎test/linkClass.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import jsdom from 'jsdom';
88
import linkClass from './../dist/linkClass';
99

1010
describe('linkClass', () => {
11-
context('when ReactElement does not define moduleName', () => {
11+
context('when ReactElement does not define localClassName', () => {
1212
it('does not affect element properties', () => {
1313
expect(linkClass(<div></div>)).to.deep.equal(<div></div>);
1414
});
@@ -33,12 +33,12 @@ describe('linkClass', () => {
3333
});
3434
});
3535

36-
context('when moduleName matches an existing CSS module', () => {
36+
context('when localClassName matches an existing CSS module', () => {
3737
context('when ReactElement does not have an existing className', () => {
3838
it('uses the generated class name to set the className property', () => {
3939
let subject;
4040

41-
subject = <div moduleName='foo'></div>;
41+
subject = <div localClassName='foo'></div>;
4242

4343
subject = linkClass(subject, {
4444
foo: 'foo-1'
@@ -51,7 +51,7 @@ describe('linkClass', () => {
5151
it('appends the generated class name to the className property', () => {
5252
let subject;
5353

54-
subject = <div className='foo' moduleName='bar'></div>;
54+
subject = <div className='foo' localClassName='bar'></div>;
5555

5656
subject = linkClass(subject, {
5757
bar: 'bar-1'
@@ -67,15 +67,15 @@ describe('linkClass', () => {
6767
context('when false', () => {
6868
it('throws an error', () => {
6969
expect(() => {
70-
linkClass(<div moduleName='foo bar'></div>, {}, {allowMultiple: false});
71-
}).to.throw(Error, 'ReactElement moduleName property defines multiple module names ("foo bar").');
70+
linkClass(<div localClassName='foo bar'></div>, {}, {allowMultiple: false});
71+
}).to.throw(Error, 'ReactElement localClassName property defines multiple module names ("foo bar").');
7272
});
7373
});
7474
context('when true', () => {
7575
it('appends a generated class name for every referenced CSS module', () => {
7676
let subject;
7777

78-
subject = <div moduleName='foo bar'></div>;
78+
subject = <div localClassName='foo bar'></div>;
7979

8080
subject = linkClass(subject, {
8181
foo: 'foo-1',
@@ -89,12 +89,12 @@ describe('linkClass', () => {
8989
});
9090

9191
describe('options.errorWhenNotFound', () => {
92-
context('when moduleName does not match an existing CSS module', () => {
92+
context('when localClassName does not match an existing CSS module', () => {
9393
context('when false', () => {
9494
it('ignores the missing CSS module', () => {
9595
let subject;
9696

97-
subject = <div moduleName='foo'></div>;
97+
subject = <div localClassName='foo'></div>;
9898

9999
subject = linkClass(subject, {}, {errorWhenNotFound: false});
100100

@@ -104,7 +104,7 @@ describe('linkClass', () => {
104104
context('when is true', () => {
105105
it('throws an error', () => {
106106
expect(() => {
107-
linkClass(<div moduleName='foo'></div>, {}, {errorWhenNotFound: true});
107+
linkClass(<div localClassName='foo'></div>, {}, {errorWhenNotFound: true});
108108
}).to.throw(Error, '"foo" CSS module is undefined.');
109109
});
110110
});
@@ -130,11 +130,11 @@ describe('linkClass', () => {
130130

131131
Foo = class extends React.Component {
132132
render () {
133-
return <div moduleName='foo'>Hello</div>;
133+
return <div localClassName='foo'>Hello</div>;
134134
}
135135
};
136136

137-
nodeList = TestUtils.renderIntoDocument(linkClass(<div moduleName='foo'><Foo /></div>, {foo: 'foo-1'}));
137+
nodeList = TestUtils.renderIntoDocument(linkClass(<div localClassName='foo'><Foo /></div>, {foo: 'foo-1'}));
138138
});
139139
it('processes ReactElement nodes', () => {
140140
expect(nodeList.className).to.equal('foo-1');

0 commit comments

Comments
 (0)