Layout RTL dan Build rtlcss

Halaman RTL memakai stylesheet hasil rtlcss, bukan sumber SCSS untuk app dan app-dark. src/layouts/rtl.html memuat assets/compiled/css/app.rtl.css dan assets/compiled/css/app-dark.rtl.css src/layouts/rtl.html:9-10¹, sedangkan layout lain memuat assets/scss/app.scss dan assets/scss/themes/dark/app-dark.scss src/layouts/master.html:9-10². Hanya dua baris <link> itu yang membedakan keduanya; browser tidak perlu tahu apa pun soal arah tulisan karena kelas CSS-nya sudah dibalik sebelum dikirim.

Kedua berkas .rtl.css bukan bagian dari repository. Pola dist/* diabaikan .gitignore .gitignore:13, jadi berkas itu hanya ada setelah build berjalan dan langkah rtl selesai.

Halaman yang memakai layout RTL

src/layout-rtl.html menyetel title = 'RTL Dashboard' dan filename = 'layout-rtl.html', lalu {% extends 'src/layouts/rtl.html' %} src/layout-rtl.html:1-4³. Block styles diisi iconly.scss src/layout-rtl.html:6-8⁴. Berkas src/layout-rtl-backup.html memperluas layout yang sama, tetapi menyetel filename = 'index.html' src/layout-rtl-backup.html:1-4⁵. Dari keduanya, hanya layout-rtl.html yang terdaftar di submenu Layouts src/sidebar-items.json:150-153⁶.

Nama berkas [name].css di assets/compiled/css/ ditentukan oleh assetFileNames di vite.config.js vite.config.js:163-172⁷; rangkaian build lengkapnya dibahas di Alur Build Vite dan Nunjucks.

Script rtl dan alur rtlcss

rtlcss terpasang sebagai dependency versi ^4.0.0 package.json:63⁸. Script rtl menjalankan rtlcss -d "dist/assets/compiled/css" -e ".rtl.css", lalu find . -type f -name '*.rtl.rtl.css' -delete package.json:10⁹. Opsi -d menunjuk satu direktori yang diproses seluruhnya dan -e menentukan akhiran berkas keluaran, sehingga app.css menghasilkan app.rtl.css serta app-dark.css menghasilkan app-dark.rtl.css di direktori yang sama.

graph TD
  S["src/assets/scss/app.scss dan themes/dark/app-dark.scss"]
  B["npm run build"]
  C["dist/assets/compiled/css/app.css dan app-dark.css"]
  R["npm run rtl: rtlcss -d dist/assets/compiled/css -e .rtl.css"]
  O["app.rtl.css dan app-dark.rtl.css"]
  X["app.rtl.rtl.css sisa jalur kedua"]
  D["find . -type f -name '*.rtl.rtl.css' -delete"]
  H["src/layouts/rtl.html"]
  P["src/layout-rtl.html"]
  S --> B
  B --> C
  C --> R
  R --> O
  C --> X
  R --> X
  X --> D
  O --> H
  H --> P
  style C fill:#2d7d46,color:#fff
  style O fill:#8b5cf6,color:#fff
  style X fill:#dc2626,color:#fff
  style D fill:#dc2626,color:#fff
  style S fill:#f59e0b,color:#000
%% fig: Jalur dari SCSS ke halaman RTL
%% desc: Build Vite menghasilkan CSS dua tema, rtlcss menurunkan versi .rtl.css di direktori yang sama, lalu layout RTL memuat hasilnya dan sisa app.rtl.rtl.css dihapus.

Karena keluaran ditulis ke direktori yang sama dengan masukannya, menjalankan rtl dua kali membuat rtlcss ikut membaca app.rtl.css yang sudah ada dan menulis app.rtl.rtl.css. Perintah kedua pada baris yang sama menghapus sisa itu, sehingga direktori hanya menyimpan satu tingkat akhiran .rtl.css. Hapus pola ini perlu dipertahankan setiap kali perintah dijalankan ulang secara manual.

Urutan perintah dan pekerjaan di CI

rtl bergantung pada keluaran build: tanpa dist/assets/compiled/css/*.css, rtlcss tidak punya masukan. Urutan manual yang benar adalah npm run build lalu npm run rtl. Script dev hanya menjalankan vite package.json:6¹², jadi berkas .rtl.css tidak dibuat ulang saat pengembangan dan halaman RTL lokal baru benar setelah kedua perintah itu dijalankan.

CI menjalankan urutan yang sama sebelum deploy: yarn install, yarn build, lalu yarn rtl .github/workflows/demo.yml:17-20¹³. Rincian penerbitan demo ada di Deploy Demo dan Rilis — lihat Deploy Demo dan Rilis.

⚠️ Script prod-rtl berisi npm run build && rtl package.json:9¹¹. Perintah keduanya tidak memakai npm run, sehingga yang dicari adalah binary bernama rtl, bukan script rtl di berkas yang sama. Jalankan npm run rtl secara eksplisit.

⚠️ src/layout-rtl.html memuat iconly.scss lewat path berakar /assets/scss/iconly.scss src/layout-rtl.html:6-8⁴, sedangkan base di vite.config.js diset './' vite.config.js:111¹⁴. Ketika demo disajikan dari subfolder, path berakar itu menunjuk akar domain, bukan folder demo. Berkas cadangan memakai path relatif assets/scss/iconly.scss src/layout-rtl-backup.html:6-8¹⁵, jadi salinan itulah yang aman untuk deploy berprefiks.