twitter/css-flip

Name: css-flip

Owner: Twitter, Inc.

Description: A CSS BiDi flipper

Created: 2014-02-24 17:16:28.0

Updated: 2018-01-08 00:21:36.0

Pushed: 2016-11-16 19:48:03.0

Homepage: null

Size: 299

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

css-flip

A CSS BiDi flipper. Generate left-to-right (LTR) or right-to-left (RTL) CSS from your source.

Installation

install css-flip

Example use

flip = require('css-flip');
css = 'div { float: left; }';

(css);
> 'div { float: right; }'

As a Rework plugin:

flip = require('css-flip');
rework = require('rework');
css = 'div { float: left; }';

rk(css).use(flip.rework()).toString();
> 'div { float: right; }'

Supported CSS Properties (a-z)

background-position, background-position-x, border-bottom-left-radius, border-bottom-right-radius, border-color, border-left, border-left-color, border-left-style, border-left-width, border-radius, border-right, border-right-color, border-right-style, border-right-width, border-style, border-top-left-radius, border-top-right-radius, border-width, box-shadow, clear, direction, float, left, margin, margin-left, margin-right, padding, padding-left, padding-right, right, text-align transition transition-property

Processing directives

css-flip provides a way to ignore declarations or rules that should not be flipped, and precisely replace property values.

@noflip

Prevent a single declaration from being flipped.

Source:

@noflip*/ float: left;
ear: left;

Yields:

oat: left;
ear: right;

Prevent all declarations in a rule from being flipped.

Source:

oflip*/

oat: left;
ear: left;

Yields:

oat: left;
ear: left;

@replace

Replace the value of a single declaration. Useful for custom LTR/RTL adjustments, e.g., changing background sprite positions or using a different glyph in an icon font.

Source:

@replace: -32px -32px*/ background-position: -32px 0;
@replace: ">"*/ content: "<";

Yields:

ckground-position: -32px -32px;
ntent: ">";

CLI

The CLI can be used globally or locally in a package.

View available options:

flip --help

Example use:

flip path/to/file.css > path/to/file.rtl.css

Development

Run the lint and unit tests:

test

Just the JSHint tests:

run lint

Just the Mocha unit tests:

run unit

Run Mocha unit tests in “watch” mode:

run watch

License and Acknowledgements

Copyright 2014 Twitter, Inc. and other contributors.

Licensed under the MIT License

css-flip was inspired by ded/R2 and Closure Stylesheets.