Merge pull request #215 from shirohana/fix/literal-stylesheet-property

Allow using StringLiteral as properties of StyleSheet

Author: Intellicode

lib/rules/sort-styles.js

@@ -11,7 +11,11 @@
 
 const { astHelpers } = require('../util/stylesheet');
 
-const { getStyleDeclarations, isStyleSheetDeclaration } = astHelpers;
+const {
+  getStyleDeclarations,
+  getStylePropertyIdentifier,
+  isStyleSheetDeclaration,
+} = astHelpers;
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -25,8 +29,8 @@ module.exports = (context) => {
   const isValidOrder = order === 'asc' ? (a, b) => a <= b : (a, b) => a >= b;
 
   function report(type, node, prev, current) {
-    const currentName = current.key.name;
-    const prevName = prev.key.name;
+    const currentName = getStylePropertyIdentifier(current);
+    const prevName = getStylePropertyIdentifier(prev);
     context.report({
       node,
       message: `Expected ${type} to be in ${order}ending order. '${currentName}' should be before '${prevName}'.`,
@@ -43,7 +47,10 @@ module.exports = (context) => {
         return;
       }
 
-      if (!isValidOrder(previous.key.name, current.key.name)) {
+      const prevName = getStylePropertyIdentifier(previous);
+      const currentName = getStylePropertyIdentifier(current);
+
+      if (!isValidOrder(prevName, currentName)) {
         return report(arrayName, node, previous, current);
       }
     }

lib/util/stylesheet.js

@@ -153,6 +153,35 @@ const astHelpers = {
     return [];
   },
 
+  getExpressionIdentifier: function (node) {
+    if (node) {
+      switch (node.type) {
+        case 'Identifier':
+          return node.name;
+        case 'Literal':
+          return node.value;
+        case 'TemplateLiteral':
+          return node.quasis.reduce((result, quasi, index) => result
+            + quasi.value.cooked
+            + astHelpers.getExpressionIdentifier(node.expressions[index])
+          , '');
+        default:
+          return '';
+      }
+    }
+
+    return '';
+  },
+
+  getStylePropertyIdentifier: function (node) {
+    if (
+      node &&
+      node.key
+    ) {
+      return astHelpers.getExpressionIdentifier(node.key);
+    }
+  },
+
   isStyleAttribute: function (node) {
     return Boolean(
       node.type === 'JSXAttribute' &&

tests/lib/rules/sort-styles.js

@@ -154,6 +154,41 @@ const tests = {
         message: 'Expected class names to be in ascending order. \'a\' should be before \'b\'.',
       }],
     },
+    {
+      code: `
+        const styles = StyleSheet.create({
+          'b': {},
+          'a': {},
+        })
+      `,
+      errors: [{
+        message: 'Expected class names to be in ascending order. \'a\' should be before \'b\'.',
+      }],
+    },
+    {
+      code: `
+        const styles = StyleSheet.create({
+          ['b']: {},
+          [\`a\`]: {},
+        })
+      `,
+      errors: [{
+        message: 'Expected class names to be in ascending order. \'a\' should be before \'b\'.',
+      }],
+    },
+    {
+      code: `
+        const a = 'a';
+        const b = 'b';
+        const styles = StyleSheet.create({
+          [\`\${a}-\${b}-b\`]: {},
+          [\`a-\${b}-a\`]: {},
+        })
+      `,
+      errors: [{
+        message: 'Expected class names to be in ascending order. \'a-b-a\' should be before \'a-b-b\'.',
+      }],
+    },
   ],
 };