transitionProperty and transitionTimingFunction not prefixed uniformly

[jjjreisss]

Background: In plain CSS, transition-property and transition-timing-function are interdependent.

.myClass {
  transition-property: 'property-1, property2, property-3';
  transition-timing-function: 'function-1, function-2, function3';
}

function-1 applies to property-1, function-2 to property-2, function-3 to property-3.

This is interdependence is not respected by inline-style-prefixer.

Consider the following code:

import Prefixer from 'inline-style-prefixer'

const originalStyle = {
  transitionProperty: 'transform, opacity',
  transitionTimingFunction: 'ease, step-end'
}

const prefixer = new Prefixer()
const prefixedStyle = prefixer.prefix(originalStyle)

console.log(prefixedStyle);

Expectation: ease applies to the transform transition, step-end applies to opacity
Reality: In this above block of code, the stdout is

{
  transitionProperty: '-webkit-transform, transform, opacity',
  transitionTimingFunction: 'ease, step-end',
  WebkitTransitionProperty: '-webkit-transform, transform, opacity',
  MozTransitionProperty: 'transform, opacity'
}

In particular, notice that transitionProperty now has three list items, but transitionTimingFunction still has two.

If we applied this style object to a DOM node, ease would apply to -webkit-transform, step-end to transform, and no timing function would be applied to opacity.

This bug was surfaced in necolas/react-native-web#852

[robinweser]

Oh wow, I didn't know about that! CSS I love you.
I'm not sure how to fix this dynamically, but I will try to find some time to debug it. Any help would be highly appreciated!

[necolas]

RNW is only using the static prefixer, might be easier to fix there first. It looks like not all the properties are being prefixed. If there's a MozTransitionProperty there should be a MozTransitionTimingFunction. At that point you should be able to check whether the transition properties are on the object, and if the transitionProperty value needs prefixed values (like when transform is included), you can create new transitionTimingFunction values to match.

[necolas]

@jjjreisss has anyone at Twitter looked into patching this?