feat: add handleMissingStyleName option (#112)

* Add .eslintignore for test fixtures

The double quotes that the plugin adds go against the linting 
config of the project, and editors that auto-fix linting rules
will try to convert quotes in `expected.js` files to single quotes,
causing tests to fail.  It seems safest to ignore all fixture files
from linting.

* Allow createObjectExpression to take a boolean

* Allow getClassName to take an options argument

The only option is to silence styleName errors, for example in production.
If `silenceStyleNameErrors` is true, the styleNames which cannot be
found will simply be removed from the resulting classNames, matching
the behavior of `react-css-modules`.

This commit alone will not result in a change in behavior, the next
steps will be to pass in the option from the babel-plugin.

* Add `silenceStyleNameErrors` to options schema

* Pass silenceStyleNameErrors to getClassName

This hooks up the options set by the user into getClassName, so that it
has an effect.  However, getClassName can also be used at runtime,
which this commit does not address.

* Provide silenceStyleNameErrors at runtime

This commit adds the options object for getClassName iif silenceStyleNameErrors
is true.  By not always including the options object, it helps to save 
a few characters in the generated code.

* Restructure Configuration docs

Seeing the flow types first thing in the Configuration section was
confusing to new users, so this adds a brief example of how to set
babel plugin options, and moves the flow types underneath the table
of options.

* Add silenceStyleNameErrors to README

* Loosen InputObjectType

Flow was already not happy with using `InputObjectType` within its own
definition, and was converting it to `{[key: string]: string | any}`
when I inspected it in Nuclide.  

I’m honestly not sure how to specify a union type on an indexer as was
being attempted, because flow complains as soon as you try to provide
an object that has a property with a typed value.

* Allow more options to handle missing styleNames

This changes the option from a boolean “silenceStyleNameErrors” to an
enum “handleMissingStyleName” option, with possible values of “throw”
(default), “warn”, and “ignore”.

Author: IanVS

.eslintignore

@@ -0,0 +1 @@
+/test/fixtures

.gitignore

@@ -6,6 +6,7 @@ node_modules
 !.babelrc
 !.editorconfig
 !.eslintrc
+!.eslintignore
 !.flowconfig
 !.gitignore
 !.npmignore

README.md

@@ -170,22 +170,21 @@ NODE_ENV=production ./test
 
 ## Configuration
 
-```js
-type FiletypeOptionsType = {|
-  +syntax: string,
-  +plugins?: $ReadOnlyArray<string>
-|};
-
-type FiletypesConfigurationType = {
-  [key: string]: FiletypeOptionsType
-};
-
-type GenerateScopedNameType = (localName: string, resourcePath: string) => string;
-
-type GenerateScopedNameConfigurationType = GenerateScopedNameType | string;
+Configure the options for the plugin within your `.babelrc` as follows:
+
+```json
+{
+  "plugins": [
+    ["react-css-modules", {
+      "option": "value"
+    }]
+  ]
+}
 
 ```
 
+### Options
+
 |Name|Type|Description|Default|
 |---|---|---|---|
 |`context`|`string`|Must match webpack [`context`](https://webpack.github.io/docs/configuration.html#context) configuration. [`css-loader`](https://github.com/webpack/css-loader) inherits `context` values from webpack. Other CSS module implementations might use different context resolution logic.|`process.cwd()`|
@@ -194,12 +193,31 @@ type GenerateScopedNameConfigurationType = GenerateScopedNameType | string;
 |`generateScopedName`|`?GenerateScopedNameConfigurationType`|Refer to [Generating scoped names](https://github.com/css-modules/postcss-modules#generating-scoped-names)|`[path]___[name]__[local]___[hash:base64:5]`|
 |`removeImport`|`boolean`|Remove the matching style import. This option is used to enable server-side rendering.|`false`|
 |`webpackHotModuleReloading`|`boolean`|Enables hot reloading of CSS in webpack|`false`|
+|`handleMissingStyleName`|`"throw"`, `"warn"`, `"ignore"`|Determines what should be done for undefined CSS modules (using a `styleName` for which there is no CSS module defined).  Setting this option to `"ignore"` is equivalent to setting `errorWhenNotFound: false` in [react-css-modules](https://github.com/gajus/react-css-modules#errorwhennotfound). |`"throw"`|
 
 Missing a configuration? [Raise an issue](https://github.com/gajus/babel-plugin-react-css-modules/issues/new?title=New%20configuration:).
 
 > Note:
 > The default configuration should work out of the box with the [css-loader](https://github.com/webpack/css-loader).
 
+#### Option types (flow)
+
+```js
+type FiletypeOptionsType = {|
+  +syntax: string,
+  +plugins?: $ReadOnlyArray<string>
+|};
+
+type FiletypesConfigurationType = {
+  [key: string]: FiletypeOptionsType
+};
+
+type GenerateScopedNameType = (localName: string, resourcePath: string) => string;
+
+type GenerateScopedNameConfigurationType = GenerateScopedNameType | string;
+
+```
+
 ### Configurate syntax loaders
 
 To add support for different CSS syntaxes (e.g. SCSS), perform the following two steps:

src/createObjectExpression.js

@@ -5,7 +5,7 @@ import BabelTypes, {
 } from 'babel-types';
 
 type InputObjectType = {
-  [key: string]: string | InputObjectType
+  [key: string]: *
 };
 
 /**
@@ -26,6 +26,8 @@ const createObjectExpression = (t: BabelTypes, object: InputObjectType): ObjectE
       newValue = t.stringLiteral(value);
     } else if (typeof value === 'object') {
       newValue = createObjectExpression(t, value);
+    } else if (typeof value === 'boolean') {
+      newValue = t.booleanLiteral(value);
     } else {
       throw new Error('Unexpected type.');
     }

src/getClassName.js

@@ -2,37 +2,69 @@
 
 import type {
   StyleModuleMapType,
-  StyleModuleImportMapType
+  StyleModuleImportMapType,
+  HandleMissingStyleNameOptionType
 } from './types';
+import optionsDefaults from './schemas/optionsDefaults';
 
 const isNamespacedStyleName = (styleName: string): boolean => {
   return styleName.indexOf('.') !== -1;
 };
 
-const getClassNameForNamespacedStyleName = (styleName: string, styleModuleImportMap: StyleModuleImportMapType): string => {
+const getClassNameForNamespacedStyleName = (
+  styleName: string,
+  styleModuleImportMap: StyleModuleImportMapType,
+  handleMissingStyleNameOption?: HandleMissingStyleNameOptionType
+): ?string => {
   // Note:
   // Do not use the desctructing syntax with Babel.
   // Desctructing adds _slicedToArray helper.
   const styleNameParts = styleName.split('.');
   const importName = styleNameParts[0];
   const moduleName = styleNameParts[1];
+  const handleMissingStyleName = handleMissingStyleNameOption || optionsDefaults.handleMissingStyleName;
 
   if (!moduleName) {
-    throw new Error('Invalid style name.');
+    if (handleMissingStyleName === 'throw') {
+      throw new Error('Invalid style name.');
+    } else if (handleMissingStyleName === 'warn') {
+      // eslint-disable-next-line no-console
+      console.warn('Invalid style name.');
+    } else {
+      return null;
+    }
   }
 
   if (!styleModuleImportMap[importName]) {
-    throw new Error('CSS module import does not exist.');
+    if (handleMissingStyleName === 'throw') {
+      throw new Error('CSS module import does not exist.');
+    } else if (handleMissingStyleName === 'warn') {
+      // eslint-disable-next-line no-console
+      console.warn('CSS module import does not exist.');
+    } else {
+      return null;
+    }
   }
 
   if (!styleModuleImportMap[importName][moduleName]) {
-    throw new Error('CSS module does not exist.');
+    if (handleMissingStyleName === 'throw') {
+      throw new Error('CSS module does not exist.');
+    } else if (handleMissingStyleName === 'warn') {
+      // eslint-disable-next-line no-console
+      console.warn('CSS module does not exist.');
+    } else {
+      return null;
+    }
   }
 
   return styleModuleImportMap[importName][moduleName];
 };
 
-export default (styleNameValue: string, styleModuleImportMap: StyleModuleImportMapType): string => {
+type OptionsType = {|
+  handleMissingStyleName: HandleMissingStyleNameOptionType
+|};
+
+export default (styleNameValue: string, styleModuleImportMap: StyleModuleImportMapType, options: OptionsType): string => {
   const styleModuleImportMapKeys = Object.keys(styleModuleImportMap);
 
   return styleNameValue
@@ -42,7 +74,7 @@ export default (styleNameValue: string, styleModuleImportMap: StyleModuleImportM
     })
     .map((styleName) => {
       if (isNamespacedStyleName(styleName)) {
-        return getClassNameForNamespacedStyleName(styleName, styleModuleImportMap);
+        return getClassNameForNamespacedStyleName(styleName, styleModuleImportMap, options.handleMissingStyleName);
       }
 
       if (styleModuleImportMapKeys.length === 0) {
@@ -56,10 +88,20 @@ export default (styleNameValue: string, styleModuleImportMap: StyleModuleImportM
       const styleModuleMap: StyleModuleMapType = styleModuleImportMap[styleModuleImportMapKeys[0]];
 
       if (!styleModuleMap[styleName]) {
-        throw new Error('Could not resolve the styleName \'' + styleName + '\'.');
+        if (options.handleMissingStyleName === 'throw') {
+          throw new Error('Could not resolve the styleName \'' + styleName + '\'.');
+        }
+        if (options.handleMissingStyleName === 'warn') {
+          // eslint-disable-next-line no-console
+          console.warn('Could not resolve the styleName \'' + styleName + '\'.');
+        }
       }
 
       return styleModuleMap[styleName];
     })
+    .filter((className) => {
+      // Remove any styles which could not be found (if handleMissingStyleName === 'ignore')
+      return className;
+    })
     .join(' ');
 };

src/index.js

@@ -9,6 +9,7 @@ import BabelTypes from 'babel-types';
 import ajvKeywords from 'ajv-keywords';
 import Ajv from 'ajv';
 import optionsSchema from './schemas/optionsSchema.json';
+import optionsDefaults from './schemas/optionsDefaults';
 import createObjectExpression from './createObjectExpression';
 import requireCssModule from './requireCssModule';
 import resolveStringLiteral from './resolveStringLiteral';
@@ -190,7 +191,8 @@ export default ({
           resolveStringLiteral(
             path,
             filenameMap[filename].styleModuleImportMap,
-            styleNameAttribute
+            styleNameAttribute,
+            {handleMissingStyleName: stats.opts.handleMissingStyleName || optionsDefaults.handleMissingStyleName}
           );
 
           return;
@@ -205,7 +207,8 @@ export default ({
             path,
             styleNameAttribute,
             filenameMap[filename].importedHelperIndentifier,
-            filenameMap[filename].styleModuleImportMapIdentifier
+            filenameMap[filename].styleModuleImportMapIdentifier,
+            {handleMissingStyleName: stats.opts.handleMissingStyleName || optionsDefaults.handleMissingStyleName}
           );
         }
       },

src/replaceJsxExpressionContainer.js

@@ -9,15 +9,25 @@ import BabelTypes, {
   jSXExpressionContainer,
   jSXIdentifier
 } from 'babel-types';
+import type {
+  HandleMissingStyleNameOptionType
+} from './types';
 import conditionalClassMerge from './conditionalClassMerge';
+import createObjectExpression from './createObjectExpression';
+import optionsDefaults from './schemas/optionsDefaults';
+
+type OptionsType = {|
+  handleMissingStyleName: HandleMissingStyleNameOptionType
+|};
 
 export default (
   t: BabelTypes,
   // eslint-disable-next-line flowtype/no-weak-types
   path: Object,
   styleNameAttribute: JSXAttribute,
   importedHelperIndentifier: Identifier,
-  styleModuleImportMapIdentifier: Identifier
+  styleModuleImportMapIdentifier: Identifier,
+  options: OptionsType
 ): void => {
   const expressionContainerValue = styleNameAttribute.value;
   const classNameAttribute = path.node.openingElement.attributes
@@ -31,12 +41,20 @@ export default (
 
   path.node.openingElement.attributes.splice(path.node.openingElement.attributes.indexOf(styleNameAttribute), 1);
 
+  const args = [
+    expressionContainerValue.expression,
+    styleModuleImportMapIdentifier
+  ];
+
+  // Only provide options argument if the options are something other than default
+  // This helps save a few bits in the generated user code
+  if (options.handleMissingStyleName !== optionsDefaults.handleMissingStyleName) {
+    args.push(createObjectExpression(t, options));
+  }
+
   const styleNameExpression = t.callExpression(
     importedHelperIndentifier,
-    [
-      expressionContainerValue.expression,
-      styleModuleImportMapIdentifier
-    ]
+    args
   );
 
   if (classNameAttribute) {

src/resolveStringLiteral.js

@@ -9,19 +9,24 @@ import {
 import conditionalClassMerge from './conditionalClassMerge';
 import getClassName from './getClassName';
 import type {
-  StyleModuleImportMapType
+  StyleModuleImportMapType,
+  HandleMissingStyleNameOptionType
 } from './types';
 
+type OptionsType = {|
+  handleMissingStyleName: HandleMissingStyleNameOptionType
+|};
+
 /**
  * Updates the className value of a JSX element using a provided styleName attribute.
  */
-export default (path: *, styleModuleImportMap: StyleModuleImportMapType, styleNameAttribute: JSXAttribute): void => {
+export default (path: *, styleModuleImportMap: StyleModuleImportMapType, styleNameAttribute: JSXAttribute, options: OptionsType): void => {
   const classNameAttribute = path.node.openingElement.attributes
     .find((attribute) => {
       return typeof attribute.name !== 'undefined' && attribute.name.name === 'className';
     });
 
-  const resolvedStyleName = getClassName(styleNameAttribute.value.value, styleModuleImportMap);
+  const resolvedStyleName = getClassName(styleNameAttribute.value.value, styleModuleImportMap, options);
 
   if (classNameAttribute) {
     if (isStringLiteral(classNameAttribute.value)) {

src/schemas/optionsDefaults.js

@@ -0,0 +1,5 @@
+const optionsDefaults = {
+  handleMissingStyleName: 'throw'
+};
+
+export default optionsDefaults;

src/schemas/optionsSchema.json

@@ -43,6 +43,9 @@
     },
     "webpackHotModuleReloading": {
       "type": "boolean"
+    },
+    "handleMissingStyleName": {
+      "enum": ["throw", "warn", "ignore"]
     }
   },
   "type": "object"

src/types.js

@@ -11,3 +11,5 @@ export type StyleModuleImportMapType = {
 export type GenerateScopedNameType = (localName: string, resourcePath: string) => string;
 
 export type GenerateScopedNameConfigurationType = GenerateScopedNameType | string;
+
+export type HandleMissingStyleNameOptionType = 'throw' | 'warn' | 'ignore';

test/fixtures/react-css-modules/does not throw error for stylename not found when handleMissingStyleName is warn/actual.js

@@ -0,0 +1,3 @@
+import "./foo.css";
+
+<div styleName="a not-found" />;

test/fixtures/react-css-modules/does not throw error for stylename not found when handleMissingStyleName is warn/expected.js

@@ -0,0 +1,3 @@
+import "./foo.css";
+
+<div className="foo__a" />;

test/fixtures/react-css-modules/does not throw error for stylename not found when handleMissingStyleName is warn/foo.css

@@ -0,0 +1 @@
+.a {}

test/fixtures/react-css-modules/does not throw error for stylename not found when handleMissingStyleName is warn/options.json

@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    [
+      "../../../../src",
+      {
+        "generateScopedName": "[name]__[local]",
+        "handleMissingStyleName": "ignore"
+      }
+    ]
+  ]
+}

test/fixtures/react-css-modules/provides handleMissingStyleName to getClassName at runtime/actual.js

@@ -0,0 +1,5 @@
+import './foo.css';
+
+const styleNameFoo = 'a-c';
+
+<div styleName={styleNameFoo}></div>;

test/fixtures/react-css-modules/provides handleMissingStyleName to getClassName at runtime/expected.js

@@ -0,0 +1,13 @@
+import _getClassName from 'babel-plugin-react-css-modules/dist/browser/getClassName';
+import './foo.css';
+
+const _styleModuleImportMap = {
+  './foo.css': {
+    'a-b': 'foo__a-b'
+  }
+};
+const styleNameFoo = 'a-c';
+
+<div className={_getClassName(styleNameFoo, _styleModuleImportMap, {
+  'handleMissingStyleName': 'ignore'
+})}></div>;

test/fixtures/react-css-modules/provides handleMissingStyleName to getClassName at runtime/foo.css

@@ -0,0 +1 @@
+.a-b {}

test/fixtures/react-css-modules/provides handleMissingStyleName to getClassName at runtime/options.json

@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    [
+      "../../../../src",
+      {
+        "generateScopedName": "[name]__[local]",
+        "handleMissingStyleName": "ignore"
+      }
+    ]
+  ]
+}