HTMLtoJSX issue with line-height style about react-magic

[Daniel15]

Good catch, we probably need to special-case line-height. May need some special case here: https://github.com/reactjs/react-magic/blob/master/src/htmltojsx.js#L127-L129

[Daniel15]

Should determine where React pulls this blacklist from: http://facebook.github.io/react/tips/style-props-value-px.html

[ssorallen]

@Daniel15 Why modify those values at all? React 16 will stop appending 'px' for CSS values, so that modification will potentially break. Can HTMLtoJSX simply use the values verbatim?

[ssorallen]

https://facebook.github.io/react/blog/2016/04/07/react-v15.html#new-helpful-warnings

React DOM: When specifying a unit-less CSS value as a string, a future version will not add px automatically.

[Daniel15]

@ssorallen - That changelog entry only applies to strings (eg. {{width: '123'}}, not numbers (eg. {{width: 123}}). The behaviour for numbers remains unchanged.

Having said that, there's no harm in keeping the px suffix, so maybe HTMLtoJSX should just use it verbatim.

[sizer]

any news about this issue?

[Daniel15]

@mrdShinse I don't think anyone has submitted a PR to fix it yet

[drax10]

@ssorallen - That changelog entry only applies to strings (eg. {{width: '123'}}, not numbers (eg. {{width: 123}}). The behaviour for numbers remains unchanged.

Having said that, there's no harm in keeping the px suffix, so maybe HTMLtoJSX should just use it verbatim.

If this is the case, this can be solved simply by removing these lines https://github.com/reactjs/react-magic/blob/master/src/htmltojsx.js#L727-L729 along with the isConvertiblePixelValue function. Please advise if I'm missing some reason some styles need the px suffix omitted.

[SkyzohKey]

ESLint rule so this behavior can be prevented.

{
  ...
  "rules": {
    "no-restricted-syntax": [
      "error",
      {
        "selector": "Property[key.name=lineHeight] > Literal[value=/([0-9]+)[^px]$/]",
        "message": "Make sure to specify an unit when using lineHeight (see React issue: https://github.com/reactjs/react-magic/issues/53)"
      }
    ]
  }
}

[zomars]

I'm willing to make a PR if someone can tell me where I can add an exception for line-height.

EDIT: I see that you have this method to strip px values but I can't where is being used:

react-magic/src/htmltojsx.js

Line 259 in b915f5a

function isConvertiblePixelValue(value) {