🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

css-flip

A CSS BiDi flipper.

0.5.0
latest
Version published
Weekly downloads
276
-8.61%
Maintainers
2
Weekly downloads
 
Created

css-flip Build Status

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

Installation

npm install css-flip

Example use

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

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

As a Rework plugin:

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

rework(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:

p {
  /*@noflip*/ float: left;
  clear: left;
}

Yields:

p {
  float: left;
  clear: right;
}

Prevent all declarations in a rule from being flipped.

Source:

/*@noflip*/
p {
  float: left;
  clear: left;
}

Yields:

p {
  float: left;
  clear: 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:

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

Yields:

p {
  background-position: -32px -32px;
  content: ">";
}

CLI

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

View available options:

css-flip --help

Example use:

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

Development

Run the lint and unit tests:

npm test

Just the JSHint tests:

npm run lint

Just the Mocha unit tests:

npm run unit

Run Mocha unit tests in "watch" mode:

npm 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.

FAQs

Package last updated on 23 Jun 2014

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts