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

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

@@ -50,15 +50,16 @@ function removeSpaces(str: string) {
 }
 
 .VPApiPreference:first-child {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 .VPApiPreference:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 
 .VPApiPreference.screen-menu {
-  margin: 12px 0 0 12px;
+  margin-block: 12px 0;
+  margin-inline: 12px 0;
 }
 
 .VPApiPreference input[type='radio'] {

__tests__/unit/node/markdown/plugins/snippet.test.ts

@@ -208,16 +208,16 @@ describe('node/markdown/plugins/snippet', () => {
       const lines = [
         '.body-content {',
         '/* #region foo */',
-        '  padding-left: 15px;',
+        '  padding-inline-start: 15px;',
         '/* #endregion foo */',
-        '  padding-right: 15px;',
+        '  padding-inline-end: 15px;',
         '}'
       ]
       const result = findRegion(lines, 'foo')
       expect(result).not.toBeNull()
       if (result) {
         expect(lines.slice(result.start, result.end).join('\n')).toBe(
-          '  padding-left: 15px;'
+          '  padding-inline-start: 15px;'
         )
       }
     })

docs/components/ModalDemo.vue

@@ -26,8 +26,8 @@ const showModal = ref(false)
 .modal-mask {
   position: fixed;
   z-index: 200;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
@@ -48,8 +48,8 @@ const showModal = ref(false)
 }
 
 .model-footer {
-  margin-top: 8px;
-  text-align: right;
+  margin-block-start: 8px;
+  text-align: end;
 }
 
 .modal-button {

docs/ru/components/ModalDemo.vue

@@ -28,8 +28,8 @@ const showModal = ref(false)
 .modal-mask {
   position: fixed;
   z-index: 200;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
@@ -50,8 +50,8 @@ const showModal = ref(false)
 }
 
 .model-footer {
-  margin-top: 8px;
-  text-align: right;
+  margin-block-start: 8px;
+  text-align: end;
 }
 
 .modal-button {

src/client/theme-default/NotFound.vue

@@ -50,7 +50,7 @@ const { currentLang } = useLangs()
 }
 
 .title {
-  padding-top: 12px;
+  padding-block-start: 12px;
   letter-spacing: 2px;
   line-height: 20px;
   font-size: 20px;
@@ -73,7 +73,7 @@ const { currentLang } = useLangs()
 }
 
 .action {
-  padding-top: 20px;
+  padding-block-start: 20px;
 }
 
 .link {

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

@@ -13,12 +13,7 @@ defineProps<{
 <style scoped>
 .VPBackdrop {
   position: fixed;
-  top: 0;
-  /*rtl:ignore*/
-  right: 0;
-  bottom: 0;
-  /*rtl:ignore*/
-  left: 0;
+  inset: 0;
   z-index: var(--vp-z-index-backdrop);
   background: var(--vp-backdrop-bg-color);
   transition: opacity 0.5s;

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

@@ -17,7 +17,7 @@ withDefaults(defineProps<Props>(), {
 <style>
 .VPBadge {
   display: inline-block;
-  margin-left: 2px;
+  margin-inline-start: 2px;
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 0 10px;
@@ -40,12 +40,12 @@ withDefaults(defineProps<Props>(), {
 }
 
 .vp-doc h1 > .VPBadge {
-  margin-top: 4px;
+  margin-block-start: 4px;
   vertical-align: top;
 }
 
 .vp-doc h2 > .VPBadge {
-  margin-top: 3px;
+  margin-block-start: 3px;
   padding: 0 8px;
   vertical-align: top;
 }

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

@@ -76,7 +76,7 @@ if (carbonOptions) {
 .VPCarbonAds :deep(.carbon-text) {
   display: block;
   margin: 0 auto;
-  padding-top: 12px;
+  padding-block-start: 12px;
   color: var(--vp-carbon-ads-text-color);
   transition: color 0.25s;
 }
@@ -87,7 +87,7 @@ if (carbonOptions) {
 
 .VPCarbonAds :deep(.carbon-poweredby) {
   display: block;
-  padding-top: 6px;
+  padding-block-start: 6px;
   font-size: 11px;
   font-weight: 500;
   color: var(--vp-carbon-ads-poweredby-color);

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

@@ -77,19 +77,19 @@ const { isHome, hasSidebar } = useLayout()
 
 @media (min-width: 960px) {
   .VPContent {
-    padding-top: var(--vp-nav-height);
+    padding-block-start: var(--vp-nav-height);
   }
 
   .VPContent.has-sidebar {
     margin: var(--vp-layout-top-height, 0px) 0 0;
-    padding-left: var(--vp-sidebar-width);
+    padding-inline-start: var(--vp-sidebar-width);
   }
 }
 
 @media (min-width: 1440px) {
   .VPContent.has-sidebar {
-    padding-right: calc((100% - var(--vp-layout-max-width)) / 2);
-    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    padding-inline-end: calc((100% - var(--vp-layout-max-width)) / 2);
+    padding-inline-start: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
 }
 </style>

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

@@ -121,21 +121,21 @@ const pageName = computed(() =>
   display: none;
   order: 2;
   flex-grow: 1;
-  padding-left: 32px;
+  padding-inline-start: 32px;
   width: 100%;
   max-width: 256px;
 }
 
 .left-aside {
   order: 1;
-  padding-left: unset;
-  padding-right: 32px;
+  padding-inline-start: unset;
+  padding-inline-end: 32px;
 }
 
 .aside-container {
   position: fixed;
-  top: 0;
-  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
+  inset-block-start: 0;
+  padding-block-start: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);
   width: 224px;
   height: 100vh;
   overflow-x: hidden;
@@ -149,7 +149,7 @@ const pageName = computed(() =>
 
 .aside-curtain {
   position: fixed;
-  bottom: 0;
+  inset-block-end: 0;
   z-index: 10;
   width: 224px;
   height: 32px;
@@ -161,7 +161,7 @@ const pageName = computed(() =>
   display: flex;
   flex-direction: column;
   min-height: calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));
-  padding-bottom: 32px;
+  padding-block-end: 32px;
 }
 
 .content {

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

@@ -37,10 +37,10 @@ const { theme } = useData()
 
 .VPDocAside :deep(.spacer + .VPDocAsideSponsors),
 .VPDocAside :deep(.spacer + .VPDocAsideCarbonAds) {
-  margin-top: 24px;
+  margin-block-start: 24px;
 }
 
 .VPDocAside :deep(.VPDocAsideSponsors + .VPDocAsideCarbonAds) {
-  margin-top: 16px;
+  margin-block-start: 16px;
 }
 </style>

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

@@ -50,24 +50,24 @@ useActiveAnchor(container, marker)
 
 .content {
   position: relative;
-  border-left: 1px solid var(--vp-c-divider);
-  padding-left: 16px;
+  border-inline-start: 1px solid var(--vp-c-divider);
+  padding-inline-start: 16px;
   font-size: 13px;
   font-weight: 500;
 }
 
 .outline-marker {
   position: absolute;
-  top: 32px;
-  left: -1px;
+  inset-block-start: 32px;
+  inset-inline-start: -1px;
   z-index: 0;
   opacity: 0;
   width: 2px;
   border-radius: 2px;
   height: 18px;
   background-color: var(--vp-c-brand-1);
   transition:
-    top 0.25s cubic-bezier(0, 1, 0.5, 1),
+    inset-block-start 0.25s cubic-bezier(0, 1, 0.5, 1),
     background-color 0.5s,
     opacity 0.25s;
 }

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

@@ -80,19 +80,19 @@ const showFooter = computed(
 
 <style scoped>
 .VPDocFooter {
-  margin-top: 64px;
+  margin-block-start: 64px;
 }
 
 .edit-info {
-  padding-bottom: 18px;
+  padding-block-end: 18px;
 }
 
 @media (min-width: 640px) {
   .edit-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 14px;
+    padding-block-end: 14px;
   }
 }
 
@@ -112,12 +112,12 @@ const showFooter = computed(
 }
 
 .edit-link-icon {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 
 .prev-next {
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
+  border-block-start: 1px solid var(--vp-c-divider);
+  padding-block-start: 24px;
   display: grid;
   grid-row-gap: 8px;
 }
@@ -144,8 +144,8 @@ const showFooter = computed(
 }
 
 .pager-link.next {
-  margin-left: auto;
-  text-align: right;
+  margin-inline-start: auto;
+  text-align: end;
 }
 
 .desc {

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

@@ -27,8 +27,8 @@ defineProps<{
 }
 
 .nested {
-  padding-right: 16px;
-  padding-left: 16px;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
 }
 
 .outline-link {
@@ -50,6 +50,6 @@ defineProps<{
 }
 
 .outline-link.nested {
-  padding-left: 13px;
+  padding-inline-start: 13px;
 }
 </style>

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

@@ -74,14 +74,14 @@ defineProps<{
 }
 
 .box > :deep(.VPImage) {
-  margin-bottom: 20px;
+  margin-block-end: 20px;
 }
 
 .icon {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 20px;
+  margin-block-end: 20px;
   border-radius: 6px;
   background-color: var(--vp-c-default-soft);
   width: 48px;
@@ -98,15 +98,15 @@ defineProps<{
 
 .details {
   flex-grow: 1;
-  padding-top: 8px;
+  padding-block-start: 8px;
   line-height: 24px;
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 .link-text {
-  padding-top: 8px;
+  padding-block-start: 8px;
 }
 
 .link-text-value {
@@ -118,6 +118,6 @@ defineProps<{
 }
 
 .link-text-icon {
-  margin-left: 6px;
+  margin-inline-start: 6px;
 }
 </style>