From 9516dc5c7de8c1d0b848674b0d0000536543c637 Mon Sep 17 00:00:00 2001
From: gregory nowakowski <gregnb@gmail.com>
Date: Sun, 23 Apr 2017 14:37:38 -0400
Subject: [PATCH] feature to allow styleId JSX attribute for ID selector

---
 src/index.js                         | 14 ++++++------
 src/replaceJsxExpressionContainer.js | 34 +++++++++++++++++++---------
 src/resolveStringLiteral.js          | 19 +++++++++++-----
 3 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/src/index.js b/src/index.js
index 9b4e840..36be3f7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -167,33 +167,33 @@ export default ({
       },
       JSXElement (path: Object, stats: Object): void {
         const filename = stats.file.opts.filename;
-        const styleNameAttribute = path.node.openingElement.attributes
+        const styleAttribute = path.node.openingElement.attributes
           .find((attribute) => {
-            return typeof attribute.name !== 'undefined' && attribute.name.name === 'styleName';
+            return typeof attribute.name !== 'undefined' && (attribute.name.name === 'styleName' || attribute.name.name === 'styleId');
           });
 
-        if (!styleNameAttribute) {
+        if (!styleAttribute) {
           return;
         }
 
-        if (t.isStringLiteral(styleNameAttribute.value)) {
+        if (t.isStringLiteral(styleAttribute.value)) {
           resolveStringLiteral(
             path,
             filenameMap[filename].styleModuleImportMap,
-            styleNameAttribute
+            styleAttribute
           );
 
           return;
         }
 
-        if (t.isJSXExpressionContainer(styleNameAttribute.value)) {
+        if (t.isJSXExpressionContainer(styleAttribute.value)) {
           if (!filenameMap[filename].importedHelperIndentifier) {
             setupFileForRuntimeResolution(path, filename);
           }
           replaceJsxExpressionContainer(
             t,
             path,
-            styleNameAttribute,
+            styleAttribute,
             filenameMap[filename].importedHelperIndentifier,
             filenameMap[filename].styleModuleImportMapIdentifier
           );
diff --git a/src/replaceJsxExpressionContainer.js b/src/replaceJsxExpressionContainer.js
index 9b3a64e..c20312f 100644
--- a/src/replaceJsxExpressionContainer.js
+++ b/src/replaceJsxExpressionContainer.js
@@ -14,11 +14,31 @@ import conditionalClassMerge from './conditionalClassMerge';
 export default (
   t: BabelTypes,
   path: Object,
-  styleNameAttribute: JSXAttribute,
+  styleAttribute: JSXAttribute,
   importedHelperIndentifier: Identifier,
   styleModuleImportMapIdentifier: Identifier
 ): void => {
-  const expressionContainerValue = styleNameAttribute.value;
+  const expressionContainerValue = styleAttribute.value;
+
+  const styleNameExpression = t.callExpression(
+    importedHelperIndentifier,
+    [
+      expressionContainerValue.expression,
+      styleModuleImportMapIdentifier
+    ]
+  );
+
+  if (styleAttribute.name.name === 'styleId') {
+    path.node.openingElement.attributes.push(jSXAttribute(
+        jSXIdentifier('id'),
+        jSXExpressionContainer(
+            styleNameExpression
+        )
+    ));
+
+    return;
+  }
+
   const classNameAttribute = path.node.openingElement.attributes
     .find((attribute) => {
       return typeof attribute.name !== 'undefined' && attribute.name.name === 'className';
@@ -28,15 +48,7 @@ export default (
     path.node.openingElement.attributes.splice(path.node.openingElement.attributes.indexOf(classNameAttribute), 1);
   }
 
-  path.node.openingElement.attributes.splice(path.node.openingElement.attributes.indexOf(styleNameAttribute), 1);
-
-  const styleNameExpression = t.callExpression(
-    importedHelperIndentifier,
-    [
-      expressionContainerValue.expression,
-      styleModuleImportMapIdentifier
-    ]
-  );
+  path.node.openingElement.attributes.splice(path.node.openingElement.attributes.indexOf(styleAttribute), 1);
 
   if (classNameAttribute) {
     if (isStringLiteral(classNameAttribute.value)) {
diff --git a/src/resolveStringLiteral.js b/src/resolveStringLiteral.js
index 99e483d..c01b68a 100644
--- a/src/resolveStringLiteral.js
+++ b/src/resolveStringLiteral.js
@@ -15,14 +15,21 @@ import type {
 /**
  * Updates the className value of a JSX element using a provided styleName attribute.
  */
-export default (path: Object, styleModuleImportMap: StyleModuleImportMapType, styleNameAttribute: JSXAttribute): void => {
+export default (path: Object, styleModuleImportMap: StyleModuleImportMapType, styleAttribute: JSXAttribute): void => {
+  const resolvedStyleName = getClassName(styleAttribute.value.value, styleModuleImportMap);
+
+  if (styleAttribute.name.name === 'styleId') {
+    styleAttribute.name.name = 'id';
+    styleAttribute.value.value = resolvedStyleName;
+
+    return;
+  }
+
   const classNameAttribute = path.node.openingElement.attributes
     .find((attribute) => {
       return typeof attribute.name !== 'undefined' && attribute.name.name === 'className';
     });
 
-  const resolvedStyleName = getClassName(styleNameAttribute.value.value, styleModuleImportMap);
-
   if (classNameAttribute) {
     if (isStringLiteral(classNameAttribute.value)) {
       classNameAttribute.value.value += ' ' + resolvedStyleName;
@@ -35,9 +42,9 @@ export default (path: Object, styleModuleImportMap: StyleModuleImportMapType, st
       throw new Error('Unexpected attribute value.');
     }
 
-    path.node.openingElement.attributes.splice(path.node.openingElement.attributes.indexOf(styleNameAttribute), 1);
+    path.node.openingElement.attributes.splice(path.node.openingElement.attributes.indexOf(styleAttribute), 1);
   } else {
-    styleNameAttribute.name.name = 'className';
-    styleNameAttribute.value.value = resolvedStyleName;
+    styleAttribute.name.name = 'className';
+    styleAttribute.value.value = resolvedStyleName;
   }
 };