autofix for 'sort-styles' rule

lib/rules/sort-styles.js

@@ -12,9 +12,11 @@
 const { astHelpers } = require('../util/stylesheet');
 
 const {
-  getStyleDeclarations,
+  getStyleDeclarationsChunks,
+  getPropertiesChunks,
   getStylePropertyIdentifier,
   isStyleSheetDeclaration,
+  isEitherShortHand,
 } = astHelpers;
 
 //------------------------------------------------------------------------------
@@ -28,13 +30,54 @@ module.exports = (context) => {
   const ignoreStyleProperties = options.ignoreStyleProperties;
   const isValidOrder = order === 'asc' ? (a, b) => a <= b : (a, b) => a >= b;
 
-  function report(type, node, prev, current) {
+  const sourceCode = context.getSourceCode();
+
+  function sort(array) {
+    return [].concat(array).sort((a, b) => {
+      const identifierA = getStylePropertyIdentifier(a);
+      const identifierB = getStylePropertyIdentifier(b);
+
+      let sortOrder = 0;
+      if (isEitherShortHand(identifierA, identifierB)) {
+        return a.range[0] - b.range[0];
+      } else 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);
+    const hasComments = array
+      .map(prop => sourceCode.getComments(prop))
+      .reduce(
+        (hasComment, comment) =>
+          hasComment || comment.leading.length > 0 || comment.trailing > 0,
+        false
+      );
+
     context.report({
       node,
       message: `Expected ${type} to be in ${order}ending order. '${currentName}' should be before '${prevName}'.`,
       loc: current.key.loc,
+      fix: hasComments ? undefined : (fixer) => {
+        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);
+      },
     });
   }
 
@@ -50,8 +93,15 @@ module.exports = (context) => {
       const prevName = getStylePropertyIdentifier(previous);
       const currentName = getStylePropertyIdentifier(current);
 
+      if (
+        arrayName === 'style properties' &&
+        isEitherShortHand(prevName, currentName)
+      ) {
+        return;
+      }
+
       if (!isValidOrder(prevName, currentName)) {
-        return report(arrayName, node, previous, current);
+        return report(array, arrayName, node, previous, current);
       }
     }
   }
@@ -62,26 +112,33 @@ 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);
+          });
+        });
       });
     },
   };
 };
 
+module.exports.fixable = 'code';
 module.exports.schema = [
   {
     enum: ['asc', 'desc'],

lib/util/stylesheet.js

@@ -127,32 +127,72 @@ const astHelpers = {
   },
 
   getStyleSheetName: function (node) {
+    if (node && node.id) {
+      return node.id.name;
+    }
+  },
+
+  getStyleDeclarations: function (node) {
     if (
       node &&
-      node.id
+      node.init &&
+      node.init.arguments &&
+      node.init.arguments[0] &&
+      node.init.arguments[0].properties
     ) {
-      return node.id.name;
+      return node.init.arguments[0].properties.filter(property => property.type === 'Property');
     }
+
+    return [];
   },
 
-  getStyleDeclarations: function (node) {
+  getStyleDeclarationsChunks: function (node) {
     if (
       node &&
       node.init &&
       node.init.arguments &&
       node.init.arguments[0] &&
       node.init.arguments[0].properties
     ) {
-      return node
-        .init
-        .arguments[0]
-        .properties
-        .filter(property => property.type === 'Property');
+      const properties = node.init.arguments[0].properties;
+      const result = [];
+      let chunk = [];
+      for (let i = 0; i < properties.length; i += 1) {
+        const property = properties[i];
+        if (property.type === 'Property') {
+          chunk.push(property);
+        } else if (chunk.length) {
+          result.push(chunk);
+          chunk = [];
+        }
+      }
+      if (chunk.length) {
+        result.push(chunk);
+      }
+      return result;
     }
 
     return [];
   },
 
+  getPropertiesChunks: function (properties) {
+    const result = [];
+    let chunk = [];
+    for (let i = 0; i < properties.length; i += 1) {
+      const property = properties[i];
+      if (property.type === 'Property') {
+        chunk.push(property);
+      } else if (chunk.length) {
+        result.push(chunk);
+        chunk = [];
+      }
+    }
+    if (chunk.length) {
+      result.push(chunk);
+    }
+    return result;
+  },
+
   getExpressionIdentifier: function (node) {
     if (node) {
       switch (node.type) {
@@ -437,6 +477,16 @@ const astHelpers = {
       return [node.object.name, node.property.name].join('.');
     }
   },
+
+  isEitherShortHand: function (property1, property2) {
+    const shorthands = ['margin', 'padding', 'border', 'flex'];
+    if (shorthands.includes(property1)) {
+      return property2.startsWith(property1);
+    } else if (shorthands.includes(property2)) {
+      return property1.startsWith(property2);
+    }
+    return false;
+  },
 };
 
 module.exports.astHelpers = astHelpers;