Merge pull request #1001 from 3YOURMIND/migrate-deep-selectors

chore(style): migrate from ::v-deep (vue2.x) to :deep() (vue3)

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);

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;

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;
 		}
 	}

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;
 	}
 }

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;
 		}
 	}
 }

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);

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;
 	}
 

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;
 }

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;

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,
 			{