https://github.com/styled-components/stylis-plugin-rtl

↔️ stylis RTL plugin based on CSSJanus
https://github.com/styled-components/stylis-plugin-rtl

css-in-js cssjanus rtl styled-components stylis

Last synced: 1 day ago
JSON representation

↔️ stylis RTL plugin based on CSSJanus

• Host: GitHub
• URL: https://github.com/styled-components/stylis-plugin-rtl
• Owner: styled-components
• License: mit
• Fork: true (viodotcom/stylis-rtl)
• Created: 2019-12-29T20:31:17.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2023-06-13T09:47:53.000Z (over 1 year ago)
• Last Synced: 2025-01-16T16:40:14.870Z (6 days ago)
• Topics: css-in-js, cssjanus, rtl, styled-components, stylis
• Language: TypeScript
• Homepage:
• Size: 411 KB
• Stars: 37
• Watchers: 2
• Forks: 18
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# stylis-plugin-rtl

Stylis RTL plugin based on CSSJanus

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

## Installation

### v1

```shell

yarn add stylis-plugin-rtl@^1

```

### v2

```shell

yarn add stylis-plugin-rtl stylis

```

## Usage with styled-components v5+

```javascript

import styled, { StyleSheetManager } from "styled-components";

import rtlPlugin from "stylis-plugin-rtl";

const Box = styled.div`

  padding-left: 10px;

`;

function MakeItRTL() {

  return (

    

      My padding will be on the right!

    

  );

}

```

#### NOTE: Preventing flipping

Because minification removes all comments from your CSS before it passes to ``, `/* @noflip */` comment won't work. 

You will have to either:

- add an exclamation mark at the beginning of the comment, like this  `/*! @noflip */`, to prevent it from being removed

- disable minification entirely by setting `minify` to `false` in `.babelrc` (see [styled-components documentation](https://styled-components.com/docs/tooling#minification)).

This is a fork of `stylis-rtl` for use with styled-components v5+