Support `-webkit-appearance` and `-moz-appearance` in style object

Current behavior:

I’m trying to hide the up/down arrow in <input type="number"> in Chrome and the recommended way is to add "-webkit-appearance": "none" and "-moz-appearance": "textfield" to the input. However when I do:

"input::-webkit-outer-spin-button, input::-webkit-inner-spin-button": {
    "-webkitAppearance": "none",
    "margin": 0
},
  "input[type=number]": {
    "-mozAppearance": "textfield"
}

I’m getting an error saying Using kebab-case for css properties in objects is not supported. even when it renders correctly. I think the problem is that processStyleValue needs to whitelist those attributes.

I also tried this:

"input::-webkit-outer-spin-button, input::-webkit-inner-spin-button": {
    "webkitAppearance": "none",
    "margin": 0
},
  "input[type=number]": {
    "mozAppearance": "textfield"
}

But it didn’t get parsed correctly.

Expected behavior: Users should be able to express -webkit-appearance and -moz-appearance via style object. Sorry if this is not an actual bug.

[Andarist]

The correct way to write those is this:

{
  "input::-webkit-outer-spin-button, input::-webkit-inner-spin-button": {
    "WebkitAppearance": "none",
    "margin": 0
  },
  "input[type=number]": {
    "MozAppearance": "textfield"
  }
}

You can check out a working example here: https://codesandbox.io/s/rough-field-wooin

This follows the implementation used by Facebook (and thus probably by React itself): https://github.com/facebook/fbjs/blob/0de589c70c0248ec093ca8e35b6aa6bd16fcac5c/packages/fbjs/src/core/hyphenateStyleName.js

[LilyMGoh]

@Andarist That doesn’t work with TypeScript. Please try it and you’ll get Type '{ WebkitAppearance: string; margin: number; }' is not assignable to type 'Interpolation<undefined>'. compile-time error.