tiny styled-components plugin converts LTR to RTL, based on RTLCSS
npm install stylis-rtlcss
###### Yarn
``cmd`
yarn add stylis-rtlcss
###### NPM
`cmd`
npm i stylis-rtlcss
`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 (
);
}
}
`
#### :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 (
)
}
}
`
- you need to disable minification in babel plugin Reference, that is because of minification removes all comments from your CSS before it passes to
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 (
);
}
}
`
| 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). |
#### - 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 (
);
}
}
`
| 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/;` |
Licensed under the MIT License