CSS nesting inserts attribute selector at every level

[KaelWD]

Vue version

3.4.21

Link to minimal reproduction

https://play.vuetifyjs.com/#eNptkN1OAyEQhV+FzIXRxLJZf25WbGL6Ct65XlB2okQKCLPbmKbvLj+7pqa9gXMOzMcMbweIQTUv3vNpROhAEO68kYTr3jImppX0vshilLMktcUwRzWUYWCkyeBzD5tkXrPugSkjY0wZYaQe1iyfsU1CoCUmmlq5wLP9R89JfVw0J00lG+nHIIvKeazlfG7iUFlbqb4+ghvtkJDGhY5JS/p7xP2nJnyql7oB0V9fLbWrdLK7WQiXGFsz4qSdQZoJ54zyCSeQi5jg9vaPcKyibGkRTZktDQXHW7jnD/yuhSweedvC+y/pQ4mT

Steps to reproduce

Have a scoped style block with native css nesting

<style scoped>
  .v-card {
    background-color: antiquewhite;
    & .v-card-item {
      background-color: blueviolet;
      & .v-card-title {
        background-color: brown;
      }
    }
  }
</style>

What is expected?

.v-card {
  &[data-v-7ba5bd90] {
    background-color: antiquewhite;
  }
  & .v-card-item {
    &[data-v-7ba5bd90] {
      background-color: blueviolet;
    }
    & .v-card-title[data-v-7ba5bd90] {
      background-color: brown;
    }
  }
}

What is actually happening?

.v-card[data-v-7ba5bd90] {
  background-color: antiquewhite;
  & .v-card-item[data-v-7ba5bd90] {
    background-color: blueviolet;
    & .v-card-title[data-v-7ba5bd90] {
      background-color: brown;
    }
  }
}

System Info

No response

Any additional comments?

:deep needs to omit the selector for anything nested under it, so :deep(.v-card) should just be

[data-v-7ba5bd90] .v-card {
  background-color: antiquewhite;
  & .v-card-item {
    background-color: blueviolet;
    & .v-card-title {
      background-color: brown;
    }
  }
}

[matthew-dean]

Here's a similar / simplied example of this issue:

<style scoped>
div {
  display: grid;
  :deep(> *) {
    margin: 0;
  }
}
</style>

This should output:

div[data-v-d127f3cd] {
  display: grid;
  > * {
    margin: 0;
  }
}

Instead, it outputs:

div[data-v-d127f3cd] {
  display: grid;
  [data-v-d127f3cd] > * {
    margin: 0;
  }
}

(The latter of course represents an entirely different DOM structure.) I would expect :deep() to "escape" all scope re-writing, but it doesn't.