prefixed versions of rules are appearing after non-prefixed rules in generated styles

[danhayden]

Sample output:

.wrapper_5h5b2v {
    flex: 1 1 -moz-calc(100% - 300px);
    flex: 1 1 -webkit-calc(100% - 300px);
    flex: 1 1 calc(100% - 300px);
    -webkit-flex: 1 1 calc(100% - 300px);
    -ms-flex: 1 1 calc(100% - 300px);
}

As you can see in the the image below from Chrome dev tools this is causing non-prefixed rules to be overwritten in the browser by prefixed ones

[kentcdodds]

Genuinely curious here. What's the problem with having the vendor-prefix version overwrite the non-prefix version? THe result is the same right? I'm probably missing something.

[danhayden]

The vendor-prefix versions are not always the same as the final W3C compliant implementation.
Sometimes they can be buggy due to experimental, browser-specific code and may deviate from the specification.

[xymostech]

@danhayden Thanks for the report! I wasn't really convinced by this, but I found this CSS Tricks article explaining how border-radius and -webkit-border-radius act differently, so I definitely believe this.

It sounds like we need to ensure that the unprefixed versions come last. I think this might be most easily accomplished with a change to the auto-prefixer?

[elrumordelaluz]

Seems that inline-style-prefixer generate the -prefixed styles in the right order, also when values are Arrays like in the following code, where the un-prefixed is the last.

{
  // ...
  display: ['-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex'],
  //...
}

It's preferable to have the W3C implementation used when it's available, to help ensure consistency between all the browsers that support it.

---

Autoprefixer

Maybe this is for a separate issue, but take the opportunity to say that switch to autoprexier should be pretty useful, since allows to control the userAgent by queries provided by browserslist.

Seems that inline-style-prefixer don't handle browser versions using prefixAll method.

Just saying this because I'm having generated styles with WebkitTransition (for example) that is no more necessary.

[maxdeviant]

I'm currently running into a similar issue with the cursor rule.

export const canvas = {
    backgroundColor: '#f5f5f5',
    cursor: [
        'default',
        '-webkit-grab'
    ]
};

export default StyleSheet.create({
    canvas
});

.canvas_1bt2tmf {
    background-color: #f5f5f5;
    cursor: -webkit-grab;
    cursor: default;
}

In this case, I want webkit browsers to use the vendor-prefixed version of the rule, so I can make use of the grab cursor, but it does not look like the order I specify the rules in has any bearing on the generated CSS.

[xymostech]

Hmm. It looks like this problem might have been fixed by v2.0.5 in inline-style-prefixer (which is coincidentally causing our tests to fail https://travis-ci.org/Khan/aphrodite/builds/194582952). In #123 we were trying to decide if this is worth a major version bump, because it might have broken behaviour for other people. Looks like inline-style-prefixer released this as a bugfix though, so maybe we shouldn't make a major version for this? I'm going to fix the tests and then the next time we release this will be fixed.

[kentcdodds]

Hmmm... I'm not sure that I understand how this impacts things, but normally if you have to fix tests it means that other people will have to fix code (breaking change), unless you're shielding us from these changes in some way...

[danhayden]

Looks like this was fixed with the release of version 1.2.0 👍