Wrong order for generated nested styles

[smite107]

Expected behavior: Order of generated styles is same as in jss styles

Describe the bug: In some cases for nested styles order of generated styles is REVERSED

Reproduction: Styles:

export const test = createUseStyles({
  test: {
    '& $first': {
      //
      '&:hover': { color: 'white' },
    },

    '& $second': {
      //
      '&:hover': { color: 'red' },
    },
  },

  first: { color: 'red' },

  second: { color: 'blue' },
});

Generated styles:

<style data-jss="" data-meta="Unthemed">
.test-0-2-931 .second-0-2-933:hover {
  color: red;
}
.test-0-2-931 .first-0-2-932:hover {
  color: white;
}
.first-0-2-932 {
  color: red;
}
.second-0-2-933 {
  color: blue;
}
</style>

Versions (please complete the following information):

• jss: 10.10.0
• react-jss: 10.10.0
• Browser [e.g. chrome, safari]: Chrome 121.0.6167.140 (Last)
• OS [e.g. Windows, macOS]: Windows 10