From 644d8adcc74eb97a6e9f882f15c94daf4b111a97 Mon Sep 17 00:00:00 2001 From: Pablo Chiappetti Date: Tue, 25 Jul 2017 11:59:42 -0300 Subject: [PATCH] implement warningWhenNotFound option --- README.md | 8 ++++++++ package.json | 1 + src/generateAppendClassName.js | 12 +++++++++--- src/linkClass.js | 2 +- src/makeConfiguration.js | 4 +++- tests/linkClass.js | 33 +++++++++++++++++++++++++++++++-- tests/makeConfiguration.js | 5 +++++ 7 files changed, 58 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 4721800..8b2b3a5 100644 --- a/README.md +++ b/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): diff --git a/package.json b/package.json index 3253cc6..e276aa4 100644 --- a/package.json +++ b/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", diff --git a/src/generateAppendClassName.js b/src/generateAppendClassName.js index 9479698..3304955 100644 --- a/src/generateAppendClassName.js +++ b/src/generateAppendClassName.js @@ -4,7 +4,7 @@ const CustomMap = typeof Map === 'undefined' ? SimpleMap : Map; const stylesIndex = new CustomMap(); -export default (styles, styleNames: Array, errorWhenNotFound: boolean): string => { +export default (styles, styleNames: Array, errorWhenNotFound: boolean, warningWhenNotFound: boolean): string => { let appendClassName; let stylesIndexMap; @@ -29,8 +29,14 @@ export default (styles, styleNames: Array, 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.'); + } } } } diff --git a/src/linkClass.js b/src/linkClass.js index 1a05878..cf83859 100644 --- a/src/linkClass.js +++ b/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) { diff --git a/src/makeConfiguration.js b/src/makeConfiguration.js index 0eae15f..23b4dd6 100644 --- a/src/makeConfiguration.js +++ b/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) => { diff --git a/tests/linkClass.js b/tests/linkClass.js index 0475563..f8cb6ac 100644 --- a/tests/linkClass.js +++ b/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 =
; + + 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(
, {}, {warningWhenNotFound: true}); + expect(warnSpy).to.have.been.called(); + }); + }); + }); + }); + context('when ReactElement includes ReactComponent', () => { let Foo; let nodeList; diff --git a/tests/makeConfiguration.js b/tests/makeConfiguration.js index 94129fc..467d32d 100644 --- a/tests/makeConfiguration.js +++ b/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', () => {