Transition issue about node-cssjanus HOT 1 CLOSED

@muhamed87 Thanks for your report.

It sounds like want to use scaleX() to horizontally mirror a visual element for RTL mode. That makes perfect sense and is a common technique I've used myself as well. Especially with complicated icons this can save time and removes the need for producing separate icons for example.

However, while this solution is great, it does require the addition of 1 manual rule to make it work.

scaleX(1) on its own does not do anything in LTR mode. As such, we cannot reliably use this as an instruction to inverse it in RTL mode.

In this case an RTL-only rule would work best, by using @noflip.

For example:

.arrow-start { /* Points left in LTR mode. */
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right: 10px solid blue; 
}

/* @noflip */ [dir=rtl] .arrow-start {
  transform: scaleX(-1);
}

Note that in this particular example there is actually no need for an override with @noflip since CSSJanus would normally already replace border-right with border-left, which naturally makes the triangle point the other way in RTL.

from node-cssjanus.