implement warningWhenNotFound option

README.md

@@ -38,6 +38,7 @@ React CSS Modules implement automatic mapping of CSS modules. Every CSS class is
     - [Options](#options)
         - [`allowMultiple`](#allowmultiple)
         - [`errorWhenNotFound`](#errorwhennotfound)
+        - [`warningWhenNotFound`](#warningwhennotfound)
 - [SASS, SCSS, LESS and other CSS Preprocessors](#sass-scss-less-and-other-css-preprocessors)
     - [Enable Sourcemaps](#enable-sourcemaps)
 - [Class Composition](#class-composition)
@@ -409,6 +410,7 @@ export default CSSModules(CustomList, styles);
  * @see {@link https://github.com/gajus/react-css-modules#options}
  * @property {Boolean} allowMultiple
  * @property {Boolean} errorWhenNotFound
+ * @property {Boolean} warningWhenNotFound
  */
 
 /**
@@ -498,6 +500,12 @@ Default: `true`.
 
 Throws an error when `styleName` cannot be mapped to an existing CSS Module.
 
+#### `warningWhenNotFound`
+
+Default: `false`.
+
+Outputs a warning when `styleName` cannot be mapped to an existing CSS Module.
+
 ## SASS, SCSS, LESS and other CSS Preprocessors
 
 [Interoperable CSS](https://github.com/css-modules/icss) is compatible with the CSS preprocessors. To use a preprocessor, all you need to do is add the preprocessor to the chain of loaders, e.g. in the case of webpack it is as simple as installing `sass-loader` and adding `!sass` to the end of the `style-loader` loader query (loaders are processed from right to left):

package.json

@@ -34,6 +34,7 @@
     "babel-preset-stage-0": "^6.16.0",
     "babel-register": "^6.18.0",
     "chai": "^4.0.0-canary.1",
+    "chai-spies": "^0.7.1",
     "eslint": "^3.10.0",
     "eslint-config-canonical": "^5.5.0",
     "husky": "^0.11.9",

src/generateAppendClassName.js

@@ -4,7 +4,7 @@ const CustomMap = typeof Map === 'undefined' ? SimpleMap : Map;
 
 const stylesIndex = new CustomMap();
 
-export default (styles, styleNames: Array<string>, errorWhenNotFound: boolean): string => {
+export default (styles, styleNames: Array<string>, errorWhenNotFound: boolean, warningWhenNotFound: boolean): string => {
   let appendClassName;
   let stylesIndexMap;
 
@@ -29,8 +29,14 @@ export default (styles, styleNames: Array<string>, errorWhenNotFound: boolean):
 
       if (className) {
         appendClassName += ' ' + className;
-      } else if (errorWhenNotFound === true) {
-        throw new Error('"' + styleNames[styleName] + '" CSS module is undefined.');
+      } else {
+        if (errorWhenNotFound === true) {
+          throw new Error('"' + styleNames[styleName] + '" CSS module is undefined.');
+        }
+        if (warningWhenNotFound === true) {
+          // eslint-disable-next-line no-console
+          console.warn('"' + styleNames[styleName] + '" CSS module is undefined.');
+        }
       }
     }
   }

src/linkClass.js

@@ -68,7 +68,7 @@ const linkElement = (element: ReactElement, styles: Object, configuration: Objec
   });
 
   if (styleNames.length) {
-    appendClassName = generateAppendClassName(styles, styleNames, configuration.errorWhenNotFound);
+    appendClassName = generateAppendClassName(styles, styleNames, configuration.errorWhenNotFound, configuration.warningWhenNotFound);
 
     if (appendClassName) {
       if (elementShallowCopy.props.className) {

src/makeConfiguration.js

@@ -5,6 +5,7 @@ import _ from 'lodash';
  * @see {@link https://github.com/gajus/react-css-modules#options}
  * @property {boolean} allowMultiple
  * @property {boolean} errorWhenNotFound
+ * @property {boolean} warningWhenNotFound
  */
 
 /**
@@ -14,7 +15,8 @@ import _ from 'lodash';
 export default (userConfiguration = {}) => {
   const configuration = {
     allowMultiple: false,
-    errorWhenNotFound: true
+    errorWhenNotFound: true,
+    warningWhenNotFound: false
   };
 
   _.forEach(userConfiguration, (value, name) => {

tests/linkClass.js

@@ -1,13 +1,16 @@
-/* eslint-disable max-nested-callbacks, react/prefer-stateless-function, class-methods-use-this */
+/* eslint-disable max-nested-callbacks, react/prefer-stateless-function, class-methods-use-this, no-console */
 
-import {
+import chai, {
     expect
 } from 'chai';
+import spies from 'chai-spies';
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 import jsdom from 'jsdom';
 import linkClass from './../src/linkClass';
 
+chai.use(spies);
+
 describe('linkClass', () => {
   context('ReactElement does not define styleName', () => {
     it('does not affect element properties', () => {
@@ -287,6 +290,32 @@ describe('linkClass', () => {
     });
   });
 
+  describe('options.warningWhenNotFound', () => {
+    context('when styleName does not match an existing CSS module', () => {
+      const warnSpy = chai.spy(() => {});
+
+      console.warn = warnSpy;
+      context('when false', () => {
+        it('does not throw a warning when there\'s a missing CSS module', () => {
+          let subject;
+
+          subject = <div styleName='foo' />;
+
+          subject = linkClass(subject, {}, {warningWhenNotFound: false});
+
+          expect(subject.props.className).to.be.an('undefined');
+          expect(warnSpy).to.not.have.been.called();
+        });
+      });
+      context('when is true', () => {
+        it('throws a warning', () => {
+          linkClass(<div styleName='foo' />, {}, {warningWhenNotFound: true});
+          expect(warnSpy).to.have.been.called();
+        });
+      });
+    });
+  });
+
   context('when ReactElement includes ReactComponent', () => {
     let Foo;
     let nodeList;

tests/makeConfiguration.js

@@ -22,6 +22,11 @@ describe('makeConfiguration', () => {
         expect(configuration.errorWhenNotFound).to.equal(true);
       });
     });
+    describe('warningWhenNotFound property', () => {
+      it('defaults to false', () => {
+        expect(configuration.warningWhenNotFound).to.equal(false);
+      });
+    });
   });
   describe('when unknown property is provided', () => {
     it('throws an error', () => {