feat(rules/sort-styles): Allow using StringLiteral and the simple part of TemplateLiteral

Author: shirohana

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' &&