Hi,

First of all let me thank you for doing a great work. You project made implementing an RTL version of our project much easier. But I did encounter a small issue when flipping gradients: for some reason if the start position is set to "0%" it is changed to "100%". Just "0" remains unchanged as expected.

Here's an example https://cssjanus.github.io/#input/div%20%7B%0A%20%20background%3A%20linear-gradient(to%20left%2C%20%2300ff00%200%25%2C%20%23ff0000%20100%25)%3B%0A%20%20background%3A%20linear-gradient(to%20left%2C%20%2300ff00%200%2C%20%23ff0000%20100%25)%3B%0A%7D

Great flawless product. Thanks! Feel free to close ;-)

It's very necessary to add cssjanus extension to vs code

CSSJanus only supports flipping one text-shadow or border-shadow, while the CSS syntax allows multiple.

(Originally filed at https://phabricator.wikimedia.org/T62805)

Input:

* {
 text-shadow: red 99px -1px 1px, blue 99px 2px 1px;
}

Expected output:

* {
 text-shadow: red -99px -1px 1px, blue -99px 2px 1px;
}

Actual output:

* {
 text-shadow: red -99px -1px 1px, blue 99px 2px 1px;
}

When given

#mirage-right-rail-checkbox:checked ~ #mw-navigation #mirage-right-rail-button:before {
  transform: rotate(180deg);
}

CSSJanus outputs

#mirage-left-rail-checkbox:checked ~ #mw-navigation #mirage-right-rail-button:before {
  transform: rotate(180deg);
}

instead of keeping it as is. CSSJanus shouldn't change the id.

It appears this only occurs when the ~ operator is involved. Replacing it with > causes the correct behaviour.

Example:
cssjanus.github.io with the above

Related: #5 and #35.

LTR CSS

.content > .right:not(.ignore) {
  display:block;
}

Expected:

.content > .right:not(.ignore) {
  display:block;
}

Result:

.content > .left:not(.ignore) {
  display:block;
}

Input:

.foo {
  left: 10px !important;
  float: left !important;
  padding: 1px 2px 3px 4px !important;
}

Expected:

.foo {
  right: 10px !important;
  float: right !important;
  padding: 1px 4px 3px 2px !important;
}

Actual:

.foo {
  right: 10px !important;
  float: right !important;
  padding: 1px 2px 3px 4px !important;
}

The padding rule isn't flipped.

Hi, I'm using stylis-plugin-rtl plugin with StyleSheetManager and i'm trying to exclude some rule but it doesn't work

/* @noflip */
.stx_yaxis {
  /* y-axis price styles */
  font-size: 12px;
  font-family: Helvetica, sans-serif;
  color: #333;
  background-color: #003eb9;
  direction: ltr !important;
}

am I missing something?

Some rules need to be ADDED in addition to just flipping, in order to "zero out" the previous rule.

Example:

.class {
position: absolute;
left:0;
}
.class2 {
margin-left:20px;
}

Should be transformed to:

.class {
position: absolute;
right:0;
left:auto //addition
}
.class2 {
margin-right:20px;
margin-left:auto; //addition
}

I'm updating CSSJanus in our codebase to the newest version (thank you!) and noticed the LICENSE.txt file has a generic copyright text 'Copyright [yyyy] [name of copyright owner]'.

Is this intentional? We want to make sure we are respecting the copyright.

See https://github.com/twitter/css-flip.

Has got various test cases we could incorporate (maybe we even have a bug or two).

When you work on projects that's primarily RTL and you depend on stylesheets from different vendors who code for LTR use mainly, you'll face a small confusing issue in selectors that have hardcoded direction in them like rtl, left, right etc. because when you convert the stylesheets to RTL those selectors will have an opposite effect of they appear to do. This issue might not be important for projects that is mainly LTR but in the other way it counts.

Let's take for example one of the common bootstrap classes that show this problem:

.pull-right {
    float: right
}

will be converted to

.pull-right {
    float: left
}

As you can see, it's a bit confusing when used in html markup with RTL as the primary direction.

What I'm proposing here is to allow changing directions in selectors as an option or two like swapLtrRtlInSelector and swapLeftRightInSelector that are disabled by default.

This would help show off how CSSJanus behaves and makes changes easier to verify visually.

Once in the repo, we can publish it on https://cssjanus.github.io/.

Especially for things like #36, a visual confirmation would help a lot to verify unit test expectations.

For after #2, we'll want to abstract the unit tests so that we ensure feature parity and collective regression testing. That way when we tag a version, we can be sure they're compatible.

Janus phase II – not just LTRTTB -> RTLTTB flipping, but also TTBLTR or TTBRTL.

I'm using create-react-app and I'm taking the easy approach to flip the whole CSS file to RTL and load it based on a change in the state.

Changing the CSS file based on a prop in the state if the easy part, but I also want to convert the CSS file to RTL before that step, how to do that with this package?

After #64 lands:

--- a/History.md
+++ b/History.md
@@ -1,5 +1,10 @@
 # Release History
 
+## v1.3.0 / !!TODAY!!
+
+* Drop support for Node.js 4; This release requires Node 6 (Timo Tijhof)
+* Fix unintended flipping of selectors containing a backslash (YairRand)
+* Make cssjanus.js compatible with Closure Compiler (Chris Scribner)
+

When the word "right" or "left" is used as part of the name of a custom CSS property, the name is flipped by CSSJanus when the property is assigned, but not when the property is used, those breaking it's functionality.

Example input:

body.theme-dark {
    --right-rail-bg: blue;
}

.right-rail {
    background: var(--right-rail-bg);
}

CSSJanus output:

body.theme-dark {
    --left-rail-bg: blue;
}

.right-rail {
    background: var(--right-rail-bg); /* invalid */
}

It is probably better to not change custom property names at all, but it should at least be consistent.

The second number is 'offset-y' which gets negated when it shouldn't be.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

When adding a tilde ~ after a class with the word 'left' in it, such as first-sibling.left-class ~ second-sibling, the word 'left' in the class name changes to 'right'.

Example of tilde causing class name change.

Input:

.foo {
    x-left-y: 10px;
}

Output should be unchanged, but isn't:

.foo {
    x-right-y: 10px;
}

Input:

.foo {
    unknown: left;
}

Output should be unchanged, but isn't:

.foo {
    unknown: right;
}

For #20 I would like to have some test with only three values. Example:

[
    "border-radius: 5px 9px 7px",
    "border-radius: 9px 5px 9px 7px"
],
[
    "border-radius: 5px 9px 7px / 3px 4px",
    "border-radius: 9px 5px 9px 7px / 4px 3px"
]

But since cf8f1e0 tests are perfoming round-trip assertions too, which dosn't work for the cases above. Can we add a per-case option to disable these type of tests?

This does not flip

margin: 0 5px 0 0

This does flip

margin: 0 5px 0 0;

As tested on Demo

Over many years a text-indent: -9999em or similar was a common solution for image widgets, where the text was only meant to be visible to screenreaders.
See for example: https://codepen.io/anon/pen/aqQWQJ

In RTL languages such property/value combinations could lead to unintended visibility of text.
It might be though to identify a clear path on when to switch it over.

padding-left: calc( 1px +1em );
padding: 1px 2px 3px 4px;
padding: 1px 2px 3px calc( 1px + 1em );

(test)
The first two lines are flipped, the last is not.

Any URL that looks like a data URI should be skipped over. Otherwise image data will occasionally be corrupted, and in the case of the PHP port I've already seen the regular expressions engine simply blank out the entire stylesheet trying to operate on a data URI which was especially large.

Test case

Shouldn't a class that goes like this:
.class { display: flex; flex-direction: row; justify-content: flex-start; }
be translated into:
.class { display: flex; flex-direction: row-reverse; justify-content: flex-start; }

As of the web demo, this doesn't happen.

Hi guys,

I'm facing a small issue in the following rule:
transform: scaleX(1);

When running it in the cssjanus there is nothing changed, maybe not all developers need to change this property, but some of them ( I'm one of these developers :) ) for sure need it to be changed to:
transform: scaleX(-1);

So I suggest if we can have a comment to be written beside the property and when running into cssjanus it convert it to the desired, something like that one /* @noflip */

It can be like:
transform: scaleX(1); /* @changeto 'transform: scaleX(-1);' */

Can you provide a license for this code?

As of v1.0.2 bar.right.png is no longer flipped (unit tests are failing).

Consider this example

[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}

the code doesn't take the "," as end of rule and therefor transform it as well.
I'm kindda new to Regex but I came up with this solution for now :

lookAheadNotLetterPattern = '(?![a-zA-Z]|[\\,])'

If this is wanted?

Consider the following definition:

background: hsl(150 30% 30%);

The percent values are about the saturation and lightness of the generated color and are unrelated to directions.

Yet, when passing it through CSSJanus you get:

background: hsl(150 70% 30%);

which is totally wrong.

Another example:

background: color-mix(in srgb, red 30%, blue);

turns into

background: color-mix(in srgb, red 70%, blue);

The root cause is probably this regex which tries to capture background-position values out of the background shorthand property.

(As a side note, I'm not sure how this is even supposed to work well for actual position values, considering that the default alignment direction is still "left". For example,

background-position: 30%;

turns into

background-position: 70%;

which seems off)

We are getting the following issue upon clicking on Submit button. Please have a look.

"TypeError: cssjanus.transform is not a function".

Hi all, I've been working on a tool to identify instances of events registered to the wrong object in uses of some JavaScript event-driven APIs, as part of a research project.
The tool flagged line 74 in test/bench.js, on the registration of the "end" event.

The reason I believe this is an error as follows (from looking at the nodejs http API documentation, particularly https://nodejs.org/api/http.html#http_http_get_options_callback):
The return of https.get(...) is an http.ClientRequest object, and res, as the argument to the callback handleResponse passed to get, is an http.IncomingMessage.
“end” is an event on http.IncomingMessage, and not on http.ClientRequest (you even have a registration of a listener for “end” on res, in the body of the handleResponse callback).

A common event indicative of an error to listen to on http.ClientRequest is “timeout”, so my guess is that maybe your registration on line 74 should be for “timeout” instead of “end”.

Add jshint to the npm-test (which will run it in the Travis build). Be sure to add a .jshintrc file first, then add jshint to the devDependencies and run jshint . from scripts.test

And (after #2) for php, and python as well.

• Example for php: .travis.yml in Krinkle/intuition.git
• Example for python: .travis.yml in countervandalism/cvn-clerkbot

Visit https://cssjanus.github.io/demo/.

Console output:

Uncaught TypeError: cssjanus.transform is not a function at HTMLButtonElement.buttons..onclick ((index):488)

It is probably easier to show in code. The following CSS snippet will not flip both transforms:

drawer {
  transform: translate(-100%)
}
drawer {
  transform: translate(100%)
}

This seems to be because the transform RegExp is selecting too much. It will work if both or even one of the rules have a semi-colon after it:

drawer {
  transform: translate(-100%);
}
drawer {
  transform: translate(100%);
}

I'm not sure if it affects any other rules. This seems more problematic for compilers such as Sass which automatically removes the last semi-colon for properties to save some space.

Other node tasks use special css comments as well, however those css comments usually are of the form
/*! comment */ while this project uses /* @noflip */ , it would be okay if also accepted /*! @noflip */

like matching and changing
object.style.paddingRight=5;
object.css('padding-right',5);
object.css({'padding-right':5});
object.animate({'padding-right':5});
object.velocity({'padding-right':5});

Hey!

Thanks for this amazing library.

One suggestion:

Should scaleX(1) be flipped to scaleX(-1) and vice versa?

My use-case is the arrow icon, that points to the left, but in RTL it's on the other side, and the direction of arrow doesn't make sense any more.

Is it possible to no-flip a set of selectors, for example:

/* rule1 and rule2 will be preserved
/* @noflipStart */
.rule1 {...}
.rule2 {...}
/* @noflipEnd */

My use case is that I put all CSS in one file and than pass it through cssjanus to get an RTL version of it. Some libraries already handle RTL themselves so I don't want to process them. Something like noflipStart and noflipEnd will allow to do that.

How would you feel about moving the PHP port (from MediaWiki) and original (now abandoned) implementation in Python (from Google) to this repository. We could implement (partially?) shared test cases and other things, and a nice common versioning and release notes scheme.

The nodejs implementation can continue to be published on npm. We could consider publishing the PHP implementation on Composer.

In CSS transitions, they use other properties for manipulation in order to create a nice, smooth effect. It means in the value, they will have properties like right, and left. They should be flipped too 👍