frontend: add lint rule for ":deep usage as a combinator has been dep…

…recated" Issue: #5121
ecamp · May 5, 2024 · c0bb89c · c0bb89c
1 parent 7c6ce39
commit c0bb89c
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 17 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -103,6 +103,7 @@
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-vue": "9.25.0",
+    "eslint-plugin-vue-scoped-css": "2.8.0",
     "flush-promises": "1.0.2",
     "jest-serializer-vue-tjw": "3.20.0",
     "jsdom": "24.0.0",
@@ -125,6 +126,7 @@
     },
     "extends": [
       "plugin:vue/recommended",
+      "plugin:vue-scoped-css/vue3-recommended",
       "eslint:recommended",
       "plugin:prettier/recommended",
       "@vue/eslint-config-prettier"

diff --git a/frontend/src/components/activity/DraggableContentNodes.vue b/frontend/src/components/activity/DraggableContentNodes.vue
@@ -171,7 +171,7 @@ export default {
   min-height: 10rem;
 }
 
-.draggable-area ::v-deep .content-node {
+.draggable-area ::v-deep(.content-node) {
   margin: 0 !important;
   flex-grow: 1;
   transition: all 0.4s 25ms ease;
@@ -194,10 +194,11 @@ export default {
 
 @supports selector(:has(+ *)) {
   .draggable-area--layout-mode
-    ::v-deep
-    .content-node:hover:is(
-      :not(:has(.content-node:hover)):not(:has(.ec-button-contentnode-add:hover)):not(
-          :has(.resize-btn:hover)
+    ::v-deep(
+      .content-node:hover:is(
+          :not(:has(.content-node:hover)):not(:has(.ec-button-contentnode-add:hover)):not(
+              :has(.resize-btn:hover)
+            )
         )
     ) {
     box-shadow:
@@ -207,7 +208,7 @@ export default {
   }
 }
 
-.draggable-area--row ::v-deep .content-node {
+.draggable-area--row ::v-deep(.content-node) {
   flex: 1 0 320px !important;
 }
 

diff --git a/frontend/src/components/collaborator/CollaboratorForm.vue b/frontend/src/components/collaborator/CollaboratorForm.vue
@@ -120,7 +120,7 @@ export default {
 </script>
 
 <style scoped>
-.ec-status-field::v-deep .v-input__append-inner {
+.ec-status-field::v-deep(.v-input__append-inner) {
   margin-top: 0;
   align-self: center;
   margin-right: -4px;

diff --git a/frontend/src/components/program/picasso/PicassoEntry.vue b/frontend/src/components/program/picasso/PicassoEntry.vue
@@ -494,7 +494,7 @@ export default {
   }
 }
 
-:deep .e-avatarrow {
+:deep(.e-avatarrow) {
   position: absolute;
   bottom: 2px;
   right: 2px;

diff --git a/frontend/src/components/prompt/PopoverPrompt.vue b/frontend/src/components/prompt/PopoverPrompt.vue
@@ -151,25 +151,25 @@ export default {
   flex-grow: 1;
 }
 
-.ec-popover-prompt ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt ::v-deep(.ec-activator .v-btn) {
   position: absolute;
   background-color: white !important;
   color: #424242 !important;
 }
 
-.ec-popover-prompt ::v-deep .ec-activator .v-btn:hover::before {
+.ec-popover-prompt ::v-deep(.ec-activator .v-btn:hover::before) {
   opacity: 0;
 }
 
-.ec-popover-prompt--align-left ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt--align-left ::v-deep(.ec-activator .v-btn) {
   left: 0;
 }
 
-.ec-popover-prompt--align-right ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt--align-right ::v-deep(.ec-activator .v-btn) {
   right: 0;
 }
 
-.ec-popover-prompt--position-bottom ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt--position-bottom ::v-deep(.ec-activator .v-btn) {
   bottom: 100%;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
@@ -179,7 +179,7 @@ export default {
     0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
-.ec-popover-prompt--position-top ::v-deep .ec-activator .v-btn {
+.ec-popover-prompt--position-top ::v-deep(.ec-activator .v-btn) {
   top: calc(100% - 10px);
   z-index: 10;
   border-top-right-radius: 0;

diff --git a/frontend/src/views/Profile.vue b/frontend/src/views/Profile.vue
@@ -116,7 +116,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.e-profile--email ::v-deep .v-input__append-inner {
+.e-profile--email ::v-deep(.v-input__append-inner) {
   margin-top: 0 !important;
   align-self: center;
 }