tessl/npm-rtlcss

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

—

Pending

Overview

Eval results

Files

Core API

Name: tessl/npm-rtlcss
Author: tessl

The core RTLCSS API provides three main functions for CSS transformation and PostCSS integration.

Capabilities

RTLCSS Plugin Factory

Creates a PostCSS plugin instance configured for RTL transformation.

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

Usage Examples:

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

// Basic usage with default options
const processor = postcss([rtlcss()]);
const result = processor.process(css).css;

// With custom options
const processor = postcss([rtlcss({
  autoRename: true,
  clean: false,
  stringMap: [
    {
      name: 'custom-map',
      search: 'theme-light',
      replace: 'theme-dark',
      priority: 50
    }
  ]
})]);

// With custom plugin
const customPlugin = {
  name: 'my-plugin',
  priority: 50,
  processors: [
    {
      expr: /^custom-prop$/,
      action: (prop, value, context) => ({
        prop: prop,
        value: value.replace('left', 'right')
      })
    }
  ]
};

const processor = postcss([rtlcss({}, [customPlugin])]);

Process Function

Processes CSS string directly and returns RTL-converted CSS.

/**
 * Processes CSS string and returns RTL-converted CSS
 * @param css - Input CSS string to transform
 * @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;

Usage Examples:

const rtlcss = require("rtlcss");

// Simple transformation
const css = `
  .header {
    float: left;
    margin-right: 20px;
    text-align: left;
  }
`;

const rtlCSS = rtlcss.process(css);
console.log(rtlCSS);
// Output:
// .header {
//   float: right;
//   margin-left: 20px;
//   text-align: right;
// }

// With options
const rtlCSSWithOptions = rtlcss.process(css, {
  autoRename: true,
  stringMap: [
    {
      name: 'header-footer',
      search: 'header',
      replace: 'راس_الصفحة',
      priority: 100
    }
  ]
});

// With hooks
const rtlCSSWithHooks = rtlcss.process(css, {}, [], {
  pre: (root, postcss) => {
    console.log('Processing started');
  },
  post: (root, postcss) => {
    console.log('Processing completed');
  }
});

Configure Function

Creates a configured PostCSS processor instance.

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

Usage Examples:

const rtlcss = require("rtlcss");

// Create configured processor
const processor = rtlcss.configure({
  options: {
    autoRename: true,
    clean: false,
    processUrls: true
  },
  plugins: [
    {
      name: 'custom-plugin',
      priority: 100,
      processors: [
        {
          expr: /^border-(left|right)$/,
          action: (prop, value, context) => {
            const newProp = prop.replace('left', 'right').replace('right', 'left');
            return { prop: newProp, value: value };
          }
        }
      ]
    }
  ],
  hooks: {
    pre: (root, postcss) => {
      // Add custom pre-processing logic
      root.walkRules(rule => {
        if (rule.selector.includes('.rtl-only')) {
          rule.remove();
        }
      });
    },
    post: (root, postcss) => {
      // Add custom post-processing logic
      root.append('/* RTL conversion completed */');
    }
  }
});

// Use the configured processor
const result = processor.process(css).css;

PostCSS Integration

RTLCSS is designed as a PostCSS plugin and integrates seamlessly with PostCSS workflows.

// PostCSS plugin compatibility flag
rtlcss.postcss = true;

Integration Examples:

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

// Chain with other PostCSS plugins
const processor = postcss([
  autoprefixer(),
  rtlcss({
    autoRename: true,
    processUrls: true
  })
]);

const result = processor.process(css, {
  from: 'src/styles.css',
  to: 'dist/styles.rtl.css'
});

// With source maps
const result = processor.process(css, {
  from: 'src/styles.css',
  to: 'dist/styles.rtl.css',
  map: { inline: false }
});

console.log(result.css); // RTL CSS
console.log(result.map); // Source map

Install with Tessl CLI