Fix variable orders inside @svg()

css-doodle · Sep 11, 2023 · 52f31b5 · 52f31b5
1 parent e56213a
commit 52f31b5
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/src/parser/parse-svg.js b/src/parser/parse-svg.js
@@ -340,7 +340,11 @@ function skipHeadSVG(block) {
     }
   }
   if (headSVG && Array.isArray(headSVG.value)) {
-    headSVG.value.push(...headVariables);
+    for (let variable of headVariables) {
+      if (!headSVG.value.find(n => n.name == variable.name)) {
+        headSVG.value.unshift(variable);
+      }
+    }
     return headSVG;
   }
   return block;

diff --git a/test/parse-svg.js b/test/parse-svg.js
@@ -438,3 +438,33 @@ test('svg variable', t => {
     }]
   });
 });
+
+
+test('svg variable order', t => {
+  compare(t, '--a: 1; svg { --a: 2 }', {
+    name: 'svg',
+    type: 'block',
+    value: [{
+      type: 'statement',
+      name: '--a',
+      value: '2',
+      variable: true
+    }]
+  });
+
+  compare(t, '--b: 1; svg { --a: 2 }', {
+    name: 'svg',
+    type: 'block',
+    value: [{
+      type: 'statement',
+      name: '--b',
+      value: '1',
+      variable: true
+    }, {
+      type: 'statement',
+      name: '--a',
+      value: '2',
+      variable: true
+    }]
+  });
+});