Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
css-flip
Advanced tools
Changelog
0.5.0 - 23 June 2014
background-position
.background-position
single value if it's a percentage.background-position
X value of 0%
to 100%
.transition
and transition-property
.border-radius
.Readme
A CSS BiDi flipper. Generate left-to-right (LTR) or right-to-left (RTL) CSS from your source.
npm install css-flip
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; }'
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
css-flip provides a way to ignore declarations or rules that should not be flipped, and precisely replace property values.
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 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: ">";
}
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
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
Copyright 2014 Twitter, Inc. and other contributors.
Licensed under the MIT License
css-flip was inspired by ded/R2 and Closure Stylesheets.
FAQs
A CSS BiDi flipper.
The npm package css-flip receives a total of 624 weekly downloads. As such, css-flip popularity was classified as not popular.
We found that css-flip demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.