global css order error

I use postcss-modules to handle antd in parcel.

// global.less
@import '~antd/dist/antd.less';

// App.tsx
import '../styles/global.less'

function App(){
 return <Box/>
}

// Box.tsx
import styles from './index.module.scss'
export default function Box() {

  return (
    <Form className={styles['filter-form']}  >
    </Form>
  )
}

// index.module.scss
.filter-form {
  position: relative;
  margin: 20px 0;
  padding: 8px 200px 24px 24px;
  background: #fff;
}

// postcss.config.js

module.exports = {
  modules: true,
  plugins: {
    autoprefixer: {
      grid: true,
    },
    'postcss-modules': {
      globalModulePaths: ['./styles/global.less'],
    },
  },
}

I find the global.less is placed at the bottom and has more priority.
But the module.scss should have higher priority.

demo like this parcel-antd

Anything to deal with it?

Reproduce the ordering issue using the mentioned global.less, App.tsx, Box.tsx, index.module.scss, and postcss.config.js files, or the linked parcel-antd demo. Inspect how the global stylesheet and CSS Module are collected and emitted, then define completion as either consistent module precedence or clear documentation of the supported configuration.