fix(): Font size contains absolute size.

e.g: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit
solve issue meliorence#122

Author: ikhsanalatsary

src/HTML.js

@@ -35,6 +35,7 @@ export default class HTML extends PureComponent {
             height: PropTypes.number
         }),
         emSize: PropTypes.number.isRequired,
+        ptSize: PropTypes.number.isRequired,
         baseFontStyle: PropTypes.object.isRequired,
         textSelectable: PropTypes.bool
     }
@@ -44,6 +45,7 @@ export default class HTML extends PureComponent {
         debug: false,
         decodeEntities: true,
         emSize: 14,
+        ptSize: 1.3,
         ignoredTags: IGNORED_TAGS,
         ignoredStyles: [],
         baseFontStyle: { fontSize: 14 },
@@ -395,7 +397,7 @@ export default class HTML extends PureComponent {
      * @memberof HTML
      */
     renderRNElements (RNElements, parentWrapper = 'root', parentIndex = 0, props = this.props) {
-        const { tagsStyles, classesStyles, emSize, ignoredStyles, allowedStyles } = props;
+        const { tagsStyles, classesStyles, emSize, ptSize, ignoredStyles, allowedStyles } = props;
         return RNElements && RNElements.length ? RNElements.map((element, index) => {
             const { attribs, data, tagName, parentTag, children, nodeIndex, wrapper } = element;
             const Wrapper = wrapper === 'Text' ? Text : View;
@@ -405,7 +407,7 @@ export default class HTML extends PureComponent {
                     cssStringToRNStyle(
                         attribs.style,
                         Wrapper === Text ? STYLESETS.TEXT : STYLESETS.VIEW, // proper prop-types validation
-                        { parentTag: tagName, emSize, ignoredStyles, allowedStyles }
+                        { parentTag: tagName, emSize, ptSize, ignoredStyles, allowedStyles }
                     ) :
                     {};
 

src/HTMLStyles.js

@@ -1,4 +1,4 @@
-import { PERC_SUPPORTED_STYLES, STYLESETS, stylePropTypes } from './HTMLUtils';
+import { PERC_SUPPORTED_STYLES, STYLESETS, ABSOLUTE_FONT_SIZE, stylePropTypes } from './HTMLUtils';
 import { generateDefaultBlockStyles, generateDefaultTextStyles } from './HTMLDefaultStyles';
 import checkPropTypes from './checkPropTypes';
 
@@ -101,7 +101,7 @@ export function _getElementCSSClasses (htmlAttribs) {
  * @param {object} { parentTag, emSize, ignoredStyles }
  * @returns {object}
  */
-function cssToRNStyle (css, styleset, { parentTag, emSize, ignoredStyles, allowedStyles }) {
+function cssToRNStyle (css, styleset, { parentTag, emSize, ptSize, ignoredStyles, allowedStyles }) {
     const styleProps = stylePropTypes[styleset];
     return Object.keys(css)
         .filter((key) => allowedStyles ? allowedStyles.indexOf(key) !== -1 : true)
@@ -138,6 +138,13 @@ function cssToRNStyle (css, styleset, { parentTag, emSize, ignoredStyles, allowe
                         const pxSize = parseFloat(value.replace('em', '')) * emSize;
                         return [key, pxSize];
                     }
+                    if (value.search('pt') !== -1) {
+                        const pxSize = parseFloat(value.replace('pt', '')) * ptSize;
+                        return [key, pxSize];
+                    }
+                    if (key === 'fontSize') {
+                        return mapAbsoluteFontSize(key, value);
+                    }
                     // See if we can convert a 20px to a 20 automagically
                     const numericValue = parseFloat(value.replace('px', ''));
                     if (!isNaN(numericValue)) {
@@ -158,6 +165,19 @@ function cssToRNStyle (css, styleset, { parentTag, emSize, ignoredStyles, allowe
         }, {});
 }
 
+/**
+* @param {string} key: the key of style
+* @param {string} value: the value of style
+* @return {array}
+*/
+function mapAbsoluteFontSize (key, value) {
+    let fontSize = value;
+    if (ABSOLUTE_FONT_SIZE.hasOwnProperty(value)) {
+        fontSize = ABSOLUTE_FONT_SIZE[value];
+    }
+    return [key, fontSize];
+}
+
 /**
 * @param str: the css style string
 * @param styleset=STYLESETS.TEXT: the styleset to convert the styles against

src/HTMLUtils.js

@@ -26,6 +26,21 @@ export const MIXED_TAGS = ['a'];
 // These text tags shouldn't be associated with their siblings in the associateRawTags method
 export const TEXT_TAGS_IGNORING_ASSOCIATION = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
+export const ABSOLUTE_FONT_SIZE = {
+    'medium': 14,
+    'xx-small': 8.5,
+    'x-small': 10,
+    'small': 12,
+    'large': 17,
+    'x-large': 20,
+    'xx-large': 24,
+    'smaller': 13.3,
+    'larger': 16,
+    'length': null,
+    'initial': null,
+    'inherit': null
+};
+
 export const IGNORED_TAGS = ['head', 'scripts', 'audio', 'video', 'track', 'embed', 'object', 'param', 'source', 'canvas', 'noscript',
     'caption', 'col', 'colgroup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'button', 'datalist', 'fieldset', 'form',
     'input', 'label', 'legend', 'meter', 'optgroup', 'option', 'output', 'progress', 'select', 'textarea', 'details', 'diaglog',