mohammadyounes / rtlcss Goto Github PK
View Code? Open in Web Editor NEWFramework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)
Home Page: https://rtlcss.com
License: MIT License
Framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)
Home Page: https://rtlcss.com
License: MIT License
I would like to add a ".rtl" to the name of all my classes that are generated with the rtlcss tool, is there a way to do this with the rtlcss tool?
Thanks
margin
, padding
, border properties etc. missing this feature compared to https://github.com/twitter/css-flip
Feature is missing compared to https://github.com/twitter/css-flip
Add the ability to surround a set of rules with a directive to prevent rtl conversion.(details)
The new options directives, allows settings RTLCSS options inside the CSS document. With support for nested options overrides.
The new syntax will be as follows:
/*rtl:begin:options:
{
"autoRename": true,
"stringMap":[
{
"name" : "prev-next",
"search" : ["prev", "Prev", "PREV"],
"replace" : ["next", "Next", "NEXT"],
"options" : {"ignoreCase":false}
}]
}
*/
.demo-prev, .demo-Prev, .demo-PREV { content: 'p'; }
.demo-next, .demo-Next, .demo-NEXT { content: 'n'; }
/*rtl:end:options*/
Hi.
There is a problem with pointing basic labels in newer versions of Semantic-UI rtl build. Semantic UI version is 2.1.8.
<div class="field">
<label for="id_contact_name">نام</label>
<input id="id_contact_name" maxlength="100" name="contact_name" type="text">
<div class="ui pointing red basic label">این فیلد لازم است.</div>
</div>
JSFiddle: https://jsfiddle.net/ty6j8ee5/
I've noticed that unchanged rules (eg. ignored rules) are written to the output file. Is there a way to avoid this duplication?
style.css:
body{
font-family:"Droid Sans", "Helvetica Neue", Arial/*rtl:prepend:"Droid Arabic Kufi", */;
font-size:16px/*rtl:14px*/;
}
/*rtl:ignore*/
.ignored{
font-size:16px;
color:red;
}
style.rtl.css:
body{
font-family:"Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial;
font-size:14px;
}
.ignored{
font-size:16px;
color:red;
}
Expected style.rtl.css:
body{
font-family:"Droid Arabic Kufi", "Droid Sans", "Helvetica Neue", Arial;
font-size:14px;
}
Hi,
I'm new to this library, and I can't understand how I turn on selector renaming (from the docs I understood it's given by default, but I can't make it work).
For example:
rtlcss.process(".navbar-right { float: right !important; }", {greedy: true});
Will create the following:
.navbar-right { float: left !important; }
The value is being converted, but the selector isn't.
I would like the above example to create this string:
.navbar-left { float: left !important; }
How can it be? Am I doing something wrong?
Thanks,
Tomer
Hello there,
Firstly, I would like to thank you for the great plugin it make things easier to build an rtl version of any css file.
Secondly, I would like to suggest a feature or a flag that only export the reflected rules/properties only into the output file instead exporting all the rules/properties into the output file. Some CMSs e.g Drupal uses the convention of style.css
for all ltr
languages and style-rtl.css
for rtl
, basically when viewing the drupal site as a ltr language the style.css only is called and if viewing the site using a rtl language the style.css
get included first and the style-rtl.css
get included second where the rtl file only overrides the properties that needs to be reflected to rtl. That option will benefit such systems without any need to remove the original style.css file from the rtl version.
It will be great if we could have an option to export only the overridden css properties, I am using gulp-rtlcss with less to compile my css.
Thank You.
Planning RTLCSS 2, Your input is very much appreciated!
I would like the ability to specify a log folder so when using rtlcss -d source-folder dest-folder
it will save the rtlcss logs per file like the sourcemap
and also to be able to set it in the config file.
so for example:
ltr-dir1/file1.css
ltr-dir2//file1.css
will output an optional additional:
log-dir1/file1.log
log-dir2//file1.log
configurable file renaming scheme for the rtl will be useful
(i.e some projects require file-rtl.css
some file_rtl.css
some file.rtl.css
etc.
Hey. there may be a workaround but my selector is getting overwritten using the gulp rtlcss package.
Is this a bug?
Is there a way to suppress this without having to use rtl:ignore or having to change my classname?
ie.
/*rtl:rename*/
.glomo-right-now
width: 305px
gets renamed to:
.glomo-left-now
width: 305px
Thanks in advance.
Could you please check this behaviour?
require("rtlcss").process(`.text-left {
text-align: left;
}`, {
autoRename: false
});
// output: '.text-left { text-align: right; }'
require("rtlcss").process(`.text-left {
text-align: left;
}`, {
autoRename: true
});
// output: '.text-left { text-align: right; }'
How could I get it to rename them both or ignore them both?
Hi there, I have found that popup in Semantic UI which use rtl not working. Is that issue in rtlcss or in Semantic UI?
Thanks
Hi, thanks as always Mohammad for your hard work with RTLCSS.
Since we swapped many components to flex
in 2.0, I've noticed rtlcss does not modify flex positioning rules. Would you consider adding support for swapping rules like flex-direction
and align-items
in rtlcss?
Sometimes we need not only to RTL the css, but to change the value as well; For example here is my source css
.somediv {
right : 0px /*rtl:5px*/;
}
Desired Output:
.somediv {
left:5px;
}
Actual Output (Not desired):
.somediv {
right:5px;
}
Is there anyway I can achieve this in current version?
Sometimes I want declare transform: scaleX(1) to make sure a element won't be scaled,so I expect rtlcss
could replace 1
to -1
. Then this element will flipX.
Not sure why background-image
needs to be handled by this tool. What's the reason?
It seems rtlcss isn't working with postcss-js:
var postcss = require('postcss-js');
var rtlcss = require('rtlcss');
var autoprefixer = require('autoprefixer');
var process = postcss.sync([ rtlcss, autoprefixer ]);
var css = {'.foo': {
borderColor: 'red green blue black',
left: '5px',
transition: 'width 5s'
}};
console.log(process(css));
/*
{'.foo': {
borderColor: 'red green blue black',
left: '5px',
WebkitTransition: width 5s ease,
transition: 'width 5s ease'
}}
*/
As layout with flexbox becomes more common, RTL support for flexbox properties will be useful. For example, reversing the flex-direction
and content alignment.
Right now RTLCSS only processes declarations with comments in the value
// rtlcss.js
for (var x = 0; x < config.instructions.declarations.length; x++) {
var pi = config.instructions.declarations[x];
if (decl._value && decl._value.raw && decl._value.raw.match(pi.expr) && pi.action(decl)) {
util.logDeclAction(decl, pi);
return;
}
}
decl._value
is only populated by postcss when the value is not clean
// postcss/lib/parser.js
// Parser.prototype.raw
for (token of tokens) {
if (token[0] === 'comment') {
clean = false;
} else {
value += token[1];
}
}
if (!clean) {
let origin = '';
for (token of tokens) origin += token[1];
node['_' + prop] = {
value: value,
raw: origin
};
}
I propose that we run the PI on all declarations with or without comments
my use case:
Sass strips out comments inside declarations, rendering declaration PIs useless.
my workaround is to use escaped sequences of the original PIs and introduce new regex to RTLCSS
Hi Mohammad,
Please check these processes:
> require('rtlcss').process(`body { color: #ff0; }`);
// output: 'body { color: #ff0; }'
> require('rtlcss').process(`body { background: #ff0; }`);
// output: 'body { background: #ff100%; }' WRONG
> require('rtlcss').process(`body { background: #ff1; }`);
// output: 'body { background: #ff1; }'
> require('rtlcss').process(`body { background: #ee0; }`);
// output: 'body { background: #ee100%; }' WRONG
> require('rtlcss').process(`body { background: #f00; }`);
// output: 'body { background: #f00; }'
> require('rtlcss').process(`body { background: #f0f; }`);
// output: 'body { background: #f100%f; }' WRONG
> require('rtlcss').process(`body { background: #0ff; }`);
// output: 'body { background: #100%ff; }' WRONG
> require('rtlcss').process(`body { background: #fffff0; }`)
// output: 'body { background: #fffff100%; }' WRONG
It seems like if there was one zero digit in hex-colors it would be converted weirdly. Only with one zero, and only with background
property.
Is there an option to ignore another props which have noting to do to rtl?
For example
.selector{
background: red;
display:inline-block;
padding:5px 10px 15px 20px;
}
OUTPUTS
.selector{
padding:5px 20px 15px 10px;
}
Thanks :)
RTLCSS is awesome. I want to use as example of PostCSS power. But I can puut a link, because RTLCSS’s README doesn’t tell what plugin does (many of users doesn’t know what is RTL is).
Maybe you put a CSS input/output example and some before/after screenshot?
Is there any option for stripping newly changed props to new file. So the newly created css will output the changed property and selector not all the styles with different direction value.
It's not an issue but rather a question on how to use it with Webpack and postcss. My scenario is to produce two different packages one with RTL and the other is with LTR and to request one of them based on interface switching.
Any idea would be highly appreciated!
doesn't seem to get flipped. feature missing compared to https://github.com/twitter/css-flip
hi there is something about rtling a css file that usually is ignored.
when there is a left or right rule for a selector with non-static position in rtl proccessing that rule first : must take auto value. and second must be filliped.ie:
left: 10px;
must convert into:
left: auto;
right: 10px;
if not that selector now have 2 rule:
left: 10px;
right: 10px;
Processing all css files in a folder will be a great feature. I started working on a PR but I'm new to nodejs and my code was ugly :-)
Can I output changes only using CLI?
Wordpress uses rtl.css file for RTL languages, so adding that file instead of changing the main css file is very helpful.
Likely to involve some small changes to support 4.0 API
Unlike ignore, a new directive to remove the rules from RTL version.
This plugin is quite aggressive in what in changes in selectors and urls. I think almost all the options should be false
by default, especially swapLeftRightInUrl
, swapLtrRtlInUrl
, swapWestEastInUrl
, and autoRename
because you have to intentionally agree to those conventions for it to work for you. I don't think we'd have use for autoRename
at Twitter; that one seems particularly tied to one way of writing CSS.
It might be nice to merge the url options into a single one that takes a map of strings to swap (i18n friendly too, as people can define their own non-english words if necessary).
Hi. Can you help me to use rtlcss with grunt-postcss ? How to set settings?
Not supported in any contemporary browsers. I think Opera 15 dropped support and it was never implemented elsewhere.
You really should add a public interface that can be used in PostCSS's use() function. For example:
var processed = postcss().use(
autoprefixer.postcss
).use(
rtlcss.process
).process(css);
See differences between node-css-mqpacker 0.0.2 and 0.0.3
Adds new rules or declarations to the RTL version.
I have this map:
{
name: 'import-rtl-stylesheet',
search: [ '.css' ],
replace: [ '-rtl.css' ],
options: {
scope: 'url',
ignoreCase: false
}
}
The map should replace @import url(common.css);
with @import url(common-rtl.css);
. That works great.
But the map also changes
@import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,600,700");
to
@import url("//fonts.googleapis.com.css?family=Open+Sans:400italic,700italic,400,600,700");
(Note the slash which is replaced with a dot.)
Since search
and replace
is passed to RegExp I have escaped the dot (search: [ '\.css' ]
) but stil getting the same output.
Any idea what the issue is?
Good feature.
Maybe I've missed sommething, but input source maps don't seem to be taken into account. Our compiled Sass code has a source map, but rtlcss only maps back to the Sass' CSS output instead of the original Sass files.
Also, the generated source map file only contains the text "undefined" and the source map itself is inlined as a data URI in the output CSS.
I came across a strange issue that may be of interest to you or may be someone else can face such issue and come here and will find it useful.
I am using SASS for my css, and there was some typo in a file I included... The source css generated was as follows:
.something {
background: ligthen(#eee, 25%);
}
/* some more css here */
.elm1{
background : url('../img/abc.jpg');
}
/* some more css here */
.elm2{
background : #666;
}
Now I applied RTLCSS on this file... and the result was strange. All background attributes were shifted. and the declaration with typo was containing a temp in it. i.e.
.something {
background: ligthen(temp, 25%);
}
/* some more css here */
.elm1{
background : #eee;
}
/* some more css here */
.elm2{
background : url('../img/abc.jpg');
}
Though removing the error in css solved the issue, but at least RTLCSS should not propagate the error in a strange way .. :)
Thanks
Requested by @am11
Web Essentials requires rtlcss to handle its configuration lookup on its own, searching current working folder all the way up to the root.
property doesn't seem to be supported. feature missing compared to https://github.com/twitter/css-flip
Awesome project here! At Mozilla, we've been writing RTL styles by hand for years for all our fully localised sites. It's great to now have a tool that can auto-generate styles from LTR stylesheets (though, it'd be great it RTL stylesheets could be generated from LTR stylesheets).
Instead of having to conditionally load in RTL stylesheets, we treat RTL languages as first-class citizens and actually include [dir=rtl]
for only RTL style overrides. Here's an example lifted from the Firefox Marketplace CSS:
.category-header-icon {
display: inline-block;
margin-left: 6px;
}
[dir=rtl] .category-header-icon {
margin-left: 0;
margin-right: 6px;
}
rtlcss is awesome, but would it be possible to, instead of generating a separate RTL stylesheet, to auto-generate the RTL in the same stylesheet? Here are two suggested sample uses I can think of:
.category-header-icon {
display: inline-block;
margin-left: 6px;
}
[dir=rtl] .category-header-icon {
margin-left: 0;
margin-right: 6px;
}
When the direction style needs to be different, you can just target [dir]
.
[dir=ltr] .category-header-icon {
display: inline-block;
margin-left: 6px;
}
[dir=rtl] .category-header-icon {
display: inline-block;
margin-right: 6px;
}
Thanks!
(I'm not sure if this is an issue with the grunt plugin or rtlcss.)
Hi, I'm trying to convert an old property rule to a plugin for 2.0.
The old code:
properties : [
{
name: 'swap-dashicons-left-right-arrows',
expr: /content/im,
action: function( prop, value ) {
if ( value === '"\\f141"' ) { // dashicons-arrow-left
value = '"\\f139"';
} else if ( value === '"\\f340"' ) { // dashicons-arrow-left-alt
value = '"\\f344"';
} else if ( value === '"\\f341"' ) { // dashicons-arrow-left-alt2
value = '"\\f345"';
} else if ( value === '"\\f139"' ) { // dashicons-arrow-right
value = '"\\f141"';
} else if ( value === '"\\f344"' ) { // dashicons-arrow-right-alt
value = '"\\f340"';
} else if ( value === '"\\f345"' ) { // dashicons-arrow-right-alt2
value = '"\\f341"';
}
return { prop: prop, value: value };
}
}
],
What I currently have:
plugins: [
{
name: 'swap-dashicons-left-right-arrows',
priority: 10,
processors: { // The docs mention an array here, but it needs to be an object?
'property': [
{
expr: /content/im,
action: function( prop, value ) {
console.log(arguments);
if ( value === '"\\f141"' ) { // dashicons-arrow-left
value = '"\\f139"';
} else if ( value === '"\\f340"' ) { // dashicons-arrow-left-alt
value = '"\\f344"';
} else if ( value === '"\\f341"' ) { // dashicons-arrow-left-alt2
value = '"\\f345"';
} else if ( value === '"\\f139"' ) { // dashicons-arrow-right
value = '"\\f141"';
} else if ( value === '"\\f344"' ) { // dashicons-arrow-right-alt
value = '"\\f340"';
} else if ( value === '"\\f345"' ) { // dashicons-arrow-right-alt2
value = '"\\f341"';
}
return { prop: prop, value: value };
}
}
]
}
}
]
When I run the task I get a "Warning: Cannot read property 'value' of undefined Use --force to continue." error. After adding the directives: {},
attribute I get "Warning: Cannot read property 'length' of undefined Use --force to continue."
Here is the output when running the grunt task in verbose mode:
// …
Files: src/wp-includes/css/wp-pointer.css -> build/wp-includes/css/wp-pointer-rtl.css
Options: map=false, opts={"autoRename":false,"clean":false,"processUrls":{"atrule":true,"decl":false},"stringMap":[{"name":"import-rtl-stylesheet","exclusive":true,"search":[".css"],"replace":["-rtl.css"],"options":{"scope":"url","ignoreCase":false}}]}, plugins=[{"name":"swap-dashicons-left-right-arrows","priority":10,"directives":{},"processors":{"property":[{"expr":{}}]}}], saveUnmodified=false
Reading src/wp-admin/css/about.css...OK
Warning: Cannot read property 'length' of undefined Use --force to continue.
Any idea what's wrong here?
var rtlcss = require('rtlcss');
var result = rtlcss.process(".text-right { text-align: right; }");
But the result is: .text-right { text-align: left; };
As you see the selector name will not change on the process
i.e:
while the example with i.icon.angle.left:before and i.icon.angle.right:before show it potential,
this can get out of hand fast, consider the following:
<div class="left-item"">...</div>
.left-item { background-color: blue;}
but without a matching right-item class in the markup.
auto rename will replace the class in the css, leaving the markup pointing nowhere.
and since unfortunately this is frequent, i would like an option for auto rename to not only limit replacing when there is a directional content, but also (or even instead) when he can NOT find a mirror selector.
i know this is a big feature, but without that ... auto rename will be mostly disabled.
other option is allowing to run auto rename on its own?
this way, one can turn it off, run trough RTLCSS,
than run the rtl-ed results through auto rename,
making the diff to inspect such cases in the markup a lot smaller.
(this will work when one have control over the markup)
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.