npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

postcss-rtl

v2.0.0

Published

PostCSS plugin for RTL-optimizations

Downloads

159,830

Readme

PostCSS-RTL

npm Build Status npm Package Quality license

PostCSS-plugin for RTL-adaptivity

Generates RTL rules with flipped properties. Use one file for both directions!

Examples

Simple properties

In most cases all you need is flip property name or value from left to right or change values order in full-valued shorthand from top-right-bottom-left to top-left-bottom-right.

LTR input:

.foo {
    float: right;
    margin-left: 13px;
    text-align: right;
    font-size: 13px;
    border-color: lightgray;
    border-width: 2px 0 2px 2px;
    border-style: solid dashed solid solid
}

.foo {
    text-align: center;
}

LTR+RTL output:

.foo {
    font-size: 13px
}

[dir] .foo {
    border-color: lightgray
}

[dir="ltr"] .foo {
    float: right;
    margin-left: 13px;
    text-align: right;
    border-width: 2px 0 2px 2px;
    border-style: solid dashed solid solid
}

[dir="rtl"] .foo {
    float: left;
    margin-right: 13px;
    text-align: left;
    border-width: 2px 2px 2px 0;
    border-style: solid solid solid dashed
}

[dir] .foo {
    text-align: center
}

Animations

Flippable keyframes-animations will be splitted to two direction-based rules with -ltr or -rtl suffixes

LTR input:

.foo {
    animation: 1s slide 0s ease-in-out
}

@keyframes slide {
    from {
        transform: translate( -1000px )
    }
    to {
        transform: translate( 0 )
    }
}

LTR+RTL output:

[dir="ltr"] .foo {
    animation: 1s slide-ltr 0s ease-in-out
}

[dir="rtl"] .foo {
    animation: 1s slide-rtl 0s ease-in-out
}

@keyframes slide-ltr {
    from {
        transform: translate( -1000px )
    }
    to {
        transform: translate( 0 )
    }
}

@keyframes slide-rtl {
    from {
        transform: translate( 1000px )
    }
    to {
        transform: translate( 0 )
    }
}

Value directives

To transform declaration values use value directives:

  • /* rtl:prepend:{value} */ - to prepend the {value} before the current value
  • /* rtl:append:{value} */ - to append the {value} after the current value
  • /* rtl:{value} */ - to replace the current value with the supplied value

Source

.foo {
    font-weight: bold;
    font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif/*rtl:prepend:"Droid Arabic Kufi",*/;
    transform: rotate(45deg)/* rtl:append: scaleX(-1) */;
    flex-direction: row/* rtl: row-reverse */;
}

Result

.foo {
    font-weight: bold;
}

[dir=ltr] .foo {
    font-family: "Droid Sans", "Helvetica Neue", Arial, sans-serif/*rtl:prepend:"Droid Arabic Kufi",*/;
    transform: rotate(45deg)/* rtl:append: scaleX(-1) */;
    flex-direction: row/* rtl: row-reverse */;
}

[dir=rtl] .foo {
    font-family: "Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
    transform: rotate(45deg) scaleX(-1);
    flex-direction: row-reverse;
}

Property directives

To transform declaration property name use property directives:

  • /* rtl:as:{prop} */ - to process the property as {prop}. Usable for custom properties (uses rtlcss aliases under the hood)

Source

:root {
    --padding /* rtl:as:padding */: 1rem 2rem 3rem 4rem;
}

Result

[dir=ltr]:root {
    --padding /* rtl:as:padding */: 1rem 2rem 3rem 4rem;
}

[dir=rtl]:root {
    --padding /* rtl:as:padding */: 1rem 4rem 3rem 2rem;
}

Ignoring specific declarations

To skip flipping specific declarations use some of supported directives:

  • /* rtl:ignore */ - to ignore the following rule or the containing declaration
  • /* rtl:begin:ignore */ and /* rtl:end:ignore */ - to ignore rules within scope

Ignore one rule:

/* rtl:ignore */
.foo {
    padding-left: 0
}

Block-syntax to ignore rules within scope:

/* rtl:begin:ignore */
.foo {
    padding-left: 0
}
.bar {
    direction: ltr
}
/* rtl:end:ignore */

Value-syntax to ignore a single CSS declaration:

.foo {
    margin-left: 20px;
    padding-right: 20px /* rtl:ignore */;
}

/*! notation will work too:

/*! rtl:ignore */
.foo {
    padding-left: 0
}

Usage

  1. Plug it to PostCSS

    const postcss = require('postcss')
    const rtl = require('postcss-rtl')
    
    postcss([ rtl( options ) ])

    See PostCSS docs for examples for your environment.

  2. Manage direction by switching between dir="ltr" and dir="rtl" on <html> element.

With Webpack:

module.exports = {
  module: {
    rules: [ {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        { loader: 'css-loader' },
        { loader: 'postcss-loader',
          options: {
            plugins: function () {
              return [ require( 'postcss-rtl' )( options ) ]
            }
          }
        }
      ]
    } ]
  }
}

With Gulp:

gulp.src( 'style.css' )
    .pipe( postcss( [ rtl( options ) ]) )
    .pipe( gulp.dest( './dest' ) )

Options

  • addPrefixToSelector: Custom function for adding prefix to selector. Optional. Example:

    function addPrefixToSelector ( selector, prefix ) {
        return `${prefix} > ${selector}` // Make selectors like [dir=rtl] > .selector
    }

    note: the returned string must include prefix to avoid an infinite recursion

  • onlyDirection: generate only one-direction version: ltr or rtl

  • prefixType: Switches between adding attributes and classes. Optional:

    • attribute (by default, recommended): .foo => [dir=rtl] .foo
    • class (useful for IE6): .foo => .dir-rtl .foo
  • prefix: Uses a custom string, instead of 'dir', for the added attribute and class selectors

    • e.g. 'data-my-custom-dir' (for attribute prefixType): .foo => [data-my-custom-dir=rtl] .foo
    • e.g. 'my-custom-dir' (for class prefixType): .foo => .my-custom-dir-rtl .foo
  • removeComments (default: true): remove rtl:* comments after process them

  • fromRTL (default: false): assume all styles are written in RTL direction and generate corresponding LTR styles for them

  • blacklist: the array of css properties which processing will be ignored Example:

    ['padding-left', 'padding-right']
  • whitelist: the array of css properties which (and only them) will be processed Example:

    ['margin', 'border-color']
  • aliases: check rtlcss aliases documentation Example:

    {
        `--spacing`: 'padding'
    }

Thanks

Great thanks to projects: