Issues with -webkit- prefixed styles

[soluml]

I'm using css-to-radium with the radium-loader for Webpack. Everything seems to be working fine for non prefixed properties, but prefixed properties (like -webkit-transform) are being returned like so:

.reader {
  webkittransform: "translateZ(0)"
}

Instead, according to this doc from React, all prefixed properties should begin with a capital letter (except for -ms-) like so:

.reader {
  WebkitTransform: "translateZ(0)"
}

Is this intentional or am I missing something? This would be extremely useful for my project!

Thanks!

[alexlande]

Not intentional. I'll take a look and see if I can reproduce.

[soluml]

Appreciate it, I've been groking the source code as well and will provide a pull request if I can find something. Thanks for looking!

Below is the exact string that's being passed into cssToRadium from within the radium-loader if you're having trouble duplicating. I have verified that I'm using version 1.0.2 which appears to be latest in NPM.

.reader{-webkit-overflow-scrolling:touch;height:100%;overflow-x:hidden;overflow-y:auto;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);width:100%}.reader-core{background:transparent;border:0;height:100%;left:0;padding:0;position:absolute;top:0;-webkit-transform:translateZ(0);transform:translateZ(0);width:100%}

[alexlande]

Double camelCase going on here is causing the problem: https://github.com/FormidableLabs/css-to-radium/blob/master/index.js#L25-L36

[alexlande]

Fixing now!

[alexlande]

Just published 1.0.3 with this fix.

[soluml]

Was just going to say it looks like this line is your problem: https://github.com/FormidableLabs/css-to-radium/blob/master/index.js#L36

Thanks for the fix! Could you also force the radium-loader to depend on 1.0.3?

[alexlande]

I don't manage radium-loader, but it's not pinned to an older version of css-to-radium so if you reinstall it you should be good. I'm sure they would accept a PR bumping the version too :+1:

[soluml]

Perfect, thanks, will do.