postcss-janus

    1.0.2 • Public • Published

    PostCSS Janus

    PostCSS plugin to create RTL rules using CSSJanus.

    Install

    npm

    nmp install postcss-janus --save-dev

    yarn

    yarn add postcss-janus -d

    Examples

    input

    .example {
      background-color: #FFF;
      background-image: url("/folder/subfolder/icons/ltr/chevron.png");
      border-radius: 0 2px 0 8px;
      color: #666;
      padding-right: 20px;
      text-align: left;
      transform: translate(-50%50%);
      width: 100%;
    }

    output

    .example {
      background-color: #FFF;
      background-image: url("/folder/subfolder/icons/ltr/chevron.png");
      border-radius: 0 2px 0 8px;
      color: #666;
      padding-right: 20px;
      text-align: left;
      transform: translate(-50%50%);
      width: 100%;
    }
    .rtl .example  {
        border-radius: 2px 0 8px 0;
        padding-right: unset;
        padding-left: 20px;
        text-align: right;
        transform: translate(50%50%);
    }

    Basic usage

    Using postcss JavaScript API

    const postcss = require('postcss');
    const cssJanus = require('postcss-janus');
     
    postcss( [ cssJanus(options) ] );

    Using postcss-loader in Webpack

    rules: [
        {
            test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                { loader: 'css-loader' },
                {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: () => [ require('postcss-janus')(options) ]
                    }
                }
            ]
        }
    ]

    Options

    Option Default Type Description
    prefixes .rtl string or array Indicates the prefixes that should be added to the RTL rules
    swapLtrRtlInUrl false boolean Swap ltr and rtl strings in URLs
    swapLeftRightInUrl false boolean Swap left and right strings in URLs

    Directives

    Directives should be added as comments before a CSS rule block or a property, e.g:

    /* @ruleDirective */
    .example {
        /* @propertyDirective */
        color: white;
    }
    Directive Description
    @noflip Avoid flipping certain CSS property or an entire rule block
    @swapLtrRtlInUrl Swap ltr and rtl strings in a certain property (it will ignore the global swapLtrRtlInUrl option
    @swapLeftRightInUrl Swap left and right strings in a certain property (it will ignore the global swapLeftRightInUrl option

    If you do not use PostCSS, add it according to official docs and set this plugin in settings.

    Install

    npm i postcss-janus

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    9.37 kB

    Total Files

    6

    Last publish

    Collaborators

    • elchininet