added an option to change the merge order

CurtisHumphrey · CurtisHumphrey · commit 5101880ee646 · 2017-09-26T15:49:43.000-05:00
diff --git a/README.md b/README.md
@@ -193,6 +193,7 @@ Configure the options for the plugin within your `.babelrc` as follows:
 |`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`|
+|`styleNameFirst`|`boolean`|Changes the ordering of merging className with styleName|`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:).
diff --git a/src/conditionalClassMerge.js b/src/conditionalClassMerge.js
@@ -11,7 +11,24 @@ import {
 export default (
   classNameExpression: any,
   styleNameExpression: any,
+  styleNameFirst: boolean,
 ): any => {
+  if (styleNameFirst) {
+    return binaryExpression(
+      '+',
+      styleNameExpression,
+      conditionalExpression(
+        classNameExpression,
+        binaryExpression(
+          '+',
+          stringLiteral(' '),
+          classNameExpression
+        ),
+        stringLiteral('')
+      )
+    );
+  }
+
   return binaryExpression(
     '+',
     conditionalExpression(
diff --git a/src/index.js b/src/index.js
@@ -188,14 +188,16 @@ export default ({
         }
 
         const handleMissingStyleName = stats.opts && stats.opts.handleMissingStyleName || optionsDefaults.handleMissingStyleName;
+        const styleNameFirst = stats.opts && stats.opts.styleNameFirst || false;
 
         if (t.isStringLiteral(styleNameAttribute.value)) {
           resolveStringLiteral(
             path,
             filenameMap[filename].styleModuleImportMap,
             styleNameAttribute,
             {
-              handleMissingStyleName
+              handleMissingStyleName,
+              styleNameFirst
             }
           );
 
@@ -213,7 +215,8 @@ export default ({
             filenameMap[filename].importedHelperIndentifier,
             filenameMap[filename].styleModuleImportMapIdentifier,
             {
-              handleMissingStyleName
+              handleMissingStyleName,
+              styleNameFirst
             }
           );
         }
diff --git a/src/replaceJsxExpressionContainer.js b/src/replaceJsxExpressionContainer.js
@@ -62,6 +62,12 @@ export default (
       path.node.openingElement.attributes.push(jSXAttribute(
         jSXIdentifier('className'),
         jSXExpressionContainer(
+          options.styleNameFirst ?
+          binaryExpression(
+            '+',
+            styleNameExpression,
+            t.stringLiteral(' ' + classNameAttribute.value.value),
+          ) :
           binaryExpression(
             '+',
             t.stringLiteral(classNameAttribute.value.value + ' '),
@@ -75,7 +81,8 @@ export default (
         jSXExpressionContainer(
           conditionalClassMerge(
             classNameAttribute.value.expression,
-            styleNameExpression
+            styleNameExpression,
+            options.styleNameFirst
           )
         )
       ));
diff --git a/src/resolveStringLiteral.js b/src/resolveStringLiteral.js
@@ -30,11 +30,16 @@ export default (path: *, styleModuleImportMap: StyleModuleImportMapType, styleNa
 
   if (classNameAttribute) {
     if (isStringLiteral(classNameAttribute.value)) {
-      classNameAttribute.value.value += ' ' + resolvedStyleName;
+      if (options.styleNameFirst) {
+        classNameAttribute.value.value = resolvedStyleName + ' ' + classNameAttribute.value.value;
+      } else {
+        classNameAttribute.value.value += ' ' + resolvedStyleName;
+      }
     } else if (isJSXExpressionContainer(classNameAttribute.value)) {
       classNameAttribute.value.expression = conditionalClassMerge(
         classNameAttribute.value.expression,
-        stringLiteral(resolvedStyleName)
+        stringLiteral(resolvedStyleName),
+        options.styleNameFirst
       );
     } else {
       throw new Error('Unexpected attribute value.');
diff --git a/src/schemas/optionsSchema.json b/src/schemas/optionsSchema.json
@@ -44,6 +44,9 @@
     "webpackHotModuleReloading": {
       "type": "boolean"
     },
+    "styleNameFirst": {
+      "type": "boolean"
+    },
     "handleMissingStyleName": {
       "enum": ["throw", "warn", "ignore"]
     }
diff --git a/test/fixtures/react-css-modules/merges the resolved styleName with the existing className values as styleName then className if option is styleNameFirst is true/actual.js b/test/fixtures/react-css-modules/merges the resolved styleName with the existing className values as styleName then className if option is styleNameFirst is true/actual.js
@@ -0,0 +1,9 @@
+import './bar.css';
+
+<div className='apple banana' styleName="a"></div>;
+
+<div className={this.props.className} styleName="a"></div>;
+
+<div className={Math.random() > 0.5 ? 'apple' : 'banana'} styleName="a"></div>;
+
+<div className={this.props.className} styleName={foo}></div>;
diff --git a/test/fixtures/react-css-modules/merges the resolved styleName with the existing className values as styleName then className if option is styleNameFirst is true/bar.css b/test/fixtures/react-css-modules/merges the resolved styleName with the existing className values as styleName then className if option is styleNameFirst is true/bar.css
@@ -0,0 +1 @@
+.a {}
diff --git a/test/fixtures/react-css-modules/merges the resolved styleName with the existing className values as styleName then className if option is styleNameFirst is true/expected.js b/test/fixtures/react-css-modules/merges the resolved styleName with the existing className values as styleName then className if option is styleNameFirst is true/expected.js
@@ -0,0 +1,15 @@
+import _getClassName from 'babel-plugin-react-css-modules/dist/browser/getClassName';
+import './bar.css';
+
+const _styleModuleImportMap = {
+  './bar.css': {
+    'a': 'bar__a'
+  }
+};
+<div className="bar__a apple banana"></div>;
+
+<div className={'bar__a' + (this.props.className ? ' ' + this.props.className : '')}></div>;
+
+<div className={'bar__a' + ((Math.random() > 0.5 ? 'apple' : 'banana') ? ' ' + (Math.random() > 0.5 ? 'apple' : 'banana') : '')}></div>;
+
+<div className={_getClassName(foo, _styleModuleImportMap) + (this.props.className ? ' ' + this.props.className : '')}></div>;
diff --git a/test/fixtures/react-css-modules/merges the resolved styleName with the existing className values as styleName then className if option is styleNameFirst is true/options.json b/test/fixtures/react-css-modules/merges the resolved styleName with the existing className values as styleName then className if option is styleNameFirst is true/options.json
@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    [
+      "../../../../src",
+      {
+        "generateScopedName": "[name]__[local]",
+        "styleNameFirst": true
+      }
+    ]
+  ]
+}
diff --git a/test/fixtures/react-css-modules/provides handleMissingStyleName to getClassName at runtime/expected.js b/test/fixtures/react-css-modules/provides handleMissingStyleName to getClassName at runtime/expected.js
@@ -9,5 +9,6 @@ const _styleModuleImportMap = {
 const styleNameFoo = 'a-c';
 
 <div className={_getClassName(styleNameFoo, _styleModuleImportMap, {
-  'handleMissingStyleName': 'ignore'
+  'handleMissingStyleName': 'ignore',
+  'styleNameFirst': false
 })}></div>;

Original file line number	Diff line number	Diff line change
`@@ -188,14 +188,16 @@ export default ({`
`188`	`188`	`}`
`189`	`189`
`190`	`190`	`const handleMissingStyleName = stats.opts && stats.opts.handleMissingStyleName \|\| optionsDefaults.handleMissingStyleName;`
	`191`	`+ const styleNameFirst = stats.opts && stats.opts.styleNameFirst \|\| false;`
`191`	`192`
`192`	`193`	`if (t.isStringLiteral(styleNameAttribute.value)) {`
`193`	`194`	`resolveStringLiteral(`
`194`	`195`	`path,`
`195`	`196`	`filenameMap[filename].styleModuleImportMap,`
`196`	`197`	`styleNameAttribute,`
`197`	`198`	`{`
`198`		`- handleMissingStyleName`
	`199`	`+ handleMissingStyleName,`
	`200`	`+ styleNameFirst`
`199`	`201`	`}`
`200`	`202`	`);`
`201`	`203`
`@@ -213,7 +215,8 @@ export default ({`
`213`	`215`	`filenameMap[filename].importedHelperIndentifier,`
`214`	`216`	`filenameMap[filename].styleModuleImportMapIdentifier,`
`215`	`217`	`{`
`216`		`- handleMissingStyleName`
	`218`	`+ handleMissingStyleName,`
	`219`	`+ styleNameFirst`
`217`	`220`	`}`
`218`	`221`	`);`
`219`	`222`	`}`