دعم اللغة العربية بإستخدام rtlcss و vite

ملاحظة هذه الطريقة ستفيد مستخدمين الـvite ولكن قد تعمل على نفس المبدأ بأي طريقة اخرى

1. تحميل rtlcss

npm install rtlcss

2. ثم داخل ملف الـconfig

سنقوم بإرفاق المكتبة كبلغن و بإمكانك تسميته ماتشاء و حتى التعديل على طريقة عمله كمثال ان اردت ان تقوم بعمل نسختين للـcss واحدة من اليمين لليسار والعكس فإمكانك عمل ذلك هنا . هنا يجب عليك ارفاق ملف الـcss المراد تعديل الـrtl الخاص به من طرف المكتبة

// vite.config.js
import { defineConfig } from 'vite'
import rtlcss from 'rtlcss'

export default defineConfig({
  plugins: [
    {
      name: 'custom-postcss-plugin',
      async transform(code, id) {
        const rtlCssFiles = ['resources/css/app.css']

        if (rtlCssFiles.some((file) => id.endsWith(file))) {
          const result = await postcss([rtlcss]).process(code, {
            from: id,
          })
          return {
            code: result.css,
            map: result.map,
          }
        }
        return null
      },
    },
  ],
})

المكتبة تعمل مع جميع مكاتب الستايل مثل tailwindcss & bootstrap يكفي ان ترفق موقع الملف الـcss لتتعامل معه المكتبة .

ما تقوم به المكتبة بالضبط هو اضافة ملف rtl او حسب ماوضعت له في الـconfig . تقوم بتعديل الستايل ليتوافق مع الـ rtl

كمثال:

mr-3 في الـtailwind تعطيني المارجن اليمين ١٢ بكسل او : margin-right: 12px ماستقوم به المكتبة بالضبط هو التالي: margin-left: 12px و الامر سيتطبق مع جميع الطرق