[bug] :deep Compilation error

[lzxb]

Less source code

.faq-desc :deep(.ui-collapse) {
  &-item-content {
    border-bottom-width: 0;
  }
}

Compile into CSS

.faq-desc :deep(.ui-collapse) {
  border-bottom-width: 0;
}
.faq-desc :deep(.ui-collapse)-item-content {
  border-bottom-width: 0;
}

Will report an error，in "lightningcss": "^1.28.2",

import { transform } from 'lightningcss';

transform({
  filename: 'style.css',
  code: Buffer.from(`
.faq-desc :deep(.ui-collapse) {
  border-bottom-width: 0;
}
.faq-desc :deep(.ui-collapse)-item-content {
  border-bottom-width: 0;
}

`),
  minify: true,
  sourceMap: true
});

[devongovett]

Shouldn't that syntax be compiled by Vue before it reaches lightningcss? That is not valid CSS syntax.

[lzxb]

Vue loader always handles it last

      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader'],
        type: 'javascript/auto',
      },

[devongovett]

Why? Shouldn't it run first?

[lzxb]

Rspack related documentation always requires this to be written.

[lzxb]

See detail: https://rspack.dev/guide/tech/vue#vue-3