Media query ordering changes when converting to object

Start by reproducing the supplied CSS-to-object conversion and trace how media-query rules and default selectors are ordered. The fix is done when the converted object preserves the CSS cascade so the dark-mode media-query values remain effective; no specific source file or test is named in the issue.

I have a problem where a given rule's default definition (.leoButton.isSecondary) gets placed after the media query, which changes the behavior of the rendering. As such, the default overrides the media query, and the media query never takes effect.

Is this a known bug? Is there any known fix for this?

Input

.button.isPrimary {
  --bg: var(--color-secondary-light-mode-70);
  --bg-hover: var(--color-secondary-light-mode-80);
  --bg-active: var(--color-secondary-light-mode-90);
  --bg-focus: var(--color-secondary-light-mode-70);
  --bg-loading: var(--color-secondary-light-mode-50);
  --bg-disabled: var(--color-gray-70);
  --color: white;
}
@media (prefers-color-scheme: dark) {
  .button.isPrimary {
    --bg: var(--color-secondary-dark-mode-50);
    --bg-hover: var(--color-secondary-dark-mode-60);
    --bg-active: var(--color-secondary-dark-mode-70);
    --bg-loading: var(--color-secondary-dark-mode-60);
  }
}
.button.isSecondary {
  --bg: white;
  --bg-active: --color-gray-20;
  --color: var(--color-gray-90);
  --color-hover: var(--color-secondary-light-mode-70);
  --color-loading: var(--color-gray-70);
  --border-width: 1px;
  --border-color: var(--color-gray-30);
}
@media (prefers-color-scheme: dark) {
  .button.isSecondary {
    --bg: black;
    --color-hover: var(--color-secondary-dark-mode-80);
  }
}

Output

{
  ".button.isPrimary": {
    "--bg": "var(--color-secondary-light-mode-70)",
    "--bg-hover": "var(--color-secondary-light-mode-80)",
    "--bg-active": "var(--color-secondary-light-mode-90)",
    "--bg-focus": "var(--color-secondary-light-mode-70)",
    "--bg-loading": "var(--color-secondary-light-mode-50)",
    "--bg-disabled": "var(--color-gray-70)",
    "--color": "white"
  },
  "@media (prefers-color-scheme: dark)": [
    {
      ".button.isPrimary": {
        "--bg": "var(--color-secondary-dark-mode-50)",
        "--bg-hover": "var(--color-secondary-dark-mode-60)",
        "--bg-active": "var(--color-secondary-dark-mode-70)",
        "--bg-loading": "var(--color-secondary-dark-mode-60)"
      }
    },
    {
      ".button.isSecondary": {
        "--bg": "black",
        "--color-hover": "var(--color-secondary-dark-mode-80)"
      }
    }
  ],
  ".button.isSecondary": {
    "--bg": "white",
    "--bg-active": "--color-gray-20",
    "--color": "var(--color-gray-90)",
    "--color-hover": "var(--color-secondary-light-mode-70)",
    "--color-loading": "var(--color-gray-70)",
    "--border-width": "1px",
    "--border-color": "var(--color-gray-30)"
  }
}