stylis-rtlcss

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

😎

Install

###### Yarn

``cmd
yarn add stylis-rtlcss
`

###### NPM

`cmd
npm i stylis-rtlcss
`

Usage with Styled-Components v5+

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

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

class App extends Component {
render() {
return (

Margin will be on RIGHT!

);
}
}
`

#### :globe_with_meridians: For conditionally usage based on language

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

`jsx
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 (
Margin will be on RIGHT!

)
}
}
`

Options 🔥

$3

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

`json
{
"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).

`jsx
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 (

Margin stills on LEFT!

);
}
}
`

| 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.

`jsx
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 (

Margin stills on LEFT!

);
}
}
`

| 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