vite-plugin-rtl-css

1.0.9 verified Mon Apr 27 auth: no javascript

Vite plugin for transforming CSS to right-to-left (RTL) using rtlcss. Current stable version: 1.0.9. Release cadence appears low (single version). Key differentiator: integrates rtlcss directly into the Vite build pipeline, generating RTL CSS files during bundling with optional sourcemaps and configurable rtlcss options. Supports custom filename mappings (e.g., .rtl.css) and respects Vite's build.sourcemap default. Ships TypeScript types.

Common errors

error Error: Cannot find module 'rtlcss' ↓

cause Missing peer dependency rtlcss

fix

npm install rtlcss --save-dev

error TypeError: viteRtlCssPlugin is not a function ↓

cause Using require() instead of import (ESM-only)

fix

Change to dynamic import: const viteRtlCssPlugin = (await import('vite-plugin-rtl-css')).default;

error error TS2305: Module 'vite-plugin-rtl-css' has no exported member 'Options' ↓

cause Importing Options as a value instead of type

fix

Use import type { Options } from 'vite-plugin-rtl-css';

Warnings

breaking Vite plugin for rtlcss ↓

fix Use ESM imports only; CommonJS require() will fail.

gorcha rtlcss library is a peer dependency; must be installed separately ↓

fix Run npm install rtlcss --save-dev

deprecated No deprecated features reported.

Install

npm install vite-plugin-rtl-css

yarn add vite-plugin-rtl-css

pnpm add vite-plugin-rtl-css

Imports

viteRtlCssPlugin

wrong

const viteRtlCssPlugin = require('vite-plugin-rtl-css')

correct

import viteRtlCssPlugin from 'vite-plugin-rtl-css'

ESM-only; no default CommonJS support. Plugin is a default export.

Options

wrong

import { Options } from 'vite-plugin-rtl-css'

correct

import type { Options } from 'vite-plugin-rtl-css'

Options is a type, not a value. Use type import for TypeScript.

ViteRtlCssPlugin (type)
```
import viteRtlCssPlugin from 'vite-plugin-rtl-css';
// type of plugin function
```
The default export is a function; no separate named export for the plugin type.

Quickstart

Shows minimum Vite config with plugin, including all optional settings for filename mapping, sourcemaps, and rtlcss config.

import { defineConfig } from 'vite';
import viteRtlCssPlugin from 'vite-plugin-rtl-css';

export default defineConfig({
  plugins: [
    viteRtlCssPlugin({
      fileNameMap: {
        '.css': '[name].rtl.css',
        '.min.css': '[name].rtl.min.css'
      },
      sourceMap: true,
      rtlcssConfig: {
        autoRename: true
      }
    })
  ]
});