How to specify order of media/feature queries?

[otonashixav]

Is it possible to place media/feature queries between other selectors? It seems like they are grouped together and placed at the end of the generated stylesheet e.g.

style({
  selectors: {
    "&:hover": {
      "@media": {
        "(hover: hover)": {
          backgroundColor: "red",
        },
      },
    },
    "&:focus": {
      backgroundColor: "green",
      "@supports": {
        "selector(:focus-visible)": {
          backgroundColor: "initial",
        },
      },
    },
    "&:focus-visible": {
      backgroundColor: "blue",
    },
    "&:active": {
      backgroundColor: "yellow",
    },
  },
});

generates:

.tpburm0:focus {
  background-color: green;
}
.tpburm0:focus-visible {
  background-color: #00f;
}
.tpburm0:active {
  background-color: #ff0;
}
@media (hover: hover) {
  .tpburm0:hover {
    background-color: red;
  }
}
@supports selector(:focus-visible) {
  .tpburm0:focus {
    background-color: initial;
  }
}

But I want it in the order specified in the css.ts file.