Enhanced RTL support

__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

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

docs/en/guide/i18n.md

@@ -108,4 +108,4 @@ watchEffect(() => {
 
 ## RTL Support (Experimental)
 
-For RTL support, specify `dir: 'rtl'` in config and use some RTLCSS PostCSS plugin like <https://github.com/MohammadYounes/rtlcss>, <https://github.com/vkalinichev/postcss-rtl> or <https://github.com/elchininet/postcss-rtlcss>. You'll need to configure your PostCSS plugin to use `:where([dir="ltr"])` and `:where([dir="rtl"])` as prefixes to prevent CSS specificity issues.
+For RTL support, specify `dir: 'rtl'` in config.

docs/package.json

@@ -13,7 +13,6 @@
     "@lunariajs/core": "^0.1.1",
     "markdown-it-mathjax3": "^4.3.2",
     "open-cli": "^8.0.0",
-    "postcss-rtlcss": "^5.7.1",
     "vitepress": "workspace:*",
     "vitepress-plugin-group-icons": "^1.6.5",
     "vitepress-plugin-llms": "^1.9.3"

docs/ru/components/ModalDemo.vue

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

src/client/theme-default/Layout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, provide, useSlots } from 'vue'
+import { computed, provide, useSlots, watchEffect } from 'vue'
 import VPBackdrop from './components/VPBackdrop.vue'
 import VPContent from './components/VPContent.vue'
 import VPFooter from './components/VPFooter.vue'
@@ -17,14 +17,21 @@ const {
   close: closeSidebar
 } = useSidebarControl()
 
-registerWatchers({ closeSidebar })
-
 const { frontmatter } = useData()
+const data = useData()
+
+registerWatchers({ closeSidebar })
 
 const slots = useSlots()
 const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
 
 provide(layoutInfoInjectionKey, { heroImageSlotExists })
+
+watchEffect(() => {
+  if (typeof window !== 'undefined') {
+    document.documentElement.dir = data.site.value.dir
+  }
+})
 </script>
 
 <template>

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;

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

@@ -82,14 +82,14 @@ const { isHome, hasSidebar } = useLayout()
 
   .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,15 +121,15 @@ 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 {

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

@@ -50,16 +50,16 @@ 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-inline-start: -1px;
   z-index: 0;
   opacity: 0;
   width: 2px;

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

@@ -112,7 +112,7 @@ const showFooter = computed(
 }
 
 .edit-link-icon {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 
 .prev-next {
@@ -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/VPDocFooterLastUpdated.vue

@@ -40,7 +40,7 @@ onMounted(() => {
 <template>
   <p class="VPLastUpdated">
     {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
-    <time ref="timeRef" :datetime="isoDatetime">{{ datetime }}</time>
+    <time dir="auto" ref="timeRef" :datetime="isoDatetime">{{ datetime }}</time>
   </p>
 </template>
 
@@ -59,4 +59,8 @@ onMounted(() => {
     font-weight: 500;
   }
 }
+
+time {
+  unicode-bidi: isolate;
+}
 </style>

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

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

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

@@ -45,7 +45,7 @@ defineProps<{
 
       <div v-if="linkText" class="link-text">
         <p class="link-text-value">
-          {{ linkText }} <span class="vpi-arrow-right link-text-icon" />
+          {{ linkText }} <span class="vpi-arrow-right link-text-icon vp-icon-directional" />
         </p>
       </div>
     </article>
@@ -118,6 +118,6 @@ defineProps<{
 }
 
 .link-text-icon {
-  margin-left: 6px;
+  margin-inline-start: 6px;
 }
 </style>

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

@@ -112,12 +112,12 @@ function onBlur() {
 }
 
 .option-icon {
-  margin-right: 0px;
+  margin-inline-end: 0px;
   font-size: 16px;
 }
 
 .text-icon {
-  margin-left: 4px;
+  margin-inline-start: 4px;
   font-size: 14px;
 }
 
@@ -129,7 +129,7 @@ function onBlur() {
 .menu {
   position: absolute;
   top: calc(var(--vp-nav-height) / 2 + 20px);
-  right: 0;
+  inset-inline-end: 0;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.25s, visibility 0.25s, transform 0.25s;

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

@@ -111,7 +111,7 @@ const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
 
 @media (min-width: 960px) {
   .VPHero.has-image .container {
-    text-align: left;
+    text-align: start;
   }
 }
 

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

@@ -39,8 +39,7 @@ const { width: vw } = useWindowSize({
 
 .vp-doc :deep(.VPHomeSponsors),
 .vp-doc :deep(.VPTeamPage) {
-  margin-left: var(--vp-offset, calc(50% - 50vw));
-  margin-right: var(--vp-offset, calc(50% - 50vw));
+  margin-inline: var(--vp-offset, calc(50% - 50vw));
 }
 
 .vp-doc :deep(.VPHomeSponsors h2) {

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

@@ -84,7 +84,7 @@ const classes = computed(() => {
   }
 
   .VPLocalNav.has-sidebar {
-    padding-left: var(--vp-sidebar-width);
+    padding-inline-start: var(--vp-sidebar-width);
   }
 
   .VPLocalNav.empty {
@@ -126,7 +126,7 @@ const classes = computed(() => {
 }
 
 .menu-icon {
-  margin-right: 8px;
+  margin-inline-end: 8px;
   font-size: 14px;
 }