Package Exports

stylis-plugin-rtl

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (stylis-plugin-rtl) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

yarn add stylis-plugin-rtl@^1

v2

yarn add stylis-plugin-rtl stylis

Usage with styled-components v5+

import styled, { StyleSheetManager } from "styled-components";
import rtlPlugin from "stylis-plugin-rtl";

const Box = styled.div`
  padding-left: 10px;
`;

function MakeItRTL() {
  return (
    <StyleSheetManager stylisPlugins={[rtlPlugin]}>
      <Box>My padding will be on the right!</Box>
    </StyleSheetManager>
  );
}

NOTE: Preventing flipping

Because minification removes all comments from your CSS before it passes to <StyleSheetManager>, /* @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).

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