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

NOTE! Use v1 of this plugin for styled-components v5, NOT v2 (v2 is for libraries that have upgraded to stylis v4, which s-c has not yet. At the moment only emotion 11 is updated.)

Installation

v1

yarn add stylis-plugin-rtl@^1

v2

yarn add stylis-plugin-rtl stylis

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>
  );
}

NOTE: Preventing flipping

Because minification removes all comments from your CSS before it passes to <StyleSheetManager>, /* @noflip */ comment won't work. You will have to either:

• add an exclamation mark at the beginning of the comment, like this /*! @noflip */, to prevent it from being removed
• disable minification entirely by setting minify to false in .babelrc (see styled-components documentation).

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