fix: handle spread (#243)

* fix: handle spread

* test: handle spread

* test: add test case for spread

* spread: remove keys exclusion, avoid falsy values

* refactor: handle spread separated in another file

Author: AlbertLucianto

src/createSpreadMapper.js

@@ -0,0 +1,73 @@
+// @flow
+
+import {
+  Expression,
+  memberExpression,
+  binaryExpression,
+  stringLiteral,
+  logicalExpression,
+  identifier
+} from '@babel/types';
+import optionsDefaults from './schemas/optionsDefaults';
+
+const createSpreadMapper = (path: *, stats: *): { [destinationName: string]: Expression } => {
+  const result = {};
+
+  let {attributeNames} = optionsDefaults;
+
+  if (stats.opts && stats.opts.attributeNames) {
+    attributeNames = Object.assign({}, attributeNames, stats.opts.attributeNames);
+  }
+
+  const attributes = Object
+    .entries(attributeNames)
+    .filter((pair) => {
+      return pair[1];
+    });
+
+  const attributeKeys = attributes.map((pair) => {
+    return pair[0];
+  });
+
+  path.traverse({
+    JSXSpreadAttribute (spreadPath: *) {
+      const spread = spreadPath.node;
+
+      for (const attributeKey of attributeKeys) {
+        const destinationName = attributeNames[attributeKey];
+
+        if (result[destinationName]) {
+          result[destinationName] = binaryExpression(
+            '+',
+            result[destinationName],
+            binaryExpression(
+              '+',
+              stringLiteral(' '),
+              logicalExpression(
+                '||',
+                memberExpression(
+                  spread.argument,
+                  identifier(destinationName),
+                ),
+                stringLiteral('')
+              )
+            ),
+          );
+        } else {
+          result[destinationName] = logicalExpression(
+            '||',
+            memberExpression(
+              spread.argument,
+              identifier(destinationName),
+            ),
+            stringLiteral('')
+          );
+        }
+      }
+    }
+  });
+
+  return result;
+};
+
+export default createSpreadMapper;

src/handleSpreadClassName.js

@@ -0,0 +1,53 @@
+// @flow
+
+import {
+  Expression,
+  isStringLiteral,
+  isJSXExpressionContainer,
+  jsxExpressionContainer,
+  binaryExpression,
+  stringLiteral
+} from '@babel/types';
+
+const handleSpreadClassName = (
+  path: *,
+  destinationName: string,
+  classNamesFromSpread: Expression
+) => {
+  const destinationAttribute = path.node.openingElement.attributes
+    .find((attribute) => {
+      return typeof attribute.name !== 'undefined' && attribute.name.name === destinationName;
+    });
+
+  if (!destinationAttribute) {
+    return;
+  }
+
+  if (isStringLiteral(destinationAttribute.value)) {
+    destinationAttribute.value = jsxExpressionContainer(
+      binaryExpression(
+        '+',
+        destinationAttribute.value,
+        binaryExpression(
+          '+',
+          stringLiteral(' '),
+          classNamesFromSpread,
+        )
+      )
+    );
+  } else if (isJSXExpressionContainer(destinationAttribute.value)) {
+    destinationAttribute.value = jsxExpressionContainer(
+      binaryExpression(
+        '+',
+        destinationAttribute.value.expression,
+        binaryExpression(
+          '+',
+          stringLiteral(' '),
+          classNamesFromSpread
+        )
+      )
+    );
+  }
+};
+
+export default handleSpreadClassName;

src/index.js

@@ -15,6 +15,8 @@ import requireCssModule from './requireCssModule';
 import resolveStringLiteral from './resolveStringLiteral';
 import replaceJsxExpressionContainer from './replaceJsxExpressionContainer';
 import attributeNameExists from './attributeNameExists';
+import createSpreadMapper from './createSpreadMapper';
+import handleSpreadClassName from './handleSpreadClassName';
 
 const ajv = new Ajv({
   // eslint-disable-next-line id-match
@@ -216,6 +218,8 @@ export default ({
           autoResolveMultipleImports = optionsDefaults.autoResolveMultipleImports
         } = stats.opts || {};
 
+        const spreadMap = createSpreadMapper(path, stats);
+
         for (const attribute of attributes) {
           const destinationName = attributeNames[attribute.name.name];
 
@@ -246,6 +250,14 @@ export default ({
               options
             );
           }
+
+          if (spreadMap[destinationName]) {
+            handleSpreadClassName(
+              path,
+              destinationName,
+              spreadMap[destinationName]
+            );
+          }
         }
       },
       Program (path: *, stats: *): void {

test/fixtures/react-css-modules/does not throw error if attribute has no name property/output.js

@@ -5,4 +5,4 @@ require("./bar.css");
 const props = {
   foo: 'bar'
 };
-<div className="bar__a" {...props}></div>;
+<div className={"bar__a" + (" " + (props.className || ""))} {...props}></div>;

test/fixtures/react-css-modules/handle spread attributes/foo.css

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

test/fixtures/react-css-modules/handle spread attributes/input.js

@@ -0,0 +1,22 @@
+import './foo.css';
+
+const rest = {};
+
+<div {...rest} styleName="a" className="b"></div>;
+
+<div {...rest} styleName="a"></div>;
+
+<div {...rest} activeClassName={this.props.activeClassName} activeStyleName="a" styleName="a"></div>;
+
+<div {...rest} activeStyleName="a" activeClassName="b"></div>;
+
+// Should be okay if rest is put on last
+<div styleName="a" {...rest}></div>;
+
+const rest2 = {};
+
+<div {...rest} {...rest2} styleName="a"></div>;
+
+// Should not do anything
+<div {...rest} {...rest2}></div>;
+<div {...rest} {...rest2} className="b"></div>;

test/fixtures/react-css-modules/handle spread attributes/options.json

@@ -0,0 +1,13 @@
+{
+  "plugins": [
+    [
+      "../../../../src",
+      {
+        "generateScopedName": "[name]__[local]",
+        "attributeNames": {
+          "activeStyleName": "activeClassName"
+        }
+      }
+    ]
+  ]
+}

test/fixtures/react-css-modules/handle spread attributes/output.js

@@ -0,0 +1,16 @@
+"use strict";
+
+require("./foo.css");
+
+const rest = {};
+<div {...rest} className={"b foo__a" + (" " + (rest.className || ""))}></div>;
+<div {...rest} className={"foo__a" + (" " + (rest.className || ""))}></div>;
+<div {...rest} activeClassName={((void 0).props.activeClassName ? (void 0).props.activeClassName + " " : "") + "foo__a" + (" " + (rest.activeClassName || ""))} className={"foo__a" + (" " + (rest.className || ""))}></div>;
+<div {...rest} activeClassName={"b foo__a" + (" " + (rest.activeClassName || ""))}></div>; // Should be okay if rest is put on last
+
+<div className={"foo__a" + (" " + (rest.className || ""))} {...rest}></div>;
+const rest2 = {};
+<div {...rest} {...rest2} className={"foo__a" + (" " + ((rest.className || "") + (" " + (rest2.className || ""))))}></div>; // Should not do anything
+
+<div {...rest} {...rest2}></div>;
+<div {...rest} {...rest2} className="b"></div>;