Vue.js: 静的解析でVue3から非推奨なディープセレクタ`::v-deep`をエラーにするメモ📝

Vue3から以下のドキュメント記載の通りディープセレクタを利用する際に::v-deepから:deepに変更になりました。

<style scoped>
/* deep selectors */
::v-deep(.foo) {}
/* shorthand */
:deep(.foo) {}

/* targeting slot content */
::v-slotted(.foo) {}
/* shorthand */
:slotted(.foo) {}

/* one-off global rule */
::v-global(.foo) {}
/* shorthand */
:global(.foo) {}
</style>

rfcs/active-rfcs/0023-scoped-styles-changes.md at master · vuejs/rfcs · GitHub

利用するとビルドした際に以下のような警告が出るものの気づかずに利用してしまうことも多いので静的解析でエラーにできないかやってみたのでメモ📝

::v-deep usage as a combinator has been deprecated. Use ::v-deep(<inner-selector>) instead

やり方

結論から言うとstylelintのselector-disallowed-listを使って、

stylelint.io

以下のように指定してあげると::v-deep系のセレクターを静的解析でエラーにすることができた。

{
  "extends": ["stylelint-config-standard-scss"],
  "overrides": [
    {
      "files": ["**/*.vue"],
      "customSyntax": "postcss-html"
    }
  ],
  "rules": {
    "selector-disallowed-list": ["/::v-deep/", "/::v-slotted/", "/::v-global/"],

利用していると以下のようにエラーになります。

app/javascript/components/pages/EditBoardContainer.vue
 178:3  ✖  Unexpected selector "::v-deep(.main-with-sidemenu__sidemenu)"  selector-disallowed-list

Stylelint便利ですね🤵✨