stylis-plugin-rtl

stylis-plugin-rtl is a Stylis preprocessor plugin that automatically converts left-to-right CSS into right-to-left, powered by CSSJanus. It lets CSS-in-JS libraries such as styled-components and Emotion render correctly for RTL languages like Arabic and Hebrew without manually authoring mirrored styles.

You write your styles once in the usual LTR direction, register the plugin with your library’s stylis pipeline, and properties like padding-left, margin, and float are flipped for you at style-generation time. A @noflip escape hatch lets you opt individual declarations out of the transformation.

What You Get

• Automatic LTR-to-RTL flipping of direction-sensitive CSS properties
• Integration with styled-components v5+ and Emotion 11 stylis pipelines
• CSSJanus-based transformation rules under the hood
• A @noflip comment escape hatch to exclude specific declarations

Common Use Cases

• Adding RTL support to a styled-components app for Arabic or Hebrew
• Serving both LTR and RTL themes from a single set of CSS-in-JS styles
• Mirroring layout spacing and floats without hand-writing RTL overrides

Under The Hood

Architecture - The package exports a single stylis plugin function that hooks into the Stylis serialization pass. As Stylis walks the parsed CSS, the plugin inspects each declaration and rewrites direction-sensitive properties (padding/margin sides, float, text-align, etc.) using CSSJanus’s flipping logic before the CSS string is emitted.

Tech Stack - Written in TypeScript and built around CSSJanus for the actual property mirroring. v2 targets stylis v4 (used by Emotion 11), while v1 targets the stylis v3 pipeline in styled-components v5 — a versioning split the README documents explicitly.

Code Quality - It is a small, focused fork of stylis-rtl maintained under the styled-components org. The surface area is tiny and stable; the project is mature but sees little active development, reflecting that the underlying CSSJanus rules rarely change.

API Design - Usage is a one-liner: import the plugin and add it to your library’s stylisPlugins array. The /*! @noflip */ convention gives per-declaration control, and the README calls out the minification gotcha that strips comment-based directives.