vuejs/core に css nesting した scoped style にて :deep() を使うと 無効なスタイルが生成される問題について報告した話

vuejs に scoped style というものがあります。

それは コンポーネント内に 一意の属性を付けて周りスタイルをそこに閉じ込めるものです。

具体的には

<style scoped>
.hoge {
    color:red;
}
</style>

と書くことで

<style>
[identity].hoge {
    color: red;
}
</style>

の様な変換がされます。
ただ、上記 の変換ルールに不備があります。
具体的には css nesting と :deep() (::v-deep()) を併用した時に問題となります。

<style scoped>
.hoge {
    :deep(.fuga) {
        color:red;
    }
}
</style>

これだと下記の様なスタイルが生成されます。

<style>
.hoge {
    [identity] .fuga {
        color: red;
    }
}
</style>

つまり、.hoge .fuga の意が .hoge [identity] .fuga になってしまい セレクタが壊れてしまうということです。
この不具合がある状態で正しいセレクターを生成させるにはこう書く必要があります。

<style scoped>
.hoge {
    &  :deep(.fuga) {
        color:red;
    }
}
</style>

これだと下記の様な生成になります。

<style>
.hoge {
    &[identity] .fuga {
        color: red;
    }
}
</style>

つまりこれなら .hoge &[identity] .fuga となり 最終的な解釈は .hoge[identity] .fuga となりますので想定されたスタイルとなります。

でそれを vuejs/core にて issues で 報告したのが下記となります。

CSS nesting and :deep() in scoped styles not working · Issue #13159 · vuejs/core

やはり play.vuejs.org が 状態をURLに保存する構造をしているので共有が楽でよいですね。

これの対応の pull request は下記となります。

[fix(compiler-sfc): auto add nesting selector for nesting ::v-deep by edison1105 · Pull Request #13163 · vuejs/core]
(https://github.com/vuejs/core/pull/13163)

以上。