stylis-plugin-rtl
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    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+

    Install

    npm i stylis-plugin-rtl

    DownloadsWeekly Downloads

    50,246

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    12.5 kB

    Total Files

    14

    Last publish

    Collaborators

    • probablyup