feat(theme): add rtlcss directive

[sadeghbarati]

https://vitepress-rtlcss.vercel.app/

This is just simple rtlcss directive

Still requires to User to add rtlcss as their devDependencies and use it in vitepress config,
Because it has not been implemented in node folder

// .vitepress/config

import { defineConfig } from 'vitepress'
import rtlcss from 'rtlcss'

export default defineConfig({
  lang: 'en-US',
  title: 'VitePress',
  description: 'Vite & Vue powered static site generator.',
  
  vite: {
    postcss: {
      plugins: [
        rtlcss()
      ]
    }
  }
})

---

I saw i18n and i18n-next branch for handling dir and lang options and other feats,

If you add dir frontmatter would be so good, documentation sites support both RTL and LTR at the same time

page-rtl.md

---
dir: 'rtl'
---

RTL Content

page-ltr.md

---
dir: 'ltr'
---

LTR Content

[brc-dd]

If you add dir frontmatter would be so good, documentation sites support both RTL and LTR at the same time.

I can add that, but I don't think it will be necessary as the current implementation (i18n-next) already allows overriding dir based on locale. So, if you have some structure like this:

- foo.md
- fa/
--- foo.md

in your config you can override dir and lang for whole fa/ directory. This way /foo can serve pages with ltr direction and fa/foo can serve pages in rtl direction at the same time.

---

Regarding your PR, I don't have much experience, so if someone can confirm this works fine (or if you can provide a demo/screen rec. with an rtl page) I'll merge it. (sorry, I didn't saw the link at the very top, I'll review it now).

[brc-dd]

x-ref: #631, #902

---

@xfq, @fvsch Hi guys! Can you take a look if this sorts out issues with the RTL layout, and point out if something seems missing?

[xfq]

"K⌘" in the search bar should be "⌘K" (on macOS). The same for other operating systems.

I didn't see any other obvious problems, but I think it would be useful to have an Arabic/Hebrew/etc.-speaking expert double-check the page and/or the code.

[brc-dd]

I'm merging this with i18n(-next) branch for now. We can tackle other issues directly on #1339.

Regarding documenting both ltr and rtl in the same app, there will be some issues as the styles will be shared, so if you add the rtlcss postcss plugin, the styles for ltr pages will also change.

[brc-dd]

there will be some issues as the styles will be shared

Regarding this, I wanted to ask are you using override mode in postcss-rtlcss (at https://vitepress-rtlcss.vercel.app/)? Because according to its docs, the default is the combined mode, where ltr and rtl styles are separate (prefixed). I'm guessing that it somehow messes up with the specificity of selectors?

[sadeghbarati]

Hi,
as I mentioned before I'm using rtlcss not postcss-rtl, rtlcss package will transforms all styles from RTL to LTR or vice versa

rtlcss:

/* before */
body {
  direction: ltr;
}
/* after */
body {
  direction: rtl;
}

---

but postcss-rtl will generate another style besides of ltr or rtl style, It can increase the size of CSS and also change selectors specificity

postcss-rtl:

/* before */
body {
  direction: ltr;
}
/* after */
body {
  direction: ltr;
}
[dir="rtl"] body {
   direction: rtl;
}

[sadeghbarati]

I didn't check the vitepress node folder completely

vitepress/src/node/build/render.ts

Lines 103 to 105 in 12ca9dd

	const stylesheetLink = cssChunk
	? `<link rel="stylesheet" href="${siteData.base}${cssChunk.fileName}">`
	: ''

When you are using rtlcss you have to generate CSS two times (.vitepress/dist/assets), one for ltr without any rtlcss proccess (style.********.css) and another with rtlcss (style-rtl.********.css)

since vitepress is SSR I thought it can handle two stylesheets based on locale directories

- foo.md => load ltr stylesheet
- fa/
--- foo.md => load rtl stylesheet

[brc-dd]

as I mentioned before I'm using rtlcss not postcss-rtl

Ah, right. I was actually looking at the docs of https://www.npmjs.com/package/postcss-rtlcss

change selectors specificity

Yeah, that's what I was thinking.

since vitepress is SSR I thought it can handle two stylesheets based on locale directories

I can make it work, but it will need a full page reload for styles to apply.

[sadeghbarati]

I can make it work, but it will need a full page reload for styles to apply

Ow you're right I thought it would work

I think CSS Logical Properties is the propper way to achieve i18n goal then, however support table is colorful 😵

[brc-dd]

On second thoughts, we can use :where([dir="rtl"]) as the prefix, it will keep the specificity same, and apply appropriate styles when the page is rtl.