Merge pull request #7 from aaronlademann-wf/rem_util-update

Allow unsupported units in toRem / toPx functions

Author: leviwith-wf

lib/src/util/rem_util.dart

@@ -84,58 +84,96 @@ void recomputeRootFontSize() {
   }
 }
 
-/// Converts a pixel (`px`) value to its `rem` equivalent using the current root font size.
+/// Converts a pixel (`px`) [value] to its `rem` equivalent using the current root font size.
+///
+/// * If [value] is a [String] or [CssValue]:
+///   * And [value] already has the correct unit, it will not be converted.
+///   * And [CssValue.unit] is not `'px'` or `'rem'`, an error will be thrown unless
+///   [passThroughUnsupportedUnits] is `true`, in which case no conversion will take place.
+/// * If [value] is a [num], it will be treated as a `px` and converted, unless [treatNumAsRem] is `true`.
+/// * If [value] is `null`, `null` will be returned.
 ///
 /// Example input:
 ///
 /// * `'15px'`
-/// * `'15'`
-/// * 15
+/// * `new CssValue(15, 'px')`
+/// * `15`
+/// * `1.5, treatNumAsRem: true`
+/// * `'1.5rem'`
+/// * `new CssValue(1.5, 'rem')`
 ///
 /// Example output (assuming 1rem = 10px):
 ///
 /// * `1.5rem`
-CssValue toRem(dynamic pxValue) {
-  num pxValueNum;
+CssValue toRem(dynamic value, {bool treatNumAsRem: false, bool passThroughUnsupportedUnits: false}) {
+  if (value == null) return null;
 
-  if (pxValue is num) {
-    pxValueNum = pxValue;
+  num remValueNum;
+
+  if (value is num) {
+    remValueNum = treatNumAsRem ? value : value / rootFontSize;
   } else {
-    var parsedPxValue = pxValue is CssValue ? pxValue : new CssValue.parse(pxValue);
-    if (parsedPxValue?.unit != 'px') {
-      throw new ArgumentError.value(pxValue, 'pxValue', 'must be a num or a String px value');
+    var parsedValue = value is CssValue ? value : new CssValue.parse(value);
+
+    if (parsedValue?.unit == 'rem') {
+      remValueNum = parsedValue.number;
+    } else if (parsedValue?.unit == 'px') {
+      remValueNum = parsedValue.number / rootFontSize;
+    } else {
+      if (passThroughUnsupportedUnits) {
+        return parsedValue;
+      }
+
+      throw new ArgumentError.value(value, 'value', 'must be a px num or a String px/rem value');
     }
-
-    pxValueNum = parsedPxValue.number;
   }
 
-  return new CssValue(pxValueNum / rootFontSize, 'rem');
+  return new CssValue(remValueNum, 'rem');
 }
 
-/// Converts a rem value to its pixel (`px`) equivalent using the current root font size.
+/// Converts a rem [value] to its pixel (`px`) equivalent using the current root font size.
+///
+/// * If [value] is a [String] or [CssValue]:
+///   * And [value] already has the correct unit, it will not be converted.
+///   * And [CssValue.unit] is not `'px'` or `'rem'`, an error will be thrown unless
+///   [passThroughUnsupportedUnits] is `true`, in which case no conversion will take place.
+/// * If [value] is a [num], it will be treated as a `rem` and converted, unless [treatNumAsPx] is `true`.
+/// * If [value] is `null`, `null` will be returned.
 ///
 /// Example input:
 ///
 /// * `'1.5rem'`
-/// * `'1.5'`
-/// * 1.5
+/// * `new CssValue(1.5, 'rem')`
+/// * `1.5`
+/// * `15, treatNumAsPx: true`
+/// * `15px`
+/// * `new CssValue(15, 'px')`
 ///
 /// Example output (assuming 1rem = 10px):
 ///
 /// * `15px`
-CssValue toPx(dynamic remValue) {
-  num remValueNum;
+CssValue toPx(dynamic value, {bool treatNumAsPx: false, bool passThroughUnsupportedUnits: false}) {
+  if (value == null) return null;
 
-  if (remValue is num) {
-    remValueNum = remValue;
+  num pxValueNum;
+
+  if (value is num) {
+    pxValueNum = treatNumAsPx ? value : value * rootFontSize;
   } else {
-    var parsedRemValue = remValue is CssValue ? remValue : new CssValue.parse(remValue);
-    if (parsedRemValue?.unit != 'rem') {
-      throw new ArgumentError.value(remValue, 'remValue', 'must be a num or a String rem value');
+    var parsedValue = value is CssValue ? value : new CssValue.parse(value);
+
+    if (parsedValue?.unit == 'px') {
+      pxValueNum = parsedValue.number;
+    } else if (parsedValue?.unit == 'rem') {
+      pxValueNum = parsedValue.number * rootFontSize;
+    } else {
+      if (passThroughUnsupportedUnits) {
+        return parsedValue;
+      }
+
+      throw new ArgumentError.value(value, 'value', 'must be a rem num or a String px/rem value');
     }
-
-    remValueNum = parsedRemValue.number;
   }
 
-  return new CssValue(remValueNum * rootFontSize, 'px');
+  return new CssValue(pxValueNum, 'px');
 }

test/over_react/util/rem_util_test.dart

@@ -51,40 +51,66 @@ main() {
         expect(toRem(new CssValue.parse('15px')), new CssValue(0.75, 'rem'));
       });
 
-      test('converts an int value (treated as px) to rem', () {
+      test('converts nums (treated as px) to rem', () {
         expect(toRem(15), new CssValue(0.75, 'rem'));
+        expect(toRem(20.2), new CssValue(1.01, 'rem'));
       });
 
-      test('converts a double (treated as px) to rem', () {
-        expect(toRem(20.2), new CssValue(1.01, 'rem'));
+      test('does not convert nums when `treatNumAsRem` is true', () {
+        expect(toRem(15, treatNumAsRem: true), new CssValue(15, 'rem'));
+        expect(toRem(20.2, treatNumAsRem: true), new CssValue(20.2, 'rem'));
+      });
+
+      test('gracefully handles a rem String, not doing any conversion', () {
+        expect(toRem('1334rem'), new CssValue(1334, 'rem'));
+      });
+
+      test('gracefully handles a rem CssValue, not doing any conversion', () {
+        expect(toRem(new CssValue(1334, 'rem')), new CssValue(1334, 'rem'));
+      });
+
+      test('gracefully passes through `null`', () {
+        expect(toRem(null), null);
       });
 
       test('throws when passed an invalid value', () {
         expect(() => toRem(new Object()), allOf(
             throwsArgumentError,
-            throwsA(hasToStringValue(contains('must be a num or a String px value'))))
+            throwsA(hasToStringValue(contains('must be a px num or a String px/rem value'))))
         );
       });
 
       test('throws when passed a malformed CSS value string', () {
         expect(() => toRem(''), allOf(
             throwsArgumentError,
-            throwsA(hasToStringValue(contains('must be a num or a String px value'))))
+            throwsA(hasToStringValue(contains('must be a px num or a String px/rem value'))))
         );
       });
 
-      test('throws when passed a CSS value string with a unit other than px', () {
-        expect(() => toRem('1em'), allOf(
-            throwsArgumentError,
-            throwsA(hasToStringValue(contains('must be a num or a String px value'))))
-        );
+      group('throws when passed a CSS value string with a unit other than px/rem', () {
+        test('', () {
+          expect(() => toRem('1em'), allOf(
+              throwsArgumentError,
+              throwsA(hasToStringValue(contains('must be a px num or a String px/rem value'))))
+          );
+        });
+
+        test('unless `passThroughUnsupportedUnits` is true', () {
+          expect(toRem('1em', passThroughUnsupportedUnits: true), new CssValue.parse('1em'));
+        });
       });
 
-      test('throws when passed a CssValue instance with a unit other than px', () {
-        expect(() => toRem(new CssValue.parse('1em')), allOf(
-            throwsArgumentError,
-            throwsA(hasToStringValue(contains('must be a num or a String px value'))))
-        );
+      group('throws when passed a CssValue instance with a unit other than px/rem', () {
+        test('', () {
+          expect(() => toRem(new CssValue.parse('1em')), allOf(
+              throwsArgumentError,
+              throwsA(hasToStringValue(contains('must be a px num or a String px/rem value'))))
+          );
+        });
+
+        test('unless `passThroughUnsupportedUnits` is true', () {
+          expect(toRem(new CssValue.parse('1em'), passThroughUnsupportedUnits: true), new CssValue.parse('1em'));
+        });
       });
     });
 
@@ -105,40 +131,66 @@ main() {
         expect(toPx(new CssValue.parse('0.75rem')), new CssValue(15, 'px'));
       });
 
-      test('converts an int value (treated as rem) to px', () {
+      test('converts nums (treated as rem) to px', () {
         expect(toPx(3), new CssValue(60, 'px'));
+        expect(toPx(1.01), new CssValue(20.2, 'px'));
       });
 
-      test('converts a double (treated as rem) to px', () {
-        expect(toPx(1.01), new CssValue(20.2, 'px'));
+      test('does not convert nums when `treatNumAsPx` is true', () {
+        expect(toPx(3, treatNumAsPx: true), new CssValue(3, 'px'));
+        expect(toPx(1.01, treatNumAsPx: true), new CssValue(1.01, 'px'));
+      });
+
+      test('gracefully handles a px String, not doing any conversion', () {
+        expect(toPx('1334px'), new CssValue(1334, 'px'));
+      });
+
+      test('gracefully handles a px CssValue, not doing any conversion', () {
+        expect(toPx(new CssValue(1334, 'px')), new CssValue(1334, 'px'));
+      });
+
+      test('gracefully passes through `null`', () {
+        expect(toPx(null), null);
       });
 
       test('throws when passed an invalid value', () {
         expect(() => toPx(new Object()), allOf(
             throwsArgumentError,
-            throwsA(hasToStringValue(contains('must be a num or a String rem value'))))
+            throwsA(hasToStringValue(contains('must be a rem num or a String px/rem value'))))
         );
       });
 
       test('throws when passed a malformed CSS value string', () {
         expect(() => toPx(''), allOf(
             throwsArgumentError,
-            throwsA(hasToStringValue(contains('must be a num or a String rem value'))))
+            throwsA(hasToStringValue(contains('must be a rem num or a String px/rem value'))))
         );
       });
 
-      test('throws when passed a CSS value string with a unit other than px', () {
-        expect(() => toPx('1em'), allOf(
-            throwsArgumentError,
-            throwsA(hasToStringValue(contains('must be a num or a String rem value'))))
-        );
+      group('throws when passed a CSS value string with a unit other than px/rem', () {
+        test('', () {
+          expect(() => toPx('1em'), allOf(
+              throwsArgumentError,
+              throwsA(hasToStringValue(contains('must be a rem num or a String px/rem value'))))
+          );
+        });
+
+        test('unless `passThroughUnsupportedUnits` is true', () {
+          expect(toPx('1em', passThroughUnsupportedUnits: true), new CssValue.parse('1em'));
+        });
       });
 
-      test('throws when passed a CssValue instance with a unit other than px', () {
-        expect(() => toPx(new CssValue.parse('1em')), allOf(
-            throwsArgumentError,
-            throwsA(hasToStringValue(contains('must be a num or a String rem value'))))
-        );
+      group('throws when passed a CssValue instance with a unit other than px/rem', () {
+        test('', () {
+          expect(() => toPx(new CssValue.parse('1em')), allOf(
+              throwsArgumentError,
+              throwsA(hasToStringValue(contains('must be a rem num or a String px/rem value'))))
+          );
+        });
+
+        test('unless `passThroughUnsupportedUnits` is true', () {
+          expect(toPx(new CssValue.parse('1em'), passThroughUnsupportedUnits: true), new CssValue.parse('1em'));
+        });
       });
     });