From 1420b95629199a889afd0a737b9940a798985e95 Mon Sep 17 00:00:00 2001
From: Henry Bley-Vroman <olets@olets.dev>
Date: Wed, 15 May 2024 12:22:00 -1000
Subject: [PATCH] refactor(VPSidebarItem): use :where() to reduce css weight
 [#3806]

---
 .../components/VPSidebarItem.vue              | 46 ++++---------------
 1 file changed, 8 insertions(+), 38 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index e33ab4ab..c70d03b8 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -151,10 +151,8 @@ const classes = computed(() => [
   transition: background-color 0.25s;
 }
 
-.VPSidebarItem.level-2.is-active > .item > .indicator,
-.VPSidebarItem.level-3.is-active > .item > .indicator,
-.VPSidebarItem.level-4.is-active > .item > .indicator,
-.VPSidebarItem.level-5.is-active > .item > .indicator {
+
+.VPSidebarItem:is(.level-2, .level-3, .level-4, .level-5).is-active > .item > .indicator {
   background-color: var(--vp-c-brand-1);
 }
 
@@ -177,39 +175,15 @@ const classes = computed(() => [
   color: var(--vp-c-text-1);
 }
 
-.VPSidebarItem.level-1 .text,
-.VPSidebarItem.level-2 .text,
-.VPSidebarItem.level-3 .text,
-.VPSidebarItem.level-4 .text,
-.VPSidebarItem.level-5 .text {
+.VPSidebarItem:is(.level-1, .level-2, .level-3, .level-4, .level-5) .text {
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
-.VPSidebarItem.level-0.is-active > .item > summary .text,
-.VPSidebarItem.level-1.is-active > .item > summary .text,
-.VPSidebarItem.level-2.is-active > .item > summary .text,
-.VPSidebarItem.level-3.is-active > .item > summary .text,
-.VPSidebarItem.level-4.is-active > .item > summary .text,
-.VPSidebarItem.level-5.is-active > .item > summary .text,
-.VPSidebarItem.level-0.is-active > .item > .link > .text,
-.VPSidebarItem.level-1.is-active > .item > .link > .text,
-.VPSidebarItem.level-2.is-active > .item > .link > .text,
-.VPSidebarItem.level-3.is-active > .item > .link > .text,
-.VPSidebarItem.level-4.is-active > .item > .link > .text,
-.VPSidebarItem.level-5.is-active > .item > .link > .text,
-.VPSidebarItem.level-0 .link:hover >.text,
-.VPSidebarItem.level-1 .link:hover >.text,
-.VPSidebarItem.level-2 .link:hover >.text,
-.VPSidebarItem.level-3 .link:hover >.text,
-.VPSidebarItem.level-4 .link:hover >.text,
-.VPSidebarItem.level-5 .link:hover >.text,
-.VPSidebarItem.level-0 .link:focus >.text,
-.VPSidebarItem.level-1 .link:focus >.text,
-.VPSidebarItem.level-2 .link:focus >.text,
-.VPSidebarItem.level-3 .link:focus >.text,
-.VPSidebarItem.level-4 .link:focus >.text,
-.VPSidebarItem.level-5 .link:focus >.text {
+.VPSidebarItem.is-active:is(.level-0, .level-1, .level-2, .level-3, .level-4, .level-5)  > .item > summary .text,
+.VPSidebarItem.is-active:is(.level-0, .level-1, .level-2, .level-3, .level-4, .level-5)  > .item > .link > .text,
+.VPSidebarItem:is(.level-0, .level-1, .level-2, .level-3, .level-4, .level-5) .link:hover >.text,
+.VPSidebarItem:is(.level-0, .level-1, .level-2, .level-3, .level-4, .level-5) .link:focus >.text {
   color: var(--vp-c-brand-1);
 }
 
@@ -244,11 +218,7 @@ const classes = computed(() => [
   transform: rotate(0);
 }
 
-.VPSidebarItem.level-1 .items,
-.VPSidebarItem.level-2 .items,
-.VPSidebarItem.level-3 .items,
-.VPSidebarItem.level-4 .items,
-.VPSidebarItem.level-5 .items {
+.VPSidebarItem:is(.level-1, .level-2, .level-3, .level-4, .level-5) .items {
   border-left: 1px solid var(--vp-c-divider);
   padding-left: 16px;
 }