preactjs / preact-compat

ATTENTION: The React compatibility layer for Preact has moved to the main preact repo.
http://npm.im/preact-compat
MIT License
950 stars 148 forks source link

Numeric size attributes should be correctly normalized #526

Closed c-dante closed 5 years ago

c-dante commented 5 years ago

https://reactjs.org/docs/dom-elements.html#style

React will automatically append a “px” suffix to certain numeric inline style properties. If you want to use units other than “px”, specify the value as a string [...]

Here's a fiddle that shows that this is not supported: https://jsfiddle.net/seedante/68jk5gvs/32/

Basically, when going through preact-compat, the style attribute isn't correctly handled for things like top, bottom, left right.

marvinhagemeister commented 5 years ago

The second example for the compat version doesn't set any styles and instead tries to set them as props. Change this:

React.createElement('div', {
    position: 'absolute',
    backgroundColor: 'green',
    top: 10,
    bottom: 10,
    left: 20,
    right: 20,
  },
  ['Fails!']
);

to this:

React.createElement('div', {
    // This property was missing.
    style: {
      position: 'absolute',
      backgroundColor: 'green',
      top: 10,
      bottom: 10,
      left: 20,
      right: 20,
    }
  },
  ['Fails!']
);