Install

Yarn

yarn add stylis-rtlcss

NPM

npm i stylis-rtlcss

Usage with Styled-Components v5+

import styled, { StyleSheetManager } from "styled-components";
import rtlcss from "stylis-rtlcss";

const StyledDiv = styled.div`
  margin-left: 10px;
`;

class App extends Component {
  render() {
    return (
      <StyleSheetManager stylisPlugins={[rtlcss]}>
        <StyledDiv>Margin will be on RIGHT!</StyledDiv>
      </StyleSheetManager>
    );
  }
}

:globe_with_meridians: For conditionally usage based on language

to avoid typing issues in StyleSheetManager while using Typescript, you should conditionally render props

import styled, { StyleSheetManager } from "styled-components";
import rtlcss from "stylis-rtlcss";

const StyledDiv = styled.div`
  margin-left: 10px;
`;

class App extends Component {
  render() {
    const { language } = this.props;
    return (
      <StyleSheetManager {...(language === 'ar' ? { stylisPlugins: [rtlcss] } : {})}
        <StyledDiv>Margin will be on RIGHT!</StyledDiv>
      </StyleSheetManager>
    )
  }
}

Options 🔥

Supports Directives

• you need to disable minification in babel plugin Reference, that is because of minification removes all comments from your CSS before it passes to <StyleSheetManager>. So, in .babelrc file, set minify to false

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "minify": false
      }
    ]
  ]
}

Then you can use control Directives as you want

- Control Directives

Control directives are placed between declarations or statements (rules and at-rules). They can target a single node (self-closing) or a set of nodes (block-syntax).

import styled, { StyleSheetManager } from "styled-components";
import rtlcss from "stylis-rtlcss";

const StyledDiv = styled.div`
  /*rtl:ignore*/
  margin-left: 10px;
`;

class App extends Component {
  render() {
    return (
      <StyleSheetManager stylisPlugins={[rtlcss]}>
        <StyledDiv>Margin stills on LEFT!</StyledDiv>
      </StyleSheetManager>
    );
  }
}

| Directive Syntax | Description | | ---------------- | --------------------------------------------------------------------------------------------- | | /*rtl:ignore*/ | Ignores processing of the following node (self-closing) or nodes within scope (block-syntax). | | /*rtl:remove*/ | Removes the following node (self-closing) or nodes within scope (block-syntax). |

All Control Directives Docs

- Value Directives

Value directives are placed any where inside the declaration value. They target the containing declaration node.

import styled, { StyleSheetManager } from "styled-components";
import rtlcss from "stylis-rtlcss";

const StyledDiv = styled.div`
  margin-left: 10px /*rtl:ignore*/;
`;

class App extends Component {
  render() {
    return (
      <StyleSheetManager stylisPlugins={[rtlcss]}>
        <StyledDiv>Margin stills on LEFT!</StyledDiv>
      </StyleSheetManager>
    );
  }
}

| Directive Syntax | Description | Example | | ------------------------- | -------------------------------------------- | ---------------------------------------------------- | | /*rtl:prepend:{value}*/ | Ignores processing of this declaration. | transform:rotate(45deg) /*rtl:append:scaleX(-1)*/; | | /*rtl:{value}*/ | Replaces the declaration value with {value}. | font-size:16px/*rtl:14px*/; |

All Value Directive Docs

License

Licensed under the MIT License