or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli.mdconfiguration.mdcore-api.mddirectives.mdindex.md
tile.json

tessl/npm-rtlcss

Framework for transforming cascading style sheets (CSS) from left-to-right (LTR) to right-to-left (RTL)

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/rtlcss@4.3.x

To install, run

npx @tessl/cli install tessl/npm-rtlcss@4.3.0

index.mddocs/

RTLCSS

RTLCSS is a framework for converting Left-To-Right (LTR) Cascading Style Sheets to Right-To-Left (RTL) format. It provides both a programmatic API for Node.js applications and a command-line interface for batch processing CSS files, enabling developers to create internationalized web applications that support right-to-left languages like Arabic, Hebrew, and Persian.

Package Information

  • Package Name: rtlcss
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install rtlcss

Core Imports

const rtlcss = require("rtlcss");

For PostCSS integration:

const postcss = require("postcss");
const rtlcss = require("rtlcss");

Basic Usage

const rtlcss = require("rtlcss");

// Simple CSS transformation
const css = ".container { float: left; margin-right: 10px; }";
const rtlCSS = rtlcss.process(css);
console.log(rtlCSS);
// Output: ".container { float: right; margin-left: 10px; }"

// Using with PostCSS
const postcss = require("postcss");
const result = postcss([rtlcss()])
  .process(css)
  .css;

// With custom options
const rtlCSSWithOptions = rtlcss.process(css, {
  autoRename: true,
  stringMap: [
    {
      name: 'left-right',
      search: ['left', 'Left'],
      replace: ['right', 'Right']
    }
  ]
});

Architecture

RTLCSS is built around several key components:

  • PostCSS Plugin: Core transformation engine that processes CSS Abstract Syntax Tree (AST)
  • Configuration System: Flexible options, plugins, and hooks for customizing transformations
  • Directive System: Comment-based directives for fine-grained control over transformations
  • String Mapping: Configurable text replacement system for custom transformations
  • Utility Functions: Helper functions for CSS value manipulation and transformation
  • CLI Interface: Command-line tool for batch processing CSS files

Capabilities

Core API

Main RTLCSS functions for CSS transformation and PostCSS integration.

/**
 * Creates RTLCSS PostCSS plugin instance
 * @param options - Configuration options
 * @param plugins - Array of RTLCSS plugins
 * @param hooks - Pre/post processing hooks
 * @returns PostCSS plugin function
 */
function rtlcss(options?: RTLCSSOptions, plugins?: RTLCSSPlugin[], hooks?: RTLCSSHooks): PostCSSPlugin;

/**
 * Processes CSS string and returns RTL-converted CSS
 * @param css - Input CSS string
 * @param options - Configuration options
 * @param plugins - Array of RTLCSS plugins
 * @param hooks - Pre/post processing hooks
 * @returns RTL-converted CSS string
 */
rtlcss.process(css: string, options?: RTLCSSOptions, plugins?: RTLCSSPlugin[], hooks?: RTLCSSHooks): string;

/**
 * Creates configured PostCSS processor instance
 * @param config - Configuration object containing options, plugins, and hooks
 * @returns PostCSS processor instance
 */
rtlcss.configure(config: RTLCSSConfiguration): PostCSSProcessor;

Core API

Configuration

Configuration system for customizing RTLCSS behavior, including options, plugins, and hooks.

interface RTLCSSOptions {
  /** Enable automatic CSS class renaming */
  autoRename?: boolean;
  /** Strict mode for auto-renaming */
  autoRenameStrict?: boolean;
  /** Plugin/directive blacklist */
  blacklist?: { [pluginName: string]: { [directiveName: string]: boolean } };
  /** Remove directive comments after processing */
  clean?: boolean;
  /** Greedy string matching mode */
  greedy?: boolean;
  /** Process URLs in CSS */
  processUrls?: boolean | { atrule?: boolean };
  /** Custom string replacement mappings */
  stringMap?: StringMapEntry[];
  /** Use calc() for flipping values */
  useCalc?: boolean;
  /** Property name aliases */
  aliases?: { [property: string]: string };
  /** Process environment-specific values */
  processEnv?: boolean;
}

Configuration

Directives

Comment-based directives for fine-grained control over CSS transformations.

// Control directives that modify processing flow
/* rtl:ignore */
/* rtl:begin:ignore */
/* rtl:end:ignore */
/* rtl:rename */
/* rtl:raw: .custom { direction: rtl; } */
/* rtl:remove */
/* rtl:begin:options: {"autoRename": true} */
/* rtl:end:options */

Directives

Command Line Interface

Command-line tool for batch processing CSS files with various options.

# Basic usage
rtlcss input.css output.css

# Process directory recursively
rtlcss -d input-dir output-dir

# Read from stdin
cat input.css | rtlcss -

# With custom config
rtlcss -c .rtlcssrc input.css output.css

CLI

Types

interface StringMapEntry {
  /** String map identifier */
  name: string;
  /** Processing priority */
  priority: number;
  /** String(s) to search for */
  search: string | string[];
  /** Replacement string(s) */
  replace: string | string[];
  /** Stop processing other maps if this matches */
  exclusive?: boolean;
  /** Scope and case sensitivity options */
  options?: {
    scope?: '*' | 'url' | 'selector';
    ignoreCase?: boolean;
    greedy?: boolean;
  };
}

interface RTLCSSPlugin {
  /** Plugin identifier */
  name: string;
  /** Processing priority */
  priority: number;
  /** Control and value directives */
  directives: {
    control?: { [name: string]: DirectiveHandler };
    value?: DirectiveHandler[];
  };
  /** CSS property processors */
  processors?: PropertyProcessor[];
}

interface RTLCSSHooks {
  /** Called before CSS processing */
  pre?: (root: PostCSS.Root, postcss: PostCSS) => void;
  /** Called after CSS processing */
  post?: (root: PostCSS.Root, postcss: PostCSS) => void;
}

interface RTLCSSConfiguration {
  /** Configuration options */
  options?: RTLCSSOptions;
  /** Array of plugins */
  plugins?: RTLCSSPlugin[];
  /** Pre/post processing hooks */
  hooks?: RTLCSSHooks;
}

// PostCSS integration types
type PostCSSPlugin = (options?: any) => PostCSS.Processor;
namespace PostCSS {
  interface Processor {
    process(css: string, options?: ProcessOptions): Result;
  }
  interface ProcessOptions {
    from?: string;
    to?: string;
    map?: boolean | { inline?: boolean };
  }
  interface Result {
    css: string;
    map?: string;
    warnings(): Warning[];
  }
  interface Warning {
    toString(): string;
  }
  interface Root {
    walkRules(callback: (rule: Rule) => void): void;
    append(node: string): void;
  }
  interface Rule {
    selector: string;
    remove(): void;
  }
}