add spread test case

Author: tanhauhau

lib/rules/sort-styles.js

@@ -12,7 +12,8 @@
 const { astHelpers } = require('../util/stylesheet');
 
 const {
-  getStyleDeclarations,
+  getStyleDeclarationsChunks,
+  getPropertiesChunks,
   getStylePropertyIdentifier,
   isStyleSheetDeclaration,
 } = astHelpers;
@@ -30,18 +31,38 @@ module.exports = (context) => {
 
   const sourceCode = context.getSourceCode();
 
-  function report(type, node, prev, current) {
+  function sort(array) {
+    return [].concat(array).sort((a, b) => {
+      const identifierA = getStylePropertyIdentifier(a);
+      const identifierB = getStylePropertyIdentifier(b);
+
+      let sortOrder = 0;
+      if (identifierA < identifierB) {
+        sortOrder = -1;
+      } else if (identifierA > identifierB) {
+        sortOrder = 1;
+      }
+      return sortOrder * (order === 'asc' ? 1 : -1);
+    });
+  }
+
+  function report(array, type, node, prev, current) {
     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}'.`,
       loc: current.key.loc,
       fix(fixer) {
-        return [
-          fixer.replaceText(prev, sourceCode.getText(current)),
-          fixer.replaceText(current, sourceCode.getText(prev)),
-        ];
+        const sortedArray = sort(array);
+        return array
+          .map((item, i) => {
+            if (item !== sortedArray[i]) {
+              return fixer.replaceText(item, sourceCode.getText(sortedArray[i]));
+            }
+            return null;
+          })
+          .filter(Boolean);
       },
     });
   }
@@ -59,7 +80,7 @@ module.exports = (context) => {
       const currentName = getStylePropertyIdentifier(current);
 
       if (!isValidOrder(prevName, currentName)) {
-        return report(arrayName, node, previous, current);
+        return report(array, arrayName, node, previous, current);
       }
     }
   }
@@ -70,21 +91,27 @@ module.exports = (context) => {
         return;
       }
 
-      const classDefinitions = getStyleDeclarations(node);
+      const classDefinitionsChunks = getStyleDeclarationsChunks(node);
 
       if (!ignoreClassNames) {
-        checkIsSorted(classDefinitions, 'class names', node);
+        classDefinitionsChunks.forEach((classDefinitions) => {
+          checkIsSorted(classDefinitions, 'class names', node);
+        });
       }
 
       if (ignoreStyleProperties) return;
 
-      classDefinitions.forEach((classDefinition) => {
-        const styleProperties = classDefinition.value.properties;
-        if (!styleProperties || styleProperties.length < 2) {
-          return;
-        }
-
-        checkIsSorted(styleProperties, 'style properties', node);
+      classDefinitionsChunks.forEach((classDefinitions) => {
+        classDefinitions.forEach((classDefinition) => {
+          const styleProperties = classDefinition.value.properties;
+          if (!styleProperties || styleProperties.length < 2) {
+            return;
+          }
+          const stylePropertyChunks = getPropertiesChunks(styleProperties);
+          stylePropertyChunks.forEach((stylePropertyChunk) => {
+            checkIsSorted(stylePropertyChunk, 'style properties', node);
+          });
+        });
       });
     },
   };