From c3bb0ddb315a8375ec4c58397659904ff27f5410 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Mon, 7 Oct 2024 12:41:41 +0200
Subject: [PATCH] chore(style): migrate from ::v-deep (vue2.x) to :deep()
 (vue3)

---
 packages/documentation/pages/changelog.vue    |  2 +-
 .../foundations/colors/list-of-tokens.vue     |  2 +-
 .../KtFieldInlineEdit.vue                     | 10 ++---
 .../kotti-filters/components/FilterRow.vue    |  2 +-
 .../kotti-ui/source/kotti-navbar/KtNavbar.vue | 42 +++++++++----------
 .../kotti-navbar/components/NavbarLogo.vue    |  2 +-
 .../components/NavbarQuickLink.vue            |  2 +-
 .../kotti-table-legacy/KtTableLegacy.vue      | 16 +++----
 .../style/form-checkbox.scss                  |  2 +-
 stylelint.config.js                           |  6 +++
 10 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/packages/documentation/pages/changelog.vue b/packages/documentation/pages/changelog.vue
index bdbca5d947..8d75f56c94 100644
--- a/packages/documentation/pages/changelog.vue
+++ b/packages/documentation/pages/changelog.vue
@@ -156,7 +156,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-section ::v-deep img {
+section :deep(img) {
 	display: block;
 	overflow: hidden;
 	border: 1px solid var(--ui-02);
diff --git a/packages/documentation/pages/foundations/colors/list-of-tokens.vue b/packages/documentation/pages/foundations/colors/list-of-tokens.vue
index 1e3378d40c..3c9198e7ec 100644
--- a/packages/documentation/pages/foundations/colors/list-of-tokens.vue
+++ b/packages/documentation/pages/foundations/colors/list-of-tokens.vue
@@ -72,7 +72,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.colorize ::v-deep .color-box {
+.colorize :deep(.color-box) {
 	width: 50px;
 	height: 50px;
 	margin: 8px;
diff --git a/packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue b/packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue
index ff526e82d8..7db4449e0a 100644
--- a/packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue
+++ b/packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue
@@ -329,7 +329,7 @@ export default defineComponent({
 	// slot that wraps <input /> & <EditIcon/>
 
 	/* stylelint-disable-next-line selector-class-pattern */
-	::v-deep .kt-field__input-container__slot {
+	:deep(.kt-field__input-container__slot) {
 		display: flex;
 		gap: var(--unit-2);
 		align-items: center;
@@ -341,12 +341,12 @@ export default defineComponent({
 		margin: 0;
 	}
 
-	::v-deep .kt-field__input-container {
+	:deep(.kt-field__input-container) {
 		background-color: transparent;
 	}
 
 	&--is-readonly {
-		::v-deep .kt-field__input-container {
+		:deep(.kt-field__input-container) {
 			box-shadow: none !important;
 		}
 	}
@@ -376,7 +376,7 @@ export default defineComponent({
 	&.kt-field-inline-edit--is-editable:hover:not(
 			.kt-field-inline-edit--is-editing
 		) {
-		::v-deep .kt-field__wrapper:not(.kt-field__wrapper--disabled) {
+		:deep(.kt-field__wrapper:not(.kt-field__wrapper--disabled)) {
 			.kt-field__input-container:hover {
 				cursor: pointer;
 				background-color: var(--ui-05);
@@ -394,7 +394,7 @@ export default defineComponent({
 			word-break: break-word;
 		}
 
-		::v-deep .kt-field__input-container {
+		:deep(.kt-field__input-container) {
 			border: 0;
 		}
 	}
diff --git a/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue b/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue
index 88aee03b53..7443d14f8f 100644
--- a/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue
+++ b/packages/kotti-ui/source/kotti-filters/components/FilterRow.vue
@@ -257,7 +257,7 @@ export default defineComponent({
 		}
 	}
 
-	::v-deep .kt-field-select {
+	:deep(.kt-field-select) {
 		margin-bottom: 0;
 	}
 }
diff --git a/packages/kotti-ui/source/kotti-navbar/KtNavbar.vue b/packages/kotti-ui/source/kotti-navbar/KtNavbar.vue
index aeb5acf910..4a2672003c 100644
--- a/packages/kotti-ui/source/kotti-navbar/KtNavbar.vue
+++ b/packages/kotti-ui/source/kotti-navbar/KtNavbar.vue
@@ -284,28 +284,28 @@ $narrow-navbar-width: 3.4rem;
 			justify-content: center;
 		}
 
-		::v-deep .kt-navbar-menu {
-			padding: 0.4rem 0;
+		:deep(.kt-navbar-menu) {
+			padding: 4rem 0;
 			margin: 0.8rem 0.2rem;
 			text-align: center;
 		}
 
-		::v-deep .kt-navbar-notification {
+		:deep(.kt-navbar-notification) {
 			justify-content: center;
 			padding: 0.8rem 0;
+		}
 
-			&__number {
-				position: absolute;
-				right: 0.4rem;
-			}
+		:deep(.kt-navbar-notification__number) {
+			position: absolute;
+			right: 0.4rem;
 		}
 
-		::v-deep .kt-navbar-quick-links {
+		:deep(.kt-navbar-quick-links) {
 			padding: 0.8rem 0;
 			text-align: center;
 		}
 
-		::v-deep .kt-navbar-quick-link {
+		:deep(.kt-navbar-quick-link) {
 			display: block;
 		}
 	}
@@ -361,21 +361,21 @@ $narrow-navbar-width: 3.4rem;
 		}
 	}
 
-	::v-deep .kt-navbar-notification {
+	:deep(.kt-navbar-notification) {
 		display: none;
+	}
 
-		&--mobile {
-			display: block;
-			width: 1.2rem;
-			height: 1.2rem;
-			margin: 0.6rem 0;
-			text-align: center;
-			border: 0;
-			border-radius: 1.2rem;
+	:deep(.kt-navbar-notification--mobile) {
+		display: block;
+		width: 1.2rem;
+		height: 1.2rem;
+		margin: 0.6rem 0;
+		text-align: center;
+		border: 0;
+		border-radius: 1.2rem;
 
-			.yoco {
-				font-size: 1rem;
-			}
+		.yoco {
+			font-size: 1rem;
 		}
 	}
 }
diff --git a/packages/kotti-ui/source/kotti-navbar/components/NavbarLogo.vue b/packages/kotti-ui/source/kotti-navbar/components/NavbarLogo.vue
index ced0683efb..e30e5eb6fe 100644
--- a/packages/kotti-ui/source/kotti-navbar/components/NavbarLogo.vue
+++ b/packages/kotti-ui/source/kotti-navbar/components/NavbarLogo.vue
@@ -72,7 +72,7 @@ $margin: 0.8rem 1rem;
 }
 
 .kt-navbar-logo {
-	::v-deep .yoco {
+	:deep(.yoco) {
 		padding: $margin;
 		font-size: 1.2rem;
 		color: var(--kt-navbar-color-light);
diff --git a/packages/kotti-ui/source/kotti-navbar/components/NavbarQuickLink.vue b/packages/kotti-ui/source/kotti-navbar/components/NavbarQuickLink.vue
index 8daa1de3df..4fbc8a7283 100644
--- a/packages/kotti-ui/source/kotti-navbar/components/NavbarQuickLink.vue
+++ b/packages/kotti-ui/source/kotti-navbar/components/NavbarQuickLink.vue
@@ -76,7 +76,7 @@ export default defineComponent({
 		color: var(--kt-navbar-color-active);
 	}
 
-	::v-deep .yoco {
+	:deep(.yoco) {
 		font-size: 0.8rem;
 	}
 
diff --git a/packages/kotti-ui/source/kotti-table-legacy/KtTableLegacy.vue b/packages/kotti-ui/source/kotti-table-legacy/KtTableLegacy.vue
index 63736397d5..2695835c39 100644
--- a/packages/kotti-ui/source/kotti-table-legacy/KtTableLegacy.vue
+++ b/packages/kotti-ui/source/kotti-table-legacy/KtTableLegacy.vue
@@ -382,7 +382,7 @@ table.kt-table {
 	border-collapse: collapse;
 }
 
-::v-deep table.kt-table tr {
+:deep(table.kt-table tr) {
 	position: relative;
 	margin: 0;
 
@@ -408,7 +408,7 @@ table.kt-table {
 	}
 }
 
-::v-deep table.kt-table td {
+:deep(table.kt-table td) {
 	position: relative;
 	padding: var(--unit-2) var(--unit-1);
 	line-height: 1.2rem;
@@ -420,7 +420,7 @@ table.kt-table {
 	}
 }
 
-::v-deep table.kt-table {
+:deep(table.kt-table) {
 	.expand-toggle,
 	.kt-table__quick-sort-control {
 		i {
@@ -435,7 +435,7 @@ table.kt-table {
 	}
 }
 
-::v-deep table.kt-table .table-actions {
+:deep(table.kt-table .table-actions) {
 	position: absolute;
 	top: 50%;
 	right: 0.8rem;
@@ -468,7 +468,7 @@ table.kt-table {
 	}
 }
 
-::v-deep table.kt-table .form-group {
+:deep(table.kt-table .form-group) {
 	width: 32px;
 	line-height: 0;
 
@@ -477,16 +477,16 @@ table.kt-table {
 	}
 }
 
-::v-deep .kt-table .kt-table__no-row {
+:deep(.kt-table .kt-table__no-row) {
 	color: $lightgray-500;
 	text-align: center;
 }
 
-::v-deep .kt-table .kt-table__loader {
+:deep(.kt-table .kt-table__loader) {
 	text-align: center;
 }
 
-::v-deep .kt-table .loading {
+:deep(.kt-table .loading) {
 	margin: 1.6rem 0;
 	text-align: center;
 }
diff --git a/packages/kotti-ui/source/kotti-table-legacy/style/form-checkbox.scss b/packages/kotti-ui/source/kotti-table-legacy/style/form-checkbox.scss
index 4865be33ce..21e516be1f 100644
--- a/packages/kotti-ui/source/kotti-table-legacy/style/form-checkbox.scss
+++ b/packages/kotti-ui/source/kotti-table-legacy/style/form-checkbox.scss
@@ -4,7 +4,7 @@
  * @deprecated this was moved-over from the old KtCheckbox.vue so
  * that it can be removed without having to touch the table
  */
-table.kt-table ::v-deep .form-checkbox {
+table.kt-table :deep(.form-checkbox) {
 	position: relative;
 	display: inline-block;
 	min-height: 1.2rem;
diff --git a/stylelint.config.js b/stylelint.config.js
index b5d357db48..986c679ca5 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -28,6 +28,12 @@ module.exports = {
 					`"${error}" is not a valid BEM class name (see https://getbem.com/naming/)`,
 			},
 		],
+		'selector-pseudo-class-no-unknown': [
+			true,
+			{
+				ignorePseudoClasses: ['deep'],
+			},
+		],
 		'selector-pseudo-element-no-unknown': [
 			true,
 			{