fix: sort rules right before generating the CSS (#2035)

* fix: sort rules right before generating the CSS

we used to sort in the StyleDecoder only, and that lead to `this.atomic` sometimes not being fully sorted when generating the CSS: since it’s a Set, if an item was already there it would not be added again and this could mess with the order

* chore: add changeset

.changeset/strong-pans-hammer.md

@@ -0,0 +1,6 @@
+---
+'@pandacss/core': patch
+---
+
+Fix a regression with rule insertion order after triggering HMR that re-uses some CSS already generated in previous
+triggers, introuced in v0.27.0

packages/core/__tests__/rule-processor.test.ts

@@ -756,10 +756,6 @@ describe('rule processor', () => {
           color: var(--colors-blue-300);
       }
 
-        .hover\\\\:text_red\\\\.400:is(:hover, [data-hover]) {
-          color: var(--colors-red-400);
-      }
-
         .fs_12px {
           font-size: 12px;
       }
@@ -775,6 +771,10 @@ describe('rule processor', () => {
         .border_2px_solid_token\\\\(colors\\\\.green\\\\.100\\\\) {
           border: 2px solid var(--colors-green-100);
       }
+
+        .hover\\\\:text_red\\\\.400:is(:hover, [data-hover]) {
+          color: var(--colors-red-400);
+      }
       }"
     `)
   })

packages/core/src/stylesheet.ts

@@ -6,6 +6,7 @@ import { serializeStyles } from './serialize'
 import { stringify } from './stringify'
 import type { StyleDecoder } from './style-decoder'
 import type { CssOptions, LayerName, ProcessOptions, StylesheetContext } from './types'
+import { sortStyleRules } from './sort-style-rules'
 
 export class Stylesheet {
   constructor(private context: StylesheetContext) {}
@@ -52,7 +53,7 @@ export class Stylesheet {
   }
 
   processDecoder = (decoder: StyleDecoder) => {
-    decoder.atomic.forEach((css) => {
+    sortStyleRules([...decoder.atomic]).forEach((css) => {
       this.processCss(css.result, (css.layer as LayerName) ?? 'utilities')
     })