DOCSEARCHbyAlgolia
Submit Docs

RTLCSS

repository·master·Indexed 23 days ago

https://github.com/mohammadyounes/rtlcss

A framework for transforming cascading style sheets (CSS) from left-to-right (LTR) to right-to-left (RTL). Version 4.3.0 features a CLI for processing files and directories, a process() method for CSS strings, and a configure() method for PostCSS plugin integration. It supports control and value directives to manipulate the transformation process and includes built-in processors to automate mirroring CSS properties for RTL languages.

Tokens
1.5K
Snippets
2
Records
12
Agent score
83%

What's inside rtlcss

  3. Directives in RTLCSS

    master

    RTLCSS uses directives to control how the CSS is processed. Directives are categorized into control directives (which affect the parsing and transformation flow) and value directives (which modify declaration values).

    Control Directives

    Control directives allow you to manipulate the transformation process using specific syntax in your CSS:

    • ignore: Prevents certain parts of the CSS from being processed. It can be used as a block or a self-closing directive.
    • rename: Renames selectors.
    • raw: Allows inserting raw CSS nodes.
    • remove: Removes specific at-rules, rules, or declarations.
    • options: Allows passing a JSON object to change the RTLCSS configuration mid-file.
    • config: Allows passing a configuration object (evaluated as a JS object) to change the RTLCSS configuration mid-file.

    Value Directives

    Value directives are used within declarations to modify how values are handled:

    • prepend: Prepends a value to the declaration.
    • append: Appends a value to the declaration.
    • insert: Inserts a value into the declaration based on a match.
    • (Unnamed): Replaces the declaration value with a new one.

  5. Configure RTLCSS via CLI

    master
    You can provide a custom configuration file using the -c or --config flag. This allows you to define specific RTL transformation rules and settings. If no config is provided, rtlcss will attempt to load one from the current working directory or the input file's directory, otherwise it uses defaults.

  6. Integrate RTLCSS as a PostCSS plugin with configure()

    master

    If you are using PostCSS, you can use configure() to create a PostCSS plugin instance. This method accepts a single configuration object containing options, plugins, and hooks.

    const rtlcss = require('rtlcss');

const plugin = rtlcss.configure({
  options: { /* ... */ },
  plugins: [ /* ... */ ],
  hooks: { /* ... */ }
});

// Use the returned plugin in your PostCSS pipeline
// postcss.use(plugin)

  7. Use RTLCSS to process CSS strings with process()

    master

    The process method is the primary way to transform a CSS string from LTR to RTL. It accepts the input CSS, an options object, an array of plugins, and a hooks object. It returns the transformed CSS as a string.

    const rtlcss = require('rtlcss');

const css = '.foo { margin-left: 10px; }';
const options = { /* RTLCSS options */ };
const plugins = [ /* RTLCSS plugins */ ];
const hooks = { /* pre/post hooks */ };

const rtlCss = rtlcss.process(css, options, plugins, hooks);
// rtlCss will be '.foo { margin-right: 10px; }'

  8. Configure RTLCSS via the configure() method

    master

    The configure method returns a PostCSS plugin instance based on the provided configuration object. The configuration object can contain:

    • options: RTLCSS settings.
    • plugins: An array of RTLCSS plugins.
    • hooks: An object containing pre and post hooks.

    This is useful when you want to integrate RTLCSS directly into a PostCSS workflow rather than using the standalone process string method.

    module.exports.configure = function (config = {}) {
  return postcss([this(config.options, config.plugins, config.hooks)])
}

  10. RTLCSS CLI Options Reference

    master

    The following options are available for the rtlcss command:

    OptionDescription
    -h, --helpPrint help (this message) and exit.
    -v, --versionPrint version number and exit.
    -c, --config <path>Path to configuration settings file.
    - , --stdinRead from stdin stream.
    -d, --directoryProcess all *.css files from input directory (recursive).
    -e, --ext <ext>Used with -d option to set the output files extension. Default: ".rtl.css".
    -s, --silentSilent mode, no warnings or errors are printed.

    Note on Output: If no destination is specified, output will be written to the same input folder as {source}.rtl.{ext}.

    Option           Description
--------------   ----------------------------------------------
-h,--help        Print help (this message) and exit.
-v,--version     Print version number and exit.
-c,--config      Path to configuration settings file.
- ,--stdin       Read from stdin stream.
-d,--directory   Process all *.css files from input directory (recursive).
-e,--ext         Used with -d option to set the output files extension.
                 Default: ".rtl.css".
-s,--silent      Silent mode, no warnings or errors are printed.