From 252c4c750716c5710384cbaa7864330827fdf596 Mon Sep 17 00:00:00 2001 From: John Barreiros Date: Sat, 5 Dec 2020 00:25:55 -0500 Subject: [PATCH 1/2] refactor(transforms): add platform option 'basePxFontSize' --- __tests__/common/transforms.test.js | 36 +++++++++++++++++++++ lib/common/transforms.js | 49 ++++++++++++++++++----------- 2 files changed, 66 insertions(+), 19 deletions(-) diff --git a/__tests__/common/transforms.test.js b/__tests__/common/transforms.test.js index 368f6109e..2c1d40ea1 100644 --- 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,11 +531,31 @@ 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({ @@ -535,6 +563,10 @@ describe('common', () => { }); 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 index e971de4c8..8980e8355 100644 --- 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); } } From 69018bc680edb398fcf0b64a2462356555f9a2cf Mon Sep 17 00:00:00 2001 From: John Barreiros Date: Mon, 14 Dec 2020 21:55:01 -0500 Subject: [PATCH 2/2] refactor(transforms): update recently merged size/pxToRem to also use getBasePxFontSize() --- lib/common/transforms.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/common/transforms.js b/lib/common/transforms.js index 8980e8355..9108254d6 100644 --- a/lib/common/transforms.js +++ b/lib/common/transforms.js @@ -720,7 +720,7 @@ module.exports = { type: 'value', matcher: isSize, transformer: (prop, options) => { - const baseFont = (options && options.basePxFontSize) || 16; + const baseFont = getBasePxFontSize(options); const floatVal = parseFloat(prop.value); if (isNaN(floatVal)) {