feat(HTML): rewrite how text styles are applied

This should be a much needed improvement addressing some of the oldest
issues of this plugin.

The new algorithm to be tried is explained
[here](meliorence#102 (comment)
ssuecomment-375594792)

Author: Exilz

src/HTML.js

@@ -1,8 +1,16 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { View, Text, ViewPropTypes, ActivityIndicator, Dimensions } from 'react-native';
-import { BLOCK_TAGS, TEXT_TAGS, MIXED_TAGS, IGNORED_TAGS, TEXT_TAGS_IGNORING_ASSOCIATION, STYLESETS, TextOnlyPropTypes } from './HTMLUtils';
-import { cssStringToRNStyle, _getElementClassStyles, cssStringToObject, cssObjectToString } from './HTMLStyles';
+import { cssStringToRNStyle, _getElementClassStyles, cssStringToObject, cssObjectToString, computeTextStyles } from './HTMLStyles';
+import {
+    BLOCK_TAGS,
+    TEXT_TAGS,
+    MIXED_TAGS,
+    IGNORED_TAGS,
+    TEXT_TAGS_IGNORING_ASSOCIATION,
+    STYLESETS,
+    TextOnlyPropTypes
+} from './HTMLUtils';
 import { generateDefaultBlockStyles, generateDefaultTextStyles } from './HTMLDefaultStyles';
 import htmlparser2 from 'htmlparser2';
 import * as HTMLRenderers from './HTMLRenderers';
@@ -149,36 +157,6 @@ export default class HTML extends PureComponent {
         this.defaultTextStyles = generateDefaultTextStyles(baseFontStyle.fontSize || 14);
     }
 
-    filterBaseFontStyles (element, classStyles, props = this.props) {
-        const { tagsStyles, baseFontStyle } = props;
-        const { tagName, parentTag, parent, attribs } = element;
-        const styles = Object.keys(baseFontStyle);
-        let appliedStyles = {};
-
-        for (let i = 0; i < styles.length; i++) {
-            const styleAttribute = styles[i];
-            const tagToCheck = tagName === 'rawtext' ? parentTag : tagName;
-            const styleAttributeWithCSSDashes = styleAttribute.replace(/[A-Z]/, (match) => { return `-${match.toLowerCase()}`; });
-            const overridenFromStyle = attribs && attribs.style && attribs.style.search(styleAttributeWithCSSDashes) !== -1;
-            const overridenFromParentStyle = parent && parent.attribs && parent.attribs.style && parent.attribs.style.search(styleAttributeWithCSSDashes) !== -1;
-
-            const overridenFromTagStyle = tagToCheck && tagsStyles[tagToCheck] && tagsStyles[tagToCheck][styleAttribute];
-            const overridenFromParentTagStyle = parentTag && tagsStyles[parentTag] && tagsStyles[parentTag][styleAttribute];
-
-            const overridenFromClassStyles = classStyles && classStyles[styleAttribute];
-            const overridenFromDefaultStyles = this.defaultTextStyles[tagToCheck] && this.defaultTextStyles[tagToCheck][styleAttribute];
-
-            const notOverriden = !overridenFromStyle && !overridenFromParentStyle &&
-                !overridenFromTagStyle && !overridenFromParentTagStyle &&
-                !overridenFromClassStyles && !overridenFromDefaultStyles;
-
-            if (notOverriden) {
-                appliedStyles[styleAttribute] = baseFontStyle[styleAttribute];
-            }
-        }
-        return appliedStyles;
-    }
-
     /**
      * Loop on children and return whether if their parent needs to be a <View>
      * @param {any} children
@@ -403,7 +381,7 @@ export default class HTML extends PureComponent {
      * @memberof HTML
      */
     renderRNElements (RNElements, parentWrapper = 'root', parentIndex = 0, props = this.props) {
-        const { tagsStyles, classesStyles, emSize, ptSize, ignoredStyles, allowedStyles } = props;
+        const { tagsStyles, classesStyles, emSize, ptSize, ignoredStyles, allowedStyles, baseFontStyle } = props;
         return RNElements && RNElements.length ? RNElements.map((element, index) => {
             const { attribs, data, tagName, parentTag, children, nodeIndex, wrapper } = element;
             const Wrapper = wrapper === 'Text' ? Text : View;
@@ -449,9 +427,23 @@ export default class HTML extends PureComponent {
             }
 
             const classStyles = _getElementClassStyles(attribs, classesStyles);
-            const textElementStyles = this.filterBaseFontStyles(element, classStyles, props);
             const textElement = data ?
-                <Text style={textElementStyles}>{ data }</Text> :
+                <Text
+                  style={computeTextStyles(
+                      element,
+                      {
+                          defaultTextStyles: this.defaultTextStyles,
+                          tagsStyles,
+                          classesStyles,
+                          baseFontStyle,
+                          emSize,
+                          ptSize,
+                          ignoredStyles,
+                          allowedStyles
+                      })}
+                >
+                    { data }
+                </Text> :
                 false;
 
             const style = [
@@ -463,7 +455,9 @@ export default class HTML extends PureComponent {
             .filter((s) => s !== undefined);
 
             const extraProps = {};
-            if (Wrapper === Text) extraProps.selectable = this.props.textSelectable;
+            if (Wrapper === Text) {
+                extraProps.selectable = this.props.textSelectable;
+            }
             return (
                 <Wrapper key={key} style={style} {...extraProps}>
                     { textElement }

src/HTMLStyles.js

@@ -63,6 +63,66 @@ export function _constructStyles ({ tagName, htmlAttribs, passProps, additionalS
     return style.filter((style) => style !== undefined);
 }
 
+/**
+ * Computes the styles of a text node
+ * @export
+ * @param {any} element parsed DOM node of text
+ * @param {any} passProps set of props from the HTML component
+ * @returns {object} react-native styles
+ */
+export function computeTextStyles (element, passProps) {
+    let finalStyle = {};
+
+    // Construct an array with the styles of each level of the text node, ie :
+    // [element, parent1, parent2, parent3...]
+    const parentStyles = _recursivelyComputeParentTextStyles(element, passProps);
+
+    // Only merge the keys that aren't yet applied to the final object. ie:
+    // if fontSize is already set in the first iteration, ignore the fontSize that
+    // we got from the 3rd iteration because of a class for instance, hence
+    // respecting the proper style inheritance
+    parentStyles.forEach((styles) => {
+        Object.keys(styles).forEach((styleKey) => {
+            const styleValue = styles[styleKey];
+            if (!finalStyle[styleKey]) {
+                finalStyle[styleKey] = styleValue;
+            }
+        });
+    });
+
+    // Finally, try to add the baseFontStyle values to add pontentially missing
+    // styles to each text node
+    return { ...passProps.baseFontStyle, ...finalStyle };
+}
+
+function _recursivelyComputeParentTextStyles (element, passProps, styles = []) {
+    const { attribs, name } = element;
+    const { classesStyles, tagsStyles, defaultTextStyles } = passProps;
+
+    // Construct every style for this node
+    const HTMLAttribsStyles = attribs && attribs.style ? cssStringToRNStyle(attribs.style, STYLESETS.TEXT, passProps) : {};
+    const classStyles = _getElementClassStyles(attribs, classesStyles);
+    const userTagStyles = tagsStyles[name];
+    const defaultTagStyles = defaultTextStyles[name];
+
+    // Merge those according to their priority level
+    const mergedStyles = {
+        ...defaultTagStyles,
+        ...userTagStyles,
+        ...classStyles,
+        ...HTMLAttribsStyles
+    };
+
+    styles.push(mergedStyles);
+
+    if (element.parent) {
+        // Keep looping recursively if this node has parents
+        return _recursivelyComputeParentTextStyles(element.parent, passProps, styles);
+    } else {
+        return styles;
+    }
+}
+
 /**
  * Creates a set of style from an array of classes asosciated to a node.
  * @export
@@ -101,7 +161,7 @@ export function _getElementCSSClasses (htmlAttribs) {
  * @param {object} { parentTag, emSize, ignoredStyles }
  * @returns {object}
  */
-function cssToRNStyle (css, styleset, { parentTag, emSize, ptSize, ignoredStyles, allowedStyles }) {
+function cssToRNStyle (css, styleset, { emSize, ptSize, ignoredStyles, allowedStyles }) {
     const styleProps = stylePropTypes[styleset];
     return Object.keys(css)
         .filter((key) => allowedStyles ? allowedStyles.indexOf(key) !== -1 : true)