stylis-rtlcss

Stylis RTL plugin based on RTLCSS and much more, without tears

😎

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

🌐 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