From 4eabf10ee25429b2b9c4893f876bb7257172e7ab Mon Sep 17 00:00:00 2001
From: Thom van den Akker <thodor20@gmail.com>
Date: Mon, 31 Mar 2025 23:17:36 +0200
Subject: [PATCH] Allow setting fixed first properties to be sorted first

---
 src/plugin.js                          |   8 +
 src/printer.js                         |  14 ++
 test/__snapshots__/format.test.js.snap | 254 +++++++++++++++++++++++++
 test/format.test.js                    |  18 ++
 4 files changed, 294 insertions(+)

diff --git a/src/plugin.js b/src/plugin.js
index eb88416..307c680 100644
--- a/src/plugin.js
+++ b/src/plugin.js
@@ -47,6 +47,14 @@ const plugin = {
       description:
         "Orders XML attributes by key alphabetically while prioritizing xmlns attributes."
     },
+    xmlSortAttributesFirst: {
+      type: "string",
+      category: "XML",
+      array: true,
+      default: [{ value: [] }],
+      description:
+        "When 'xmlSortAttributesByKey' is enabled, make sure that the given keys are always sorted first. Ignores namespace sorting."
+    },
     xmlQuoteAttributes: {
       type: "choice",
       category: "XML",
diff --git a/src/printer.js b/src/printer.js
index aca9ef4..f96c851 100644
--- a/src/printer.js
+++ b/src/printer.js
@@ -412,6 +412,20 @@ function printElement(path, opts, print) {
         if (leftAttr.includes(":")) return -1;
         if (rightAttr.includes(":")) return 1;
 
+        // Check if the attributes need to be sorted first
+        if (
+          Array.isArray(opts.xmlSortAttributesFirst) &&
+          opts.xmlSortAttributesFirst.length > 0
+        ) {
+          const leftFirstIndex = opts.xmlSortAttributesFirst.indexOf(leftAttr);
+          const rightFirstIndex =
+            opts.xmlSortAttributesFirst.indexOf(rightAttr);
+          if (leftFirstIndex !== -1 && rightFirstIndex !== -1)
+            return leftFirstIndex - rightFirstIndex;
+          else if (leftFirstIndex !== -1) return -1;
+          else if (rightFirstIndex !== -1) return 1;
+        }
+
         return leftAttr.localeCompare(rightAttr);
       });
     }
diff --git a/test/__snapshots__/format.test.js.snap b/test/__snapshots__/format.test.js.snap
index 130388b..336d5c5 100644
--- a/test/__snapshots__/format.test.js.snap
+++ b/test/__snapshots__/format.test.js.snap
@@ -1197,6 +1197,260 @@ use {
 "
 `;
 
+exports[`xmlSortAttributesFirst => [width] 1`] = `
+"<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE module PUBLIC "-//Puppy Crawl//DTD Check Configuration 1.3//EN"
+  "https://www.puppycrawl.com/dtds/configuration_1_3.dtd">
+<?xml-model href="project.rnc" type="application/relax-ng-compact-syntax"?>
+<!-- foo -->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="200"
+  height="100"
+  viewBox="0 0 200 100"
+>
+  <title>Style inheritance and the use element</title>
+  <desc _attr="attr">
+    &anp; &#12345;
+    <![CDATA[
+      foo
+    ]]>
+    bar
+  </desc>
+  <?pagebreak?>
+
+  <style />
+  <style> </style>
+  <style type="text/css">
+circle {
+  stroke-opacity: 0.7;
+}
+.special circle {
+  stroke: green;
+}
+use {
+  stroke: purple;
+  fill: orange;
+}
+  </style>
+  <script value="lint" />
+
+  <yaml
+    myveryveryveryverylongattributename="myveryveryveryverylongattributevalue"
+  >
+- 1
+  - 2
+- 3
+  </yaml>
+
+  <!-- inner comment -->
+
+  <?pagebreak?>
+    <g class="special" style="fill: blue">
+        <circle cx="50" cy="50" id="c" r="40" stroke-width="20" />
+    </g>
+  <use xlink:href="#c" x="100" />
+  <ignored>
+    <!-- prettier-ignore-start -->
+      <   ignored   />
+    <!-- prettier-ignore-end -->
+  </ignored>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at est eget enim consectetur accumsan. Aliquam pretium sodales ipsum quis dignissim. Sed id sem vel diam luctus fringilla. Aliquam quis egestas magna. Curabitur molestie lorem et odio porta, et molestie libero laoreet. Morbi rhoncus sagittis cursus. Nullam vehicula pretium consequat. Praesent porta ante at posuere sollicitudin. Nullam commodo tempor arcu, at condimentum neque elementum ut.
+  </p>
+  <span>
+    content
+  </span>
+
+  <div> text   with space<div><hr /></div>   </div>
+
+  <div>
+    even more
+    <content />
+  </div>
+
+  <div xml:space="preserve">
+      <content />
+  </div>
+
+  <div
+    anotherverylongattribute="anotherverylongvalue"
+    verylongattribute="verylongvalue"
+  />
+
+  <div att2="doubleQuotes" attr1='singleQuotes' />
+
+   <!-- Basic sorting of xml attributes -->
+  <div x="first" y="second" z="third" />
+
+  <container xmlns:android="androidURI" xmlns:ios="iosURI">
+    <foo
+      xmlns="highest priority"
+      xmlns:tools="toolsURI"
+      android:a="a"
+      android:b="b"
+      android:c="c"
+      android:d="d"
+      tools:other="thing"
+      here="!"
+      some="non-ns-ed-attributes"
+    > 
+      <bar
+        xmlns:otherTools="otherToolsURI"
+        android:b="b"
+        ios:a="a"
+        ios:c="c"
+        ios:d="d"
+        otherTools:baz="bing"
+        tools:other="thing"
+        another="one"
+      />
+    </foo>
+    <foo xmlns:foo="foo" foo:foo="foo" />
+    <foo xmlns:foo="foo" foo:foo="foo" />
+  </container>
+  <EscapeNeeded name="Pete &quot;Maverick&quot; Mitchell" />
+
+  <NoEscapeNeeded>He said, "Don't quote me."</NoEscapeNeeded>
+
+  <NoEscapeNeeded name='Pete "Maverick" Mitchell' />
+
+  <NoEscapeNeeded name="Pete 'Maverick' Mitchell" />
+
+  <xsl:text>slide </xsl:text>
+</svg>
+<!-- bar -->
+"
+`;
+
+exports[`xmlSortAttributesFirst => [viewBox, width] 1`] = `
+"<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE module PUBLIC "-//Puppy Crawl//DTD Check Configuration 1.3//EN"
+  "https://www.puppycrawl.com/dtds/configuration_1_3.dtd">
+<?xml-model href="project.rnc" type="application/relax-ng-compact-syntax"?>
+<!-- foo -->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="0 0 200 100"
+  width="200"
+  height="100"
+>
+  <title>Style inheritance and the use element</title>
+  <desc _attr="attr">
+    &anp; &#12345;
+    <![CDATA[
+      foo
+    ]]>
+    bar
+  </desc>
+  <?pagebreak?>
+
+  <style />
+  <style> </style>
+  <style type="text/css">
+circle {
+  stroke-opacity: 0.7;
+}
+.special circle {
+  stroke: green;
+}
+use {
+  stroke: purple;
+  fill: orange;
+}
+  </style>
+  <script value="lint" />
+
+  <yaml
+    myveryveryveryverylongattributename="myveryveryveryverylongattributevalue"
+  >
+- 1
+  - 2
+- 3
+  </yaml>
+
+  <!-- inner comment -->
+
+  <?pagebreak?>
+    <g class="special" style="fill: blue">
+        <circle cx="50" cy="50" id="c" r="40" stroke-width="20" />
+    </g>
+  <use xlink:href="#c" x="100" />
+  <ignored>
+    <!-- prettier-ignore-start -->
+      <   ignored   />
+    <!-- prettier-ignore-end -->
+  </ignored>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at est eget enim consectetur accumsan. Aliquam pretium sodales ipsum quis dignissim. Sed id sem vel diam luctus fringilla. Aliquam quis egestas magna. Curabitur molestie lorem et odio porta, et molestie libero laoreet. Morbi rhoncus sagittis cursus. Nullam vehicula pretium consequat. Praesent porta ante at posuere sollicitudin. Nullam commodo tempor arcu, at condimentum neque elementum ut.
+  </p>
+  <span>
+    content
+  </span>
+
+  <div> text   with space<div><hr /></div>   </div>
+
+  <div>
+    even more
+    <content />
+  </div>
+
+  <div xml:space="preserve">
+      <content />
+  </div>
+
+  <div
+    anotherverylongattribute="anotherverylongvalue"
+    verylongattribute="verylongvalue"
+  />
+
+  <div att2="doubleQuotes" attr1='singleQuotes' />
+
+   <!-- Basic sorting of xml attributes -->
+  <div x="first" y="second" z="third" />
+
+  <container xmlns:android="androidURI" xmlns:ios="iosURI">
+    <foo
+      xmlns="highest priority"
+      xmlns:tools="toolsURI"
+      android:a="a"
+      android:b="b"
+      android:c="c"
+      android:d="d"
+      tools:other="thing"
+      here="!"
+      some="non-ns-ed-attributes"
+    > 
+      <bar
+        xmlns:otherTools="otherToolsURI"
+        android:b="b"
+        ios:a="a"
+        ios:c="c"
+        ios:d="d"
+        otherTools:baz="bing"
+        tools:other="thing"
+        another="one"
+      />
+    </foo>
+    <foo xmlns:foo="foo" foo:foo="foo" />
+    <foo xmlns:foo="foo" foo:foo="foo" />
+  </container>
+  <EscapeNeeded name="Pete &quot;Maverick&quot; Mitchell" />
+
+  <NoEscapeNeeded>He said, "Don't quote me."</NoEscapeNeeded>
+
+  <NoEscapeNeeded name='Pete "Maverick" Mitchell' />
+
+  <NoEscapeNeeded name="Pete 'Maverick' Mitchell" />
+
+  <xsl:text>slide </xsl:text>
+</svg>
+<!-- bar -->
+"
+`;
+
 exports[`xmlWhitespaceSensitivity => ignore 1`] = `
 "<?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE module PUBLIC "-//Puppy Crawl//DTD Check Configuration 1.3//EN"
diff --git a/test/format.test.js b/test/format.test.js
index 5448dc2..c369d67 100644
--- a/test/format.test.js
+++ b/test/format.test.js
@@ -81,6 +81,24 @@ test("xmlSortAttributesByKey => true", async () => {
   expect(formatted).toMatchSnapshot();
 });
 
+test("xmlSortAttributesFirst => [width]", async () => {
+  const formatted = await format(fixture, {
+    xmlSortAttributesByKey: true,
+    xmlSortAttributesFirst: ["width"]
+  });
+
+  expect(formatted).toMatchSnapshot();
+});
+
+test("xmlSortAttributesFirst => [viewBox, width]", async () => {
+  const formatted = await format(fixture, {
+    xmlSortAttributesByKey: true,
+    xmlSortAttributesFirst: ["viewBox", "width"]
+  });
+
+  expect(formatted).toMatchSnapshot();
+});
+
 test("xmlQuoteAttributes => preserve", async () => {
   const formatted = await format(fixture, {
     xmlQuoteAttributes: "preserve"