feat(theme): use native CSS for RTL instead of using `rtlcss` package

__tests__/e2e/.vitepress/theme/components/ApiPreference.vue

@@ -58,7 +58,8 @@ function removeSpaces(str: string) {
 }
 
 .VPApiPreference.screen-menu {
-  margin: 12px 0 0 12px;
+  margin-block: 12px 0;
+  margin-inline: 12px 0;
 }
 
 .VPApiPreference input[type='radio'] {

src/client/theme-default/components/VPNavBar.vue

@@ -97,7 +97,8 @@ watchPostEffect(() => {
 }
 
 .wrapper {
-  padding: 0 8px 0 24px;
+  padding-block: 0;
+  padding-inline: 24px 8px;
 }
 
 @media (min-width: 768px) {

src/client/theme-default/components/VPNavBarExtra.vue

@@ -80,7 +80,8 @@ const hasExtraContent = computed(
 }
 
 .trans-title {
-  padding: 0 24px 0 12px;
+  padding-block: 0;
+  padding-inline: 12px 24px;
   line-height: 32px;
   font-size: 14px;
   font-weight: 700;

src/client/theme-default/components/VPNavBarTranslations.vue

@@ -38,7 +38,8 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
 }
 
 .title {
-  padding: 0 24px 0 12px;
+  padding-block: 0;
+  padding-inline: 12px 24px;
   line-height: 32px;
   font-size: 14px;
   font-weight: 700;

src/client/theme-default/components/VPNavScreenAppearance.vue

@@ -27,7 +27,8 @@ const { site, theme } = useData()
   justify-content: space-between;
   align-items: center;
   border-radius: 8px;
-  padding: 12px 14px 12px 16px;
+  padding-block: 12px;
+  padding-inline: 16px 14px;
   background-color: var(--vp-c-bg-soft);
 }
 

src/client/theme-default/components/VPNavScreenMenuGroup.vue

@@ -76,14 +76,16 @@ function toggle() {
 }
 
 .VPNavScreenMenuGroup.open .button-icon {
-  transform: rotate(calc(45deg * var(--vp-direction-multiplier)));
+  /*rtl:ignore*/
+  transform: rotate(45deg)
 }
 
 .button {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 4px 11px 0;
+  padding-block: 12px 11px;
+  padding-inline: 0 4px;
   width: 100%;
   line-height: 24px;
   font-size: 14px;

src/client/theme-default/components/VPNavScreenTranslations.vue

@@ -69,7 +69,8 @@ function toggle() {
 }
 
 .list {
-  padding: 4px 0 0 24px;
+  padding-block: 4px 0;
+  padding-inline: 24px 0;
 }
 
 .link {

src/client/theme-default/components/VPSidebar.vue

@@ -79,7 +79,8 @@ watch(
   box-shadow: var(--vp-c-shadow-3);
   overflow-x: hidden;
   overflow-y: auto;
-  transform: translateX(-100%);
+  /*rtl:ignore*/
+  transform: translateX(calc(-100% * var(--vp-direction-multiplier)));
   transition: opacity 0.5s, transform 0.25s ease;
   overscroll-behavior: contain;
 }

src/client/theme-default/styles/components/vp-code-group.css

@@ -16,7 +16,10 @@
 @media (min-width: 640px) {
   .vp-code-group .tabs {
     margin-inline: 0;
-    border-radius: 8px 8px 0 0;
+    border-start-start-radius: 8px;
+    border-start-end-radius: 8px;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
   }
 }
 

src/client/theme-default/styles/components/vp-doc.css

@@ -237,7 +237,10 @@
 
 .vp-doc .custom-block .vp-code-group .tabs {
   margin: 0;
-  border-radius: 8px 8px 0 0;
+  border-start-start-radius: 8px;
+  border-start-end-radius: 8px;
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
 }
 
 /**
@@ -293,7 +296,10 @@
 
 @media (max-width: 639px) {
   .vp-doc li div[class*='language-'] {
-    border-radius: 8px 0 0 8px;
+    border-start-start-radius: 8px;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: 8px;
   }
 }
 
@@ -464,8 +470,10 @@
 
 .vp-doc [class*='language-'] > button.copy.copied,
 .vp-doc [class*='language-'] > button.copy:hover.copied {
-  /*rtl:ignore*/
-  border-radius: 0 4px 4px 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
+  border-end-start-radius: 0;
   background-color: var(--vp-code-copy-code-hover-bg);
   background-image: var(--vp-icon-copied);
 }
@@ -482,7 +490,10 @@
   border: 1px solid var(--vp-code-copy-code-hover-border-color);
   /*rtl:ignore*/
   border-right: 0;
-  border-radius: 4px 0 0 4px;
+  border-start-start-radius: 4px;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: 4px;
   padding: 0 10px;
   width: fit-content;
   height: 40px;