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

2 weeks ago · 0f4ac56ec7
parent f3885aa7c3
commit 0f4ac56ec7
15 changed files with 48 additions and 44 deletions
--- a/tests/e2e/.vitepress/theme/components/ApiPreference.vue
+++ b/tests/e2e/.vitepress/theme/components/ApiPreference.vue
@ -50,11 +50,11 @@ 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 {
--- a/docs/components/ModalDemo.vue
+++ b/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);
--- a/docs/ru/components/ModalDemo.vue
+++ b/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);
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@ -134,7 +134,7 @@ const pageName = computed(() =>

 .aside-container {
  position: fixed;
-  top: 0;
+  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;
@ -149,7 +149,7 @@ const pageName = computed(() =>

 .aside-curtain {
  position: fixed;
-  bottom: 0;
+  inset-block-end: 0;
  z-index: 10;
  width: 224px;
  height: 32px;
--- a/src/client/theme-default/components/VPDocAsideOutline.vue
+++ b/src/client/theme-default/components/VPDocAsideOutline.vue
@ -58,8 +58,8 @@ useActiveAnchor(container, marker)

 .outline-marker {
  position: absolute;
-  top: 32px;
-  left: -1px;
+  inset-block-start: 32px;
+  inset-inline-start: -1px;
  z-index: 0;
  opacity: 0;
  width: 2px;
@ -67,7 +67,7 @@ useActiveAnchor(container, marker)
  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;
 }
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@ -128,8 +128,8 @@ function onBlur() {

 .menu {
  position: absolute;
-  top: calc(var(--vp-nav-height) / 2 + 20px);
-  right: 0;
+  inset-block-start: calc(var(--vp-nav-height) / 2 + 20px);
+  inset-inline-end: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
--- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
@ -136,7 +136,7 @@ function scrollToTop() {

 .items {
  position: absolute;
-  top: 40px;
+  inset-block-start: 40px;
  inset-inline: 16px;
  display: grid;
  gap: 1px;
@ -150,8 +150,8 @@ function scrollToTop() {

@media (min-width: 960px) {
  .items {
-    right: auto;
-    left: calc(var(--vp-sidebar-width) + 32px);
+    inset-inline-end: auto;
+    inset-inline-start: calc(var(--vp-sidebar-width) + 32px);
    width: 320px;
  }
 }
--- a/src/client/theme-default/components/VPLocalSearchBox.vue
+++ b/src/client/theme-default/components/VPLocalSearchBox.vue
@ -842,8 +842,8 @@ function onMouseMove(e: MouseEvent) {

 .excerpt-gradient-bottom {
  position: absolute;
-  bottom: -1px;
-  left: 0;
+  inset-block-end: -1px;
+  inset-inline-start: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(transparent, var(--vp-local-search-result-bg));
@ -852,8 +852,8 @@ function onMouseMove(e: MouseEvent) {

 .excerpt-gradient-top {
  position: absolute;
-  top: -1px;
-  left: 0;
+  inset-block-start: -1px;
+  inset-inline-start: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(var(--vp-local-search-result-bg), transparent);
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@ -145,8 +145,8 @@ watchPostEffect(() => {
@media (min-width: 960px) {
  .VPNavBar.has-sidebar .title {
    position: absolute;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
    z-index: 2;
    padding: 0 32px;
    width: var(--vp-sidebar-width);
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@ -67,9 +67,9 @@ watch(
 <style scoped>
 .VPSidebar {
  position: fixed;
-  top: var(--vp-layout-top-height, 0px);
-  bottom: 0;
-  left: 0;
+  inset-block-start: var(--vp-layout-top-height, 0px);
+  inset-block-end: 0;
+  inset-inline-start: 0;
  z-index: var(--vp-z-index-sidebar);
  padding: 32px 32px 96px;
  width: calc(100vw - 64px);
@ -119,8 +119,8 @@ watch(
@media (min-width: 960px) {
  .curtain {
    position: sticky;
-    top: calc(var(--vp-nav-height) * -1);
-    left: 0;
+    inset-block-start: calc(var(--vp-nav-height) * -1);
+    inset-inline-start: 0;
    z-index: 1;
    margin-block-start: calc(var(--vp-nav-height) * -1);
    margin-inline-end: -32px;
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@ -128,9 +128,9 @@ function onCaretClick() {

 .indicator {
  position: absolute;
-  top: 6px;
-  bottom: 6px;
-  left: -17px;
+  inset-block-start: 6px;
+  inset-block-end: 6px;
+  inset-inline-start: -17px;
  width: 2px;
  border-radius: 2px;
  transition: background-color 0.25s;
@ -232,7 +232,11 @@ function onCaretClick() {
 }

 .VPSidebarItem.collapsed .caret-icon {
-  scale: calc(1 * var(--vp-direction-multiplier)) 1; /* Flip in RTL */
+  transform: rotate(0);
+}
+
+[dir="rtl"] .VPSidebarItem.collapsed .caret-icon {
+  transform: rotate(180deg);
 }

 .VPSidebarItem.level-1 .items,
--- a/src/client/theme-default/components/VPSkipLink.vue
+++ b/src/client/theme-default/components/VPSkipLink.vue
@ -20,8 +20,8 @@ watch(() => route.path, () => backToTop.value.focus())
 <style scoped>
 .VPSkipLink {
  position: fixed;
-  top: 8px;
-  left: 8px;
+  inset-block-start: 8px;
+  inset-inline-start: 8px;
  padding: 8px 16px;
  z-index: 999;
  border-radius: 8px;
@ -42,8 +42,8 @@ watch(() => route.path, () => backToTop.value.focus())

@media (min-width: 1280px) {
  .VPSkipLink {
-    top: 14px;
-    left: 16px;
+    inset-block-start: 14px;
+    inset-inline-start: 16px;
  }
 }
 </style>
--- a/src/client/theme-default/components/VPTeamPageSection.vue
+++ b/src/client/theme-default/components/VPTeamPageSection.vue
@ -42,8 +42,8 @@

 .title-line {
  position: absolute;
-  top: 16px;
-  left: 0;
+  inset-block-start: 16px;
+  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background-color: var(--vp-c-divider);
--- a/src/client/theme-default/styles/components/vp-code-group.css
+++ b/src/client/theme-default/styles/components/vp-code-group.css
@ -42,9 +42,9 @@

 .vp-code-group .tabs label::after {
  position: absolute;
-  right: 8px;
-  bottom: -1px;
-  left: 8px;
+  inset-inline-end: 8px;
+  inset-block-end: -1px;
+  inset-inline-start: 8px;
  z-index: 1;
  height: 2px;
  border-radius: 2px;
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@ -44,8 +44,8 @@

 .vp-doc .header-anchor {
  position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
  margin-inline-start: -0.87em;
  font-weight: 500;
  user-select: none;
@ -84,7 +84,7 @@
 }

 .vp-doc h2 .header-anchor {
-  top: 24px;
+  inset-block-start: 24px;
 }

 /**
@ -358,7 +358,7 @@

 .vp-doc [class*='language-'] code .diff::before {
  position: absolute;
-  left: 10px;
+  inset-inline-start: 10px;
 }

 .vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {