refactor(transforms): add platform option 'basePxFontSize'

amzn · Dec 15, 2020 · 499f6c3 · 499f6c3
1 parent 5ec3594
commit 499f6c3
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 19 deletions.
diff --git a/__tests__/common/transforms.test.js b/__tests__/common/transforms.test.js
@@ -487,6 +487,10 @@ describe('common', () => {
         });
         expect(value).toBe("16.00sp");
       });
+      it('converts rem to sp using custom base font', () => {
+        var value = transforms["size/remToSp"].transformer({value: "1"}, {basePxFontSize: 14});
+        expect(value).toBe("14.00sp");
+      });
       it('should throw an error if prop value is Nan', () => {
         expect( () => transforms["size/dp"].transformer({value: "a"})).toThrow();
       });
@@ -499,6 +503,10 @@ describe('common', () => {
         });
         expect(value).toBe("16.00dp");
       });
+      it('converts rem to dp using custom base font', () => {
+        var value = transforms["size/remToDp"].transformer({value: "1"}, {basePxFontSize: 14});
+        expect(value).toBe("14.00dp");
+      });
       it('should throw an error if prop value is Nan', () => {
         expect( () => transforms["size/dp"].transformer({value: "a"})).toThrow();
       });
@@ -523,18 +531,42 @@ describe('common', () => {
         });
         expect(value).toBe("16.00f");
       });
+      it('converts rem to pt using custom base font', () => {
+        var value = transforms["size/remToPt"].transformer({value: "1"}, {basePxFontSize: 14});
+        expect(value).toBe("14.00f");
+      });
       it('should throw an error if prop value is Nan', () => {
         expect( () => transforms["size/dp"].transformer({value: "a"})).toThrow();
       });
     });
 
+    describe('size/swift/remToCGFloat', () => {
+      it('should work', () => {
+        var value = transforms["size/swift/remToCGFloat"].transformer({
+          value: "1"
+        });
+        expect(value).toBe("CGFloat(16.00)");
+      });
+      it('converts rem to CGFloat using custom base font', () => {
+        var value = transforms["size/swift/remToCGFloat"].transformer({value: "1"}, {basePxFontSize: 14});
+        expect(value).toBe("CGFloat(14.00)");
+      });
+      it('should throw an error if prop value is Nan', () => {
+        expect( () => transforms["size/rem/remToCGFloat"].transformer({value: "a"})).toThrow();
+      });
+    });
+
     describe('size/remToPx', () => {
       it('should work', () => {
         var value = transforms["size/remToPx"].transformer({
           value: "1"
         });
         expect(value).toBe("16px");
       });
+      it('converts rem to px using custom base font', () => {
+        var value = transforms["size/remToPx"].transformer({value: "1"}, {basePxFontSize: 14});
+        expect(value).toBe("14px");
+      });
       it('should throw an error if prop value is Nan', () => {
         expect( () => transforms["size/dp"].transformer({value: "a"})).toThrow();
       });
@@ -580,6 +612,10 @@ describe('common', () => {
         });
         expect(value).toBe("16.00");
       });
+      it('converts rem to double using custom base font', () => {
+        var value = transforms["size/flutter/remToDouble"].transformer({value: "1"}, {basePxFontSize: 14});
+        expect(value).toBe("14.00");
+      });
     });
 
     describe('content/quote', () => {

diff --git a/lib/common/transforms.js b/lib/common/transforms.js
@@ -55,6 +55,11 @@ function wrapValueWithDoubleQuote(prop) {
 function throwSizeError(name, value, unitType) {
   throw `Invalid Number: '${name}: ${value}' is not a valid number, cannot transform to '${unitType}' \n`;
 }
+
+function getBasePxFontSize(options) {
+  return (options && options.basePxFontSize) || 16;
+}
+
 /**
  * @namespace Transforms
  */
@@ -549,7 +554,7 @@ module.exports = {
   },
 
   /**
-   * Transforms the value from a REM size on web into a scale-independent pixel (sp) value for font sizes on Android. It WILL scale the number by a factor of 16 (common base font size on web).
+   * Transforms the value from a REM size on web into a scale-independent pixel (sp) value for font sizes on Android. It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
    *
    * ```js
    * // Matches: prop.attributes.category === 'size' && prop.attributes.type === 'font'
@@ -562,16 +567,17 @@ module.exports = {
   'size/remToSp': {
     type: 'value',
     matcher: isFontSize,
-    transformer: function(prop) {
+    transformer: function(prop, options) {
       const val = parseFloat(prop.value);
+      const baseFont = getBasePxFontSize(options);
       if (isNaN(val)) throwSizeError(prop.name, prop.value, 'sp');
-      return (val * 16).toFixed(2) + 'sp';
+      return (val * baseFont).toFixed(2) + 'sp';
     }
   },
 
 
   /**
-   * Transforms the value from a REM size on web into a density-independent pixel (dp) value for font sizes on Android. It WILL scale the number by a factor of 16 (common base font size on web).
+   * Transforms the value from a REM size on web into a density-independent pixel (dp) value for font sizes on Android. It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
    *
    * ```js
    * // Matches: prop.attributes.category === 'size' && prop.attributes.type !== 'font'
@@ -584,10 +590,11 @@ module.exports = {
   'size/remToDp': {
     type: 'value',
     matcher: isNotFontSize,
-    transformer: function(prop) {
+    transformer: function(prop, options) {
       const val = parseFloat(prop.value);
+      const baseFont = getBasePxFontSize(options);
       if (isNaN(val)) throwSizeError(prop.name, prop.value, 'dp');
-      return (val * 16).toFixed(2) + 'dp';
+      return (val * baseFont).toFixed(2) + 'dp';
     }
   },
 
@@ -635,7 +642,7 @@ module.exports = {
   },
 
   /**
-   * Scales the number by 16 (default web font size) and adds 'pt' to the end.
+   * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) and adds 'pt' to the end.
    *
    * ```js
    * // Matches: prop.attributes.category === 'size'
@@ -648,15 +655,16 @@ module.exports = {
   'size/remToPt': {
     type: 'value',
     matcher: isSize,
-    transformer: function(prop) {
+    transformer: function(prop, options) {
       const val = parseFloat(prop.value);
+      const baseFont = getBasePxFontSize(options);
       if (isNaN(val)) throwSizeError(prop.name, prop.value, 'pt');
-      return (val * 16).toFixed(2) + 'f';
+      return (val * baseFont).toFixed(2) + 'f';
     }
   },
 
   /**
-   * Scales the number by 16 to get to points for Swift and initializes a CGFloat
+   * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) to get to points for Swift and initializes a CGFloat
    *
    * ```js
    * // Matches: prop.attributes.category === 'size'
@@ -668,15 +676,16 @@ module.exports = {
   'size/swift/remToCGFloat': {
     type: 'value',
     matcher: isSize,
-    transformer: function(prop) {
+    transformer: function(prop, options) {
       const val = parseFloat(prop.value);
+      const baseFont = getBasePxFontSize(options);
       if (isNaN(val)) throwSizeError(prop.name, prop.value, 'CGFloat');
-      return `CGFloat(${(val * 16).toFixed(2)})`;
+      return `CGFloat(${(val * baseFont).toFixed(2)})`;
     }
   },
 
   /**
-   * Scales the number by 16 (default web font size) and adds 'px' to the end.
+   * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) and adds 'px' to the end.
    *
    * ```js
    * // Matches: prop.attributes.category === 'size'
@@ -689,10 +698,11 @@ module.exports = {
   'size/remToPx': {
     type: 'value',
     matcher: isSize,
-    transformer: function(prop) {
+    transformer: function(prop, options) {
       const val = parseFloat(prop.value);
+      const baseFont = getBasePxFontSize(options);
       if (isNaN(val)) throwSizeError(prop.name, prop.value, 'px');
-      return (val * 16).toFixed(0) + 'px';
+      return (val * baseFont).toFixed(0) + 'px';
     }
   },
 
@@ -1004,9 +1014,9 @@ module.exports = {
     },
     transformer: wrapValueWithDoubleQuote
   },
-  
+
   /**
-   * Scales the number by 16 to get to points for Flutter
+   * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) to get to points for Flutter
    *
    * ```dart
    * // Matches: prop.attributes.category === 'size'
@@ -1018,8 +1028,9 @@ module.exports = {
   'size/flutter/remToDouble': {
     type: 'value',
     matcher: isSize,
-    transformer: function (prop) {
-      return (parseFloat(prop.value, 10) * 16).toFixed(2);
+    transformer: function (prop, options) {
+      const baseFont = getBasePxFontSize(options);
+      return (parseFloat(prop.value, 10) * baseFont).toFixed(2);
     }
   }