coding-coding-coding
diff --git a/‎src/utils/format/css.ts‎
Lines changed: 40 additions & 23 deletions b/‎src/utils/format/css.ts‎
Lines changed: 40 additions & 23 deletions
@@ -1,32 +1,12 @@
 import {parseCSS} from '../parse/css';
-import type {ParsedAtRule, ParsedStyleRule} from '../parse/css';
+import type {ParsedAtRule, ParsedDeclaration, ParsedStyleRule} from '../parse/css';
 
 export function formatCSS(cssText: string): string {
     const parsed = parseCSS(cssText);
 
     const lines: string[] = [];
     const tab = '    ';
 
-    function isStyleRule(rule: ParsedAtRule | ParsedStyleRule): rule is ParsedStyleRule {
-        return 'selectors' in rule;
-    }
-
-    function clearEmpty(rules: Array<ParsedAtRule | ParsedStyleRule>) {
-        for (let i = rules.length - 1; i >= 0; i--) {
-            const rule = rules[i];
-            if (isStyleRule(rule)) {
-                if (rule.declarations.length === 0) {
-                    rules.splice(i, 1);
-                }
-            } else {
-                clearEmpty(rule.rules);
-                if (rule.rules.length === 0) {
-                    rules.splice(i, 1);
-                }
-            }
-        }
-    }
-
     function formatRule(rule: ParsedAtRule | ParsedStyleRule, indent: string) {
         if (isStyleRule(rule)) {
             formatStyleRule(rule as ParsedStyleRule, indent);
@@ -46,13 +26,50 @@ export function formatCSS(cssText: string): string {
         selectors.forEach((selector, i) => {
             lines.push(`${indent}${selector}${i < lastSelectorIndex ? ',' : ' {'}`);
         });
-        declarations.forEach(({property, value, important}) => {
+        const sorted = sortDeclarations(declarations);
+        sorted.forEach(({property, value, important}) => {
             lines.push(`${indent}${tab}${property}: ${value}${important ? ' !important' : ''};`);
         });
         lines.push(`${indent}}`);
     }
 
-    clearEmpty(parsed);
+    clearEmptyRules(parsed);
     parsed.forEach((rule) => formatRule(rule, ''));
     return lines.join('\n');
 }
+
+function sortDeclarations(declarations: ParsedDeclaration[]) {
+    const prefixRegex = /^-[a-z]-/;
+    return [...declarations].sort((a, b) => {
+        const aProp = a.property;
+        const bProp = b.property;
+        const aPrefix = aProp.match(prefixRegex)?.[0] ?? '';
+        const bPrefix = bProp.match(prefixRegex)?.[0] ?? '';
+        const aNorm = aPrefix ? aProp.replace(prefixRegex, '') : aProp;
+        const bNorm = bPrefix ? bProp.replace(prefixRegex, '') : bProp;
+        if (aNorm === bNorm) {
+            return aPrefix.localeCompare(bPrefix);
+        }
+        return aNorm.localeCompare(bNorm);
+    });
+}
+
+function isStyleRule(rule: ParsedAtRule | ParsedStyleRule): rule is ParsedStyleRule {
+    return 'selectors' in rule;
+}
+
+function clearEmptyRules(rules: Array<ParsedAtRule | ParsedStyleRule>) {
+    for (let i = rules.length - 1; i >= 0; i--) {
+        const rule = rules[i];
+        if (isStyleRule(rule)) {
+            if (rule.declarations.length === 0) {
+                rules.splice(i, 1);
+            }
+        } else {
+            clearEmptyRules(rule.rules);
+            if (rule.rules.length === 0) {
+                rules.splice(i, 1);
+            }
+        }
+    }
+}