Incorect css order for custom color + dark mode + bg-opacity

Minimal demo: https://github.com/xorik/vite-dark-bg-opacity

Hi. Custom color + bg opacity works fine for normal mode, but CSS order seems incorrect for dark mode.

Expected (added !important to all opacity classes):

Actual:

Devtool screenshot:

HTML:

    <div class="flex h-20 my-10 justify-between">
      <div class="bg-primary flex-1"></div>
      <div class="bg-primary flex-1 bg-opacity-70"></div>
      <div class="bg-primary flex-1 bg-opacity-50"></div>
      <div class="bg-primary flex-1 bg-opacity-20"></div>
    </div>

    <div class="dark bg-dark-400 py-10">
      <div class="flex h-20 my-10 justify-between">
        <div class="dark:bg-primary flex-1"></div>
        <div class="dark:bg-primary flex-1 bg-opacity-70"></div>
        <div class="dark:bg-primary flex-1 bg-opacity-50"></div>
        <div class="dark:bg-primary flex-1 bg-opacity-20"></div>
      </div>
    </div>

Config:

{
  purge: [],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      backgroundColor: {
        primary: ({ opacityValue }) => {
          if (opacityValue !== undefined) {
            return `rgba(30, 58, 138, ${opacityValue})`;
          }
          return `rgb(30, 58, 138)`;
        }
      }
    },
  },
  variants: {},
  plugins: [],
}

[voorjaar]

today or tomorrow.

[voorjaar]

actually we have a new feature from next version can solve this better.

   <div class="bg-primary/70 ...">
   <div class="dark:bg-primary/50 ...">

https://github.com/windicss/windicss/blob/31c270185811d1864072ee23944b92bc8e753ece/test/processor/__snapshots__/utilities.test.ts.yml#L130-L133