Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqNUlFLwzAQ/ishD6KgKdv0pdaByh70QUV9DEiX3rpuaRKStE7G/ruXlG576EQoNLn7vst3992W3hvD2gZoSjMnbGU8ceAbM+Wqqo22njzq2pCF1TXhlCXhFvCc3nKVJR0FwZnzPxKIE9pAgXc2zx2MyJYrQtICwJyzpS7hoosQMs/FurS6UcWV0FLblFgosCQhO67wi/xxhz77Z4XSAqijGigviArqPNRG5j6cCcmKqiVC5s7dcRp1choTmAr9TcM7oyz22hESZAxTxwPU8QA1S/YS6CX1OCe1qEq2clrh6GNLnApkVRLsq/GVVo7TtG+W01xK/f0cY942cNnHxRLEeiC+cpsQ4/TNggPbomP7nM9tCb5Lzz5eYIPnfbLWRSMR/UfyHZyWTdDYwR7QBJR9hItqn+ICVar8dLONB+X6poLQaFPEc4r7FAZ2qvWD3Am77u3FKfa7GHb3tMHBkYNJTmo/xcUIvxP+cIW1v1qwQS/WnrAbNprQ3S9x0Am1

Steps to reproduce

Let's display it.

What is expected?

The background color of hoge1 will turn red.
The background color of hoge2 will turn green.

What is actually happening?

The background color of hoge1 will not turn red.
The background color of hoge2 will turn green.

System Info

Vue 3.5.13
TypeScript 5.8.2

browser microsoft edge 134.0

Any additional comments?

This is how it should be:

.base1 {
&[data-v-7ba5bd90] .hoge {
    background-color: red;
}
}

In reality, this is what happened:

.base1 {
[data-v-7ba5bd90] .hoge {
    background-color: red;
}
}