ded / r2 Goto Github PK
View Code? Open in Web Editor NEWa CSS LTR ∞ RTL converter for i18 friendly layouts
a CSS LTR ∞ RTL converter for i18 friendly layouts
i tried excuting the r2 command on ubuntu 13.04, but it did not work, but when i cheked on windows it works just fine.
$ ls -l /usr/local/bin/r2
lrwxrwxrwx 1 root root 29 Sep 19 18:54 /usr/local/bin/r2 -> ../lib/node_modules/R2/bin/r2
Some context in the CSS file should be the same across all languages, is there a way to tell R2 to not convert this section from LTR to RTL?
hi;
this error:
var output=require('r2').swap('node_modules/r2/bootstrap.css');
TypeError: Cannot call method 'map' of null
at r2 (C:\Program Files (x86)\nodejs\node_modules\r2\r2.js:75:49)
at Object.swap (C:\Program Files (x86)\nodejs\node_modules\r2\r2.js:111:10)
at repl: 1:26
at REPLServer.eval (repl.js:80:21)
at repl.js:190:20
at REPLServer.eval (repl.js:87:5)
at Interface. (repl.js:182:12)
at Interface.emit (events.js:67:17)
at Interface._onLine (readline.js:162:10)
at Interface._line (readline.js:426:8)
please describe install r2 in nodejs from first step by step.
very thanx.
The following code:
.flex-caption { zoom: 1;}
.flex-caption {}
.flex-direction-nav li a {
color: black;
}
Produces the following result via R2 (notice the double curly brackets in the beginning):
.flex-caption{zoom:1;}}.flex-direction-nav li a{color:black;}
Our css had a semicolon inside a content block and it appears to break the parsing. Assuming we would have to do some checking before the declarations.split call to catch it. I removed the semi-colon for now and it goes on.
b.broke:before {
content:"↓";
}
gets parsed like so:
b.broke:before{content:"↓}
It appears that the following rules are not swapped properly:
Please check the (not swapped) lines below
.style1 {
margin-left: 20px;
*margin-left: 20px; /* not swapped */
}
@media ... {
.style1 {
margin-left: 20px; /* not swapped */
margin-left: 20px;
}
.style2 {
margin-left: 20px;
}
}
Currently r2 doesn't address icon fonts such as FontAwesome
Since this seems quite a specific, it doesn't exactly meet the requirements to land this in the core of r2. It's possible that someone doesn't use it at all, and also that someone using a different icon font could see their icons swap randomly.
We've created kind-of a prototype to swap FontAwesome 3 icons (liferay-labs@e3918ac) which we're currently using.
We'd love to be able to improve that and contribute it back.
Do you think you'd be interested in something like this?
Do you have any plans towards allowing such things?
Thanks for a great work, guys!
I haven't ran into this yet, but I think we may need to consider adding support to gradients. Given:
<linear-gradient> = linear-gradient(
[
[ [top | bottom] || [left | right] ]
|
<angle>
,]?
<color-stop>[, <color-stop>]+
);
I think we'll either have to flip left to right and transform the angle along the x-axis or invert the ordering of the colors. Before this makes it in, I think I'd like to get a comprehensive test suite in making sure all cases are getting converted correctly.
The horizontal value of the background-position property is not handled. The following two examples demonstrate this issue:
background: url('../img/image.png') no-repeat left center;
background-position: left center;
What I would expect:
background: url('../img/image.png') no-repeat right center;
background-position: right center;
Instead, the 'left' horizontal value is not converted.
The following types of horizontal values need to be supported:
Percentage
30% ---> 70% (100 - x)
Pixel
A pixel value without a side is assumed to be anchored on the left, so:
20px ---> right 20px
Pixel and side:
right 20px --> left 20px
The ability to specify a side and offset is only supported in newer browsers (see "Four values syntax" under https://developer.mozilla.org/en/CSS/background-position#Browser_compatibility), so it may be desirable to simply not convert pixel values if a side is not specified.
Side
left ---> right (and vice versa)
For at least three properties that I've tried (padding, margin, float), the presence of the !important declaration results in the property not being converted.
Example:
padding: 0 25px 0 0 !important;
I thing it doesn't support CSS3 Property, like: border-radius,...
I try with twitter bootstrap, I found it not completely converted I think for above reason.
thank you
Calling r2
on an empty file causes the following error:
node.js:201
throw e; // process.nextTick error, or 'error' event on first tick
^
TypeError: Cannot call method 'map' of null
at r2 (/home/ubuntu1204/code/github/R2/r2.js:101:49)
at Object.exec (/home/ubuntu1204/code/github/R2/r2.js:134:25)
at Object.<anonymous> (/home/ubuntu1204/code/github/R2/bin/r2:2:21)
at Module._compile (module.js:441:26)
at Object..js (module.js:459:10)
at Module.load (module.js:348:32)
at Function._load (module.js:308:12)
at Array.0 (module.js:479:10)
at EventEmitter._tickCallback (node.js:192:41)
I tried to use r2 command on the CLI on Ubuntu 12.04 but it's not working.
Checked on Windows 7 and it's working.
CSSOM seems to be twice as fast and a closer match to the official CSS parsing specs so give it a shot when possible.
Very interesting initiative. As far as I can see, nothing is done to values of the 'clear' property, right?
Hi there,
I have just used your amazing tool. It surely is a time and life saver, however it had a problem with swapping for shadows and transitions.
In my case I have a transition on the "left" property but unfortunately this was not handled by the tool. Here are the rules that were not detected
.selector {
-webkit-transition:left 0.5s;
transition:left 0.5s;
-webkit-box-shadow:inset -3px 0px 5px 0px rgba(0, 0, 0, 0.5);
box-shadow:inset -3px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
It should turn to
.selector {
-webkit-transition:right 0.5s;
transition:right 0.5s;
-webkit-box-shadow:inset 3px 0px 5px 0px rgba(0, 0, 0, 0.5);
box-shadow:inset 3px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
Keep up the great work!!!
will result in
This is results in a CSS with syntax errors (has '}' ). Either r2 needs to completely ignore the empty rules or should produce correct empty rule in the output file.
Thanks
Ashok Kumar
There doesn't appear to be any License associated with R2. I was looking at using it for a project, but need to be aware of the license first. Is there any way you could add one?
Thanks!
We need to enable the TravisCI hook for the repo. @ded, since you're the owner, you're the only one who can change repo settings, thus do this.
Hello,
I tried to install your code like this:
sudo npm install R2 -g
But, I've got this error:
sudo: npm: command not found
Can you please tell me how to install npm command ?
Thanks
Currently "border-left-color" and "border-right-color" are not managed.
Sample :
.sidebar-tree-nav .collapsed>.caret {border-left-color: grey;}
TravisCI for the repo is still not enable. Either the hook is missing or it's not enabled in https://travis-ci.org/profile
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.