What features do you want to see in RTLCSS 3.0?

[MohammadYounes]

This is an open topic for discussing features you expect in v3.0

Your input is highly appreciated!

[salarmehr]

A build-in watcher would be really useful for watchng ltr version of files.

May you please also show the simplest method to do that in the current version?

[MohammadYounes]

You may try this https://github.com/doowb/watch-cli

[salarmehr]

Thanks. I have just tried gulp-rtlcss package in a gulp watch task. It seems, it works seamlessly.

[ryanurban]

Hey @MohammadYounes, I just wanted to pop in and say thank you for this really awesome tool. It works very well and has been a pleasure to use on some of my projects. Also, fwiw, I just tried to give you a donation and PayPal is saying you can't accept funds right now or you need to setup your account or something.

Thanks again!

[MohammadYounes]

Thanks @ryanurban, I really appreciate it!

Not sure what's wrong with PayPal, May be try to send it directly to the email mentioned in the donations page 😄

[ryanurban]

Done, thanks again! If I think of anything for 3.0, I'll chime in here.

[MohammadYounes]

Sure thing! Very much appreciated.

[smmoosavi]

copy fonts #89 excluded .rtl.css files #90

[smmoosavi]

webpack plugin

[MohammadYounes]

@smmoosavi Thanks for the notes, as for the webpack plugin, currently there are:

• https://github.com/sidati/rtlcss-loader
• https://github.com/romainberger/rtl-css-loader
• https://github.com/romainberger/webpack-rtl-plugin

[smmoosavi]

load plugins via cli

rtlcss --plugin plugin1.js --plugin plugin2.js [...other options...]

[LeusMaximus]

Hi @MohammadYounes Thanks for rtlcss. Is it possible to get result file with modified styles only? Not all styles?

[smmoosavi]

I think converting style.css to style.common.css, style.rtl.css, style.ltr.css is better.

[MohammadYounes]

@LeusMaximus I don't think I'll be adding such option. This tool is intended to provide complete automation, it should generate a complete RTL style sheet. See Why make a complete RTL version ?.

As for possibility, I think writing a postcss plugin to diff the two versions will be a much better approach.

@smmoosavi I might consider a bidi version similar to https://github.com/jakob101/postcss-inline-rtl

[mustafa-online]

محمد يونس، كل الود والتقدير على مجهودك الجباااار ^_^

[sajaddp]

A feature for remove non-override cods. Sometimes we need find the changed codes for check them manually!

[MohammadYounes]

@sajaddp I don't fully understand your request. Would you clarify ?

[sajaddp]

@MohammadYounes RTL is not mirror anything and sometimes we need get modified styles in result for undo some wrong changes. For example, changing .text-left{ text-align:left; } To .text-left{ text-align:right; } Is wrong.

[MohammadYounes]

@sajaddp For an LTR first approach, your example is not wrong. Anyhow, you can use a diff tool to locate the differences. Thanks.

[MohammadYounes]

@sajaddp Moreover, see the discussion over here.

[mehdiyatrib]

Thank you @MohammadYounes for the tool, it's very helpful It's would be great if you can add the following option :

Let's say I have the following code in my main css: body{ margin-left : 15px; }

When applying the rtlcss you got : body{ margin-right: 15px; }

It work good if you change the whole stylesheet, but in this case when add the code in a separate file you got this : body{ margin-left: 15px; margin-right:15px; }

Adding manually " margin-left:0 / inherit " will fix the prob, but it would be great if it was automated.

[MohammadYounes]

@mehdiyatrib adding margin-left:0 / inherit would fix the problem in some cases, not all of them - see Why make a complete RTL version ?.

[sandrina-p]

Is it possible to output 2 files index.css and index-rtl.css ?

Input

input.css

.foo {
  border: none;
  margin-right: 1rem;
  padding-left: 1rem; /*rtl:ignore*/
}

Nowadays when I have this file, it will output everything it the same file using [dir] to separate layouts.

.foo {
  border: none;
  padding-left: 1rem;
}

[dir="ltr"] {
  margin-right: 1rem;
}

[dir="rtl"] {
  margin-left: 1rem;
}

I think it is better to output 2 files with index.css and index-rtl.css:

Output

output.css

.foo {
  border: none;
  margin-right: 1rem;
  padding-left: 1rem;
}

output-rtl.css

.foo {
  border: none;
  margin-left: 1rem;
  padding-left: 1rem;
}

Is that possible?

[MohammadYounes]

@sandrina-p I think you are confusing this with another lib, as rtlcss only generates one output.

Given

.foo {
  border: none;
  margin-right: 1rem;
  padding-left: 1rem;
}

You get

.foo {
  border: none;
  margin-left: 1rem;
  padding-right: 1rem;
}

[sandrina-p]

Yh, you are right, working on that

[smmoosavi]

support for jss (css in js)

this is what material-ui@next is using

https://github.com/cssinjs/jss/

[MohammadYounes]

Thanks @smmoosavi

This is not a feature to add. It's a plugin that needs to be authored.

[KhaledSMQ]

@MohammadYounes

I think big impact can be done to separate RTL and LTR from original theme by generating 2 files Means leave shared attributes in orginal file and generate 2 other files theme.rtl.css and theme.ltr.css to make sure serving small footprint cascade files. One more convert rendered dom direct in the browser without needs to generate files for the theme or direction

[MohammadYounes]

@KhaledSMQ Thank you! it will be considered.

[oscarhandsome]

i'm looking on the example but when i try to add /rtl:prepend:"Droid Arabic Kufi",/ or /rtl:14px/ in my scss, in new css, i haven't this commands. i'm using your script, my own gulp, and gulp-rtlcss

anyway thanks for your's job!

[MohammadYounes]

@oscarhandsome All you need is to use SASS interpolation syntax as mentioned here.

[oscarhandsome]

@MohammadYounes thank you for fast answer! But this is didn't help me. image

How can i identify a problem?

[MohammadYounes]

@oscarhandsome May be you have it lost in minification? This is off the current topic, It would be better if you opened a separate issue.

[M6stafa]

@MohammadYounes, It is good that your postcss plugin has an option to generate rtl and ltr version of the input that separate with dir attribute selector or a class that comes from options too. there is a postcss plugin that do this now, but it has some issues.

[MohammadYounes]

@M6stafa It will be considered once I find time to work on v3 as mentioned here.

[aminmashayekhi]

Proccess .scss files too in directory mode

[LazZiya]

@MohammadYounes you did a great job, you saved me a lot of days :)

I tried the online play ground with bootswatch themes but unfortunately couldn't produce a proper rtl versions of it. Is there any ready converted bootswatch themes? or shall we wait for the official versions?

[MohammadYounes]

Closing this as v3 is released with no major change, the main feature is compatibility with postcss 8.0