Add patterns for translate(x[,y,z]) and translateX(x)

[edg2s]

No description provided.

[Krinkle]

I'll first add a visual test on the demo to make it easier to see the problem and confirm the fix.

[edg2s]

Visual test?

[Krinkle]

See https://cssjanus.github.io/demo/. I've verified the fix to behave as one would expected (the current demo shows that it isn't being flipped). Sometimes the flipping of the values is not entirely intuitive. A visual confirmation makes it easier to review.

[Krinkle]

We may want to limit this to values in transforms, but then we need to take care to properly support multiple values as well such as transform: rotate(10deg) translateX(10px) translateY(5px);.

[yonatan]

For multiple arbitrary transformations (rotate, skew, matrix, etc) something like "transform: scaleX(-1) [original transformations] scaleX(-1)" should do the trick. As in:

LTR: http://codepen.io/anon/pen/WRZJyK
RTL: http://codepen.io/anon/pen/dNVejp

The transform-origin property can be a problem when unit lengths are involved. Might be possible with CSS calc.

[edg2s]

We should also tag 1.1.4 so PHP can use the new tests.

[Krinkle]

If infeasible or needlessly complex, I'm willing to reconsider. But I'd prefer to be a bit more future-proof and avoiding false-positives by limiting this to matches on property transform: instead of just anywhere.

Our current regex-based approach is already a bit fragile and prone to false-positives (especially in freeform strings), but I'd like to limit that as much as we can with little effort.

[edg2s]

Added match for transform property - this now only matches one 'transform' per rule, but having multiple transformX's or a transform+transformX would be nonsensical.