Skip to content

tiny styled-components plugin converts LTR to RTL, based on RTLCSS

License

Notifications You must be signed in to change notification settings

Migggz/stylis-rtlcss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

license gzip size

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

About

tiny styled-components plugin converts LTR to RTL, based on RTLCSS

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published