stylis-plugin-rtl

What is stylis-plugin-rtl?

The stylis-plugin-rtl npm package is a plugin for Stylis, a lightweight CSS preprocessor. This plugin automatically converts CSS styles to support right-to-left (RTL) languages, making it easier to develop applications that need to support RTL layouts.

What are stylis-plugin-rtl's main functionalities?

Automatic RTL Conversion

This feature automatically converts left-to-right (LTR) CSS properties to their right-to-left (RTL) equivalents. For example, 'margin-left' becomes 'margin-right' and 'padding-right' becomes 'padding-left'.

const stylis = require('stylis');
const rtl = require('stylis-plugin-rtl');
stylis.use(rtl);

const css = `.example { margin-left: 10px; padding-right: 20px; }`;
const rtlCss = stylis('', css);
console.log(rtlCss); // Outputs: .example { margin-right: 10px; padding-left: 20px; }`

Integration with Stylis

This feature allows seamless integration with Stylis, enabling automatic RTL conversion during the CSS preprocessing stage. This ensures that all styles are correctly converted without additional manual intervention.

const stylis = require('stylis');
const rtl = require('stylis-plugin-rtl');
stylis.use(rtl);

const css = `.example { float: left; text-align: right; }`;
const rtlCss = stylis('', css);
console.log(rtlCss); // Outputs: .example { float: right; text-align: left; }`

Other packages similar to stylis-plugin-rtl

rtlcss

rtlcss is a framework for transforming CSS from LTR to RTL. It provides a more comprehensive set of tools and options for handling RTL conversion, including custom directives and plugins. Unlike stylis-plugin-rtl, which is a plugin for Stylis, rtlcss can be used as a standalone tool or integrated into various build processes.

postcss-rtl

postcss-rtl is a PostCSS plugin that adds RTL support to your CSS. It offers more flexibility and customization options compared to stylis-plugin-rtl, as it can be integrated into any PostCSS workflow. It also supports custom rules and configurations for more complex RTL transformations.

README

stylis-plugin-rtl

Stylis RTL plugin based on CSSJanus

Usage with styled-components v5+

import styled, { StyleSheetManager } from "styled-components";
import rtlPlugin from "stylis-plugin-rtl";

const Box = styled.div`
  padding-left: 10px;
`;

function MakeItRTL() {
  return (
    <StyleSheetManager stylisPlugins={[rtlPlugin]}>
      <Box>My padding will be on the right!</Box>
    </StyleSheetManager>
  );
}

This is a fork of stylis-rtl for use with styled-components v5+