HTMLtoJSX issue with line-height style

[ghost]

React has shorthand for specifying pixel values in style. So when you put into HTMLtoJSX something like this <div style="line-height: 50px;"></div>' it produces <div style={{lineHeight: 50}}> The problem is that line-height acceptes plain values (like line-height: 50), so the above JSX is actually sets line-height style for 50, not 50px.

[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:

https://github.com/reactjs/react-magic/blob/b915f5a3c7ef4294f8b8ac0381012e93fd4f1bd1/src/htmltojsx.js#L259