From c75d83607a79b131cb36d44bece0744a06585972 Mon Sep 17 00:00:00 2001
From: Seth Falco <seth@falco.fun>
Date: Sun, 12 Nov 2023 17:33:02 +0000
Subject: [PATCH] fix(inlineStyles): inline styles in order of priority

---
 plugins/inlineStyles.js          | 13 ++++++++++++-
 test/plugins/inlineStyles.03.svg |  2 +-
 test/plugins/inlineStyles.05.svg |  2 +-
 test/plugins/inlineStyles.16.svg |  2 +-
 test/plugins/inlineStyles.19.svg |  2 +-
 test/plugins/inlineStyles.22.svg |  2 +-
 6 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
index db6bd2350..cd06d0ca3 100644
--- a/plugins/inlineStyles.js
+++ b/plugins/inlineStyles.js
@@ -203,9 +203,17 @@ exports.fn = (root, params) => {
               continue;
             }
             const styleDeclarationItems = new Map();
+
+            /** @type {csstree.ListItem<csstree.CssNode>} */
+            let firstListItem;
+
             csstree.walk(styleDeclarationList, {
               visit: 'Declaration',
               enter(node, item) {
+                if (firstListItem == null) {
+                  firstListItem = item;
+                }
+
                 styleDeclarationItems.set(node.property.toLowerCase(), item);
               },
             });
@@ -232,7 +240,10 @@ exports.fn = (root, params) => {
                 const ruleDeclarationItem =
                   styleDeclarationList.children.createItem(ruleDeclaration);
                 if (matchedItem == null) {
-                  styleDeclarationList.children.append(ruleDeclarationItem);
+                  styleDeclarationList.children.insert(
+                    ruleDeclarationItem,
+                    firstListItem
+                  );
                 } else if (
                   matchedItem.data.important !== true &&
                   ruleDeclaration.important === true
diff --git a/test/plugins/inlineStyles.03.svg b/test/plugins/inlineStyles.03.svg
index f0a98c4c1..0f8dabccf 100644
--- a/test/plugins/inlineStyles.03.svg
+++ b/test/plugins/inlineStyles.03.svg
@@ -20,5 +20,5 @@
     <style>
         .cls-8{cls-7-and-8:1}
     </style>
-    <path style="cls-7-and-8:1;only-cls-7:1"/>
+    <path style="only-cls-7:1;cls-7-and-8:1"/>
 </svg>
diff --git a/test/plugins/inlineStyles.05.svg b/test/plugins/inlineStyles.05.svg
index 1d8f86040..c6fedc586 100644
--- a/test/plugins/inlineStyles.05.svg
+++ b/test/plugins/inlineStyles.05.svg
@@ -13,5 +13,5 @@
 @@@
 
 <svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <rect width="100" height="100" style="color:yellow;fill:red"/>
+    <rect width="100" height="100" style="fill:red;color:yellow"/>
 </svg>
diff --git a/test/plugins/inlineStyles.16.svg b/test/plugins/inlineStyles.16.svg
index 0f73f776c..31f548af2 100644
--- a/test/plugins/inlineStyles.16.svg
+++ b/test/plugins/inlineStyles.16.svg
@@ -27,7 +27,7 @@
 <svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222 57.28">
     <defs/>
     <title>button</title>
-    <rect width="222" height="57.28" rx="28.64" ry="28.64" style="stroke:red;fill:#37d0cd"/>
+    <rect width="222" height="57.28" rx="28.64" ry="28.64" style="fill:#37d0cd;stroke:red"/>
     <path d="M312.75,168.66A2.15,2.15,0,0,1,311.2,165L316,160l-4.8-5a2.15,2.15,0,1,1,3.1-3l6.21,6.49a2.15,2.15,0,0,1,0,3L314.31,168a2.14,2.14,0,0,1-1.56.67Zm0,0" transform="translate(-119 -131.36)" style="fill:#fff"/>
     <circle cx="33.5" cy="27.25" r="2.94" style="fill:#fff"/>
     <circle cx="162.5" cy="158.61" r="2.94" transform="translate(-181.03 61.15) rotate(-52.89)" style="fill:#fff"/>
diff --git a/test/plugins/inlineStyles.19.svg b/test/plugins/inlineStyles.19.svg
index cb847f958..1ed0b46bf 100644
--- a/test/plugins/inlineStyles.19.svg
+++ b/test/plugins/inlineStyles.19.svg
@@ -39,7 +39,7 @@
             .cls-2,.cls-3{fill:#f5f5f5;stroke:gray}.cls-2{stroke-width:1px}.cls-2{fill-rule:evenodd}.cls-3{stroke-width:2px}
         </style>
     </defs>
-    <circle cx="25.5" cy="25.5" r="25" style="stroke-width:1px;fill:#f5f5f5;stroke:gray"/>
+    <circle cx="25.5" cy="25.5" r="25" style="fill:#f5f5f5;stroke:gray;stroke-width:1px"/>
     <g>
         <path class="cls-2" d="M1098,2415a8,8,0,0,1,8,8v2h-16v-2A8,8,0,0,1,1098,2415Z" transform="translate(-1072.5 -2389.5)"/>
         <path id="Ellipse_14_copy" data-name="Ellipse 14 copy" class="cls-2" d="M1098,2415a8,8,0,0,0,8-8v-2h-16v2A8,8,0,0,0,1098,2415Z" transform="translate(-1072.5 -2389.5)"/>
diff --git a/test/plugins/inlineStyles.22.svg b/test/plugins/inlineStyles.22.svg
index 3f37fc375..3bc24003e 100644
--- a/test/plugins/inlineStyles.22.svg
+++ b/test/plugins/inlineStyles.22.svg
@@ -21,6 +21,6 @@ element, and further selectors of those classes should still apply.
 
 <svg xmlns="http://www.w3.org/2000/svg" width="1570.062" height="2730" viewBox="0 0 415.412 722.312">
     <g transform="translate(200.662 362.87)">
-        <path d="M163.502-303.979h3.762" style="stroke-width:1.5;stroke:#15c6aa"/>
+        <path d="M163.502-303.979h3.762" style="stroke:#15c6aa;stroke-width:1.5"/>
     </g>
 </svg>