fix(sort-properties.js): Do not sort top level keys

Author: refirst11

lib/rules/sort-properties.js

@@ -23,17 +23,25 @@ function getPropertyName(property) {
   return property.key.name || property.key.value || ''
 }
 
-function getPropertyIndex(property) {
+function getPropertyIndex(property, isTopLevel = false) {
   const name = getPropertyName(property)
 
-  const propertyName = typeof name === 'string' ? name : ''
+  if (
+    isTopLevel &&
+    (property.key.type !== 'Identifier' ||
+      name.startsWith('&') ||
+      name.startsWith(':') ||
+      name.startsWith('@'))
+  ) {
+    return null
+  }
 
   let lastGroupIndex = 0
   let maxPropIndex = 0
 
   for (let i = 0; i < propertyGroups.length; i++) {
     const group = propertyGroups[i]
-    const propIndex = group.properties.indexOf(propertyName)
+    const propIndex = group.properties.indexOf(name)
 
     if (propIndex !== -1) {
       return i * 1000 + propIndex
@@ -43,87 +51,77 @@ function getPropertyIndex(property) {
     maxPropIndex = Math.max(maxPropIndex, group.properties.length)
   }
 
-  if (typeof propertyName === 'string' && propertyName.startsWith('&'))
-    return (propertyGroups.length + 1) * 1000
-  if (typeof propertyName === 'string' && propertyName.includes(':'))
-    return (propertyGroups.length + 2) * 1000
-  if (typeof propertyName === 'string' && propertyName.includes('@media'))
-    return (propertyGroups.length + 3) * 1000
+  if (typeof name === 'string') {
+    if (name.startsWith('&')) return (propertyGroups.length + 1) * 1000
+    if (name.includes(':')) return (propertyGroups.length + 2) * 1000
+    if (name.includes('@media')) return (propertyGroups.length + 3) * 1000
+  }
 
   return lastGroupIndex * 1000 + maxPropIndex + 1
 }
 
-/** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description:
-        'Sort CSS properties according to defined groups and specific rules.',
+        'Sort CSS properties keeping original order for specific keys',
       recommended: true,
     },
     fixable: 'code',
     schema: [],
     messages: {
       sortProperties:
-        'Property "{{property}}" is out of order. Expected position: {{position}}.',
+        'Property "{{property}}" should be at position {{position}}',
     },
   },
 
   create(context) {
     return {
       ObjectExpression(node) {
         const sourceCode = getSourceCode(context)
+        const isTopLevel = !node.parent || node.parent.type !== 'Property'
         const properties = node.properties.filter((prop) => prop.key)
 
-        const sortedProperties = [...properties].sort((a, b) => {
-          const indexA = getPropertyIndex(a)
-          const indexB = getPropertyIndex(b)
-          return indexA - indexB
+        const sorted = [...properties].sort((a, b) => {
+          const indexA = getPropertyIndex(a, isTopLevel)
+          const indexB = getPropertyIndex(b, isTopLevel)
+          return indexA === null || indexB === null ? 0 : indexA - indexB
         })
 
-        const misorderedProperties = properties.filter(
-          (prop, index) => prop !== sortedProperties[index],
-        )
+        const misordered = properties.filter((prop, i) => prop !== sorted[i])
 
-        if (misorderedProperties.length === 0) {
-          return
-        }
+        if (misordered.length === 0) return
 
         const match = sourceCode.getText(node).match(/^{\s*\n(\s*)/)
-        const objectIndent = match ? match[1] : ''
-        const lineCase = match ? '\n' : ' '
-
-        misorderedProperties.forEach((prop) => {
-          const correctIndex = sortedProperties.indexOf(prop)
+        const indent = match ? match[1] : ''
+        const lineEnding = match ? '\n' : ' '
 
+        misordered.forEach((prop) => {
           context.report({
             node: prop,
             messageId: 'sortProperties',
             data: {
-              position: correctIndex + 1,
               property: getPropertyName(prop),
+              position: sorted.indexOf(prop) + 1,
             },
             fix(fixer) {
-              const formattedProps = sortedProperties
-                .map((sortedProp) => {
-                  if (Array.isArray(getPropertyName(sortedProp))) {
-                    const arrayKey = sourceCode.getText(sortedProp.key)
-                    const arrayContent = sortedProp.value.properties
-                      .map(
-                        (innerProp) =>
-                          `${objectIndent}  ${sourceCode.getText(innerProp)}`,
-                      )
-                      .join(`,${lineCase}`)
-                    return `${objectIndent}${arrayKey}: {\n${arrayContent}\n${objectIndent}}`
+              const newText = sorted
+                .map((p) => {
+                  if (Array.isArray(getPropertyName(p))) {
+                    const arrayKey = sourceCode.getText(p.key)
+                    const arrayContent = p.value.properties
+                      .map((inner) => `${indent}  ${sourceCode.getText(inner)}`)
+                      .join(`,${lineEnding}`)
+                    return `${indent}${arrayKey}: {\n${arrayContent}\n${indent}}`
                   }
-                  return `${objectIndent}${sourceCode.getText(sortedProp)}`
+                  return `${indent}${sourceCode.getText(p)}`
                 })
-                .join(`,${lineCase}`)
+                .join(`,${lineEnding}`)
 
               return fixer.replaceTextRange(
                 [node.range[0] + 1, node.range[1] - 1],
-                `${lineCase}${formattedProps}${lineCase}`,
+                `${lineEnding}${newText}${lineEnding}`,
               )
             },
           })