1 | # stylis-plugin-rtl
|
2 |
|
3 | Stylis RTL plugin based on CSSJanus
|
4 |
|
5 | > NOTE! Use v1 of this plugin for styled-components v5, NOT v2 (v2 is for libraries that have upgraded to stylis v4, which s-c has not yet. At the moment only emotion 11 is updated.)
|
6 |
|
7 | ## Installation
|
8 |
|
9 | ### v1
|
10 |
|
11 | ```shell
|
12 | yarn add stylis-plugin-rtl@^1
|
13 | ```
|
14 |
|
15 | ### v2
|
16 |
|
17 | ```shell
|
18 | yarn add stylis-plugin-rtl stylis
|
19 | ```
|
20 |
|
21 | ## Usage with styled-components v5+
|
22 |
|
23 | ```javascript
|
24 | import styled, { StyleSheetManager } from "styled-components";
|
25 | import rtlPlugin from "stylis-plugin-rtl";
|
26 |
|
27 | const Box = styled.div`
|
28 | padding-left: 10px;
|
29 | `;
|
30 |
|
31 | function MakeItRTL() {
|
32 | return (
|
33 | <StyleSheetManager stylisPlugins={[rtlPlugin]}>
|
34 | <Box>My padding will be on the right!</Box>
|
35 | </StyleSheetManager>
|
36 | );
|
37 | }
|
38 | ```
|
39 |
|
40 | #### NOTE: Preventing flipping
|
41 |
|
42 | Because minification removes all comments from your CSS before it passes to `<StyleSheetManager>`, `/* @noflip */` comment won't work.
|
43 | You will have to either:
|
44 | - add an exclamation mark at the beginning of the comment, like this `/*! @noflip */`, to prevent it from being removed
|
45 | - disable minification entirely by setting `minify` to `false` in `.babelrc` (see [styled-components documentation](https://styled-components.com/docs/tooling#minification)).
|
46 |
|
47 | <small>This is a fork of `stylis-rtl` for use with styled-components v5+</small> |
\ | No newline at end of file |