V3. Reading Christopher Chedeau presentation on CSS in JS made me rethik my decision of using localClassName convention. styleName it is.

Author: gajus

dist/linkClass.js

@@ -25,25 +25,25 @@ linkClass = function (element) {
     var appendClassName = undefined,
         childrenCount = undefined,
         clonedElement = undefined,
-        localClassNames = undefined,
+        styleNames = undefined,
         newChildren = undefined,
         newProps = undefined;
 
-    localClassNames = element.props.localClassName;
+    styleNames = element.props.styleName;
 
-    if (localClassNames) {
-        localClassNames = localClassNames.split(' ');
+    if (styleNames) {
+        styleNames = styleNames.split(' ');
 
-        if (options.allowMultiple === false && localClassNames.length > 1) {
-            throw new Error('ReactElement localClassName property defines multiple module names ("' + element.props.localClassName + '").');
+        if (options.allowMultiple === false && styleNames.length > 1) {
+            throw new Error('ReactElement styleName property defines multiple module names ("' + element.props.styleName + '").');
         }
 
-        appendClassName = localClassNames.map(function (localClassName) {
-            if (styles[localClassName]) {
-                return styles[localClassName];
+        appendClassName = styleNames.map(function (styleName) {
+            if (styles[styleName]) {
+                return styles[styleName];
             } else {
                 if (options.errorWhenNotFound === true) {
-                    throw new Error('"' + localClassName + '" CSS module is undefined.');
+                    throw new Error('"' + styleName + '" CSS module is undefined.');
                 }
 
                 return '';

package.json

@@ -12,7 +12,7 @@
     "css",
     "modules"
   ],
-  "version": "2.0.0",
+  "version": "3.0.0",
   "author": {
     "name": "Gajus Kuizinas",
     "email": "gk@anuary.com",

src/linkClass.js

@@ -12,25 +12,25 @@ linkClass = (element, styles = {}, options = {}) => {
     let appendClassName,
         childrenCount,
         clonedElement,
-        localClassNames,
+        styleNames,
         newChildren,
         newProps;
 
-    localClassNames = element.props.localClassName;
+    styleNames = element.props.styleName;
 
-    if (localClassNames) {
-        localClassNames = localClassNames.split(' ');
+    if (styleNames) {
+        styleNames = styleNames.split(' ');
 
-        if (options.allowMultiple === false && localClassNames.length > 1) {
-            throw new Error(`ReactElement localClassName property defines multiple module names ("${element.props.localClassName}").`);
+        if (options.allowMultiple === false && styleNames.length > 1) {
+            throw new Error(`ReactElement styleName property defines multiple module names ("${element.props.styleName}").`);
         }
 
-        appendClassName = localClassNames.map((localClassName) => {
-            if (styles[localClassName]) {
-                return styles[localClassName];
+        appendClassName = styleNames.map((styleName) => {
+            if (styles[styleName]) {
+                return styles[styleName];
             } else {
                 if (options.errorWhenNotFound === true) {
-                    throw new Error(`"${localClassName}" CSS module is undefined.`);
+                    throw new Error(`"${styleName}" CSS module is undefined.`);
                 }
 
                 return '';

test/linkClass.js

@@ -8,7 +8,7 @@ import jsdom from 'jsdom';
 import linkClass from './../dist/linkClass';
 
 describe('linkClass', () => {
-    context('when ReactElement does not define localClassName', () => {
+    context('when ReactElement does not define styleName', () => {
         it('does not affect element properties', () => {
             expect(linkClass(<div></div>)).to.deep.equal(<div></div>);
         });
@@ -33,12 +33,12 @@ describe('linkClass', () => {
         });
     });
 
-    context('when localClassName matches an existing CSS module', () => {
+    context('when styleName matches an existing CSS module', () => {
         context('when ReactElement does not have an existing className', () => {
             it('uses the generated class name to set the className property', () => {
                 let subject;
 
-                subject = <div localClassName='foo'></div>;
+                subject = <div styleName='foo'></div>;
 
                 subject = linkClass(subject, {
                     foo: 'foo-1'
@@ -51,7 +51,7 @@ describe('linkClass', () => {
             it('appends the generated class name to the className property', () => {
                 let subject;
 
-                subject = <div className='foo' localClassName='bar'></div>;
+                subject = <div className='foo' styleName='bar'></div>;
 
                 subject = linkClass(subject, {
                     bar: 'bar-1'
@@ -67,15 +67,15 @@ describe('linkClass', () => {
             context('when false', () => {
                 it('throws an error', () => {
                     expect(() => {
-                        linkClass(<div localClassName='foo bar'></div>, {}, {allowMultiple: false});
-                    }).to.throw(Error, 'ReactElement localClassName property defines multiple module names ("foo bar").');
+                        linkClass(<div styleName='foo bar'></div>, {}, {allowMultiple: false});
+                    }).to.throw(Error, 'ReactElement styleName property defines multiple module names ("foo bar").');
                 });
             });
             context('when true', () => {
                 it('appends a generated class name for every referenced CSS module', () => {
                     let subject;
 
-                    subject = <div localClassName='foo bar'></div>;
+                    subject = <div styleName='foo bar'></div>;
 
                     subject = linkClass(subject, {
                         foo: 'foo-1',
@@ -89,12 +89,12 @@ describe('linkClass', () => {
     });
 
     describe('options.errorWhenNotFound', () => {
-        context('when localClassName does not match an existing CSS module', () => {
+        context('when styleName does not match an existing CSS module', () => {
             context('when false', () => {
                 it('ignores the missing CSS module', () => {
                     let subject;
 
-                    subject = <div localClassName='foo'></div>;
+                    subject = <div styleName='foo'></div>;
 
                     subject = linkClass(subject, {}, {errorWhenNotFound: false});
 
@@ -104,7 +104,7 @@ describe('linkClass', () => {
             context('when is true', () => {
                 it('throws an error', () => {
                     expect(() => {
-                        linkClass(<div localClassName='foo'></div>, {}, {errorWhenNotFound: true});
+                        linkClass(<div styleName='foo'></div>, {}, {errorWhenNotFound: true});
                     }).to.throw(Error, '"foo" CSS module is undefined.');
                 });
             });
@@ -130,11 +130,11 @@ describe('linkClass', () => {
 
             Foo = class extends React.Component {
                 render () {
-                    return <div localClassName='foo'>Hello</div>;
+                    return <div styleName='foo'>Hello</div>;
                 }
             };
 
-            nodeList = TestUtils.renderIntoDocument(linkClass(<div localClassName='foo'><Foo /></div>, {foo: 'foo-1'}));
+            nodeList = TestUtils.renderIntoDocument(linkClass(<div styleName='foo'><Foo /></div>, {foo: 'foo-1'}));
         });
         it('processes ReactElement nodes', () => {
             expect(nodeList.className).to.equal('foo-1');