`style` attribute is not converted to JS object

[jaredpalmer]

"The `style` prop expects a mapping from style properties to values, not a string. For example, 
style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by  
`JSXFromHTML`."

[jaredpalmer]

Figured out how to do it. StyleParser I stole from the old react-magic repo. Seems to work.

// @flow

import attributesMap from './attributesMap';
import StyleParser from './StyleParser';

type Attrs = { [key: string]: string };

type MapAttributesFunc = (attrs: Attrs) => Attrs;

const mapAttributes: MapAttributesFunc = (attrs = {}) => Object.keys(
  attrs
).reduce(
  (memo, key) => {
    if (attributesMap[key] || key === 'style') {
      memo['style'] = { ...new StyleParser(attrs[key]).toJSXString() };
    } else {
      memo[attributesMap[key] || key] = attrs[key];
    }
    return memo;
  },
  {}
);

export default mapAttributes;

// StyleParser.js
/**
 * Determine if the string ends with the specified substring.
 *
 * @param {string} haystack String to search in
 * @param {string} needle   String to search for
 * @return {boolean}
 */
function endsWith(haystack, needle) {
  return haystack.slice(-needle.length) === needle;
}

/**
 * Trim the specified substring off the string. If the string does not end
 * with the specified substring, this is a no-op.
 *
 * @param {string} haystack String to search in
 * @param {string} needle   String to search for
 * @return {string}
 */
function trimEnd(haystack, needle) {
  return endsWith(haystack, needle)
    ? haystack.slice(0, -needle.length)
    : haystack;
}

/**
 * Convert a hyphenated string to camelCase.
 */
function hyphenToCamelCase(string) {
  return string.replace(/-(.)/g, function(match, chr) {
    return chr.toUpperCase();
  });
}

/**
 * Determines if the CSS value can be converted from a
 * 'px' suffixed string to a numeric value
 *
 * @param {string} value CSS property value
 * @return {boolean}
 */
function isConvertiblePixelValue(value) {
  return /^\d+px$/.test(value);
}

/**
 * Determines if the specified string consists entirely of numeric characters.
 */
function isNumeric(input) {
  return input !== undefined &&
    input !== null &&
    (typeof input === 'number' || parseInt(input, 10) == input);
}

/**
 * Handles parsing of inline styles
 *
 * @param {string} rawStyle Raw style attribute
 * @constructor
 */
var StyleParser = function(rawStyle) {
  this.parse(rawStyle);
};
StyleParser.prototype = {
  /**
   * Parse the specified inline style attribute value
   * @param {string} rawStyle Raw style attribute
   */
  parse: function(rawStyle) {
    this.styles = {};
    rawStyle.split(';').forEach(
      function(style) {
        style = style.trim();
        var firstColon = style.indexOf(':');
        var key = style.substr(0, firstColon);
        var value = style.substr(firstColon + 1).trim();
        if (key !== '') {
          // Style key should be case insensitive
          key = key.toLowerCase();
          this.styles[key] = value;
        }
      },
      this
    );
  },

  /**
   * Convert the style information represented by this parser into a JSX
   * string
   *
   * @return {string}
   */
  toJSXString: function() {
    var output = [];
    for (var key in this.styles) {
      if (!this.styles.hasOwnProperty(key)) {
        continue;
      }
      output.push(
        this.toJSXKey(key) + ': ' + this.toJSXValue(this.styles[key])
      );
    }
    return output.join(', ');
  },

  /**
   * Convert the CSS style key to a JSX style key
   *
   * @param {string} key CSS style key
   * @return {string} JSX style key
   */
  toJSXKey: function(key) {
    // Don't capitalize -ms- prefix
    if (/^-ms-/.test(key)) {
      key = key.substr(1);
    }
    return hyphenToCamelCase(key);
  },

  /**
   * Convert the CSS style value to a JSX style value
   *
   * @param {string} value CSS style value
   * @return {string} JSX style value
   */
  toJSXValue: function(value) {
    if (isNumeric(value)) {
      // If numeric, no quotes
      return value;
    } else if (isConvertiblePixelValue(value)) {
      // "500px" -> 500
      return trimEnd(value, 'px');
    } else {
      // Probably a string, wrap it in quotes
      return "'" + value.replace(/'/g, '"') + "'";
    }
  },
};

module.exports = StyleParser;

[RafalFilipek]

I was thinking about it. But I'm not quite sure if I want to support such transformations inside jsxfromhtml. In fact such functionality must work nice both web & native. So

web

style="padding: 10px"  => { padding: '10px' } // AFAIK React 16 will not add prefix 'px'
style="padding: 2rem"  => { padding: '2rem }

native

style="padding: 10px"  => { padding: 10 }
style="padding: 2rem"  => { padding: 1 * baseFontSize }

I was working on that in my other project just-box. Maybe I should extract some functionality from that lib.

Right now you can grab style attribute in your mapper component.

const ElementWithStyles = ({ tag, style, ...rest }) => {
  const Component = tag;
  const reactStyles = processStyles(style);
  return <Component style={reactStyles} {...rest} />
};
<JSXFromHTML mapBlock={ElementWithStyles} mapInline={ElementWithStyles} />