feat: add static string and number references

add static string and number references as part of the extended API with corresponding Jest tests

README.md

@@ -108,6 +108,29 @@ margin-bottom: 0.625rem;
 }
 ```
 
+### Static
+
+As of **release 1.2.0** you can now pass in a static *number* or *string* and have it be included as a *non-fluid* measurement.
+
++ **String**: Will be included verbatim.
++ **Number**: Should be supplied as a **pixel** reference and will be converted to **REM**'s.
+
+```javascript
+ft("margin", { top: 50, right: "auto", bottom: 20, left: "auto" });
+```
+
+_The above declaration will create the following vanilla **CSS**:_
+
+```css
+margin-top: 3.125rem;
+
+margin-right: auto;
+
+margin-bottom: 1.25rem;
+
+margin-left: auto;
+```
+
 ### Example
 
 Integrating this module into your existing workflow is as easy as swapping out a standard **CSS** _property_ / _value_ declaration for the new API.
@@ -119,9 +142,12 @@ import styled from "styled-components";
 import ft from "fish-tacos";
 
 const Heading1 = styled.h1`
-  ${ft("font-size", [30, 50])} ${ft("margin", {
+  ${ft("font-size", [30, 50])}
+  ${ft("margin", {
     top: [30, 60],
-    bottom: [10, 30]
+    right: "auto",
+    bottom: [10, 30],
+    left: "auto",
   })};
 `;
 

__tests__/index.test.ts

@@ -66,6 +66,20 @@ test('requires "unit" to be a "string"', () => {
   }
 );
 
+test('should replicate "string" measurements verbatim', () => {
+  const result = ft('padding', 'auto');
+  expect(result).toMatch(`
+padding: auto;
+`);
+});
+
+test('should convert "number" measurements into "rems"', () => {
+  const result = ft('padding', 16);
+  expect(result).toMatch(`
+padding: 1rem;
+`);
+});
+
 test('should create a single declaration in the correct format', () => {
   const result = ft('padding', [10, 20]);
   expect(result).toMatch(`
@@ -82,7 +96,7 @@ padding: 0.625rem;
 });
 
 test('should create a multi declaration in the correct format', () => {
-  const result = ft('padding', { top: [10, 20], bottom: [15, 25] });
+  const result = ft('padding', { top: [10, 20], right: 5, bottom: [15, 25], left: 'auto' });
   expect(result).toMatch(`
 padding-top: 0.625rem;
 
@@ -94,6 +108,8 @@ padding-top: 0.625rem;
   padding-top: 1.25rem;
 }
 
+padding-right: 0.3125rem;
+
 padding-bottom: 0.9375rem;
 
 @media (min-width: 30rem) {
@@ -103,5 +119,7 @@ padding-bottom: 0.9375rem;
 @media (min-width: 50rem) {
   padding-bottom: 1.5625rem;
 }
+
+padding-left: auto;
 `);
 });

src/index.ts

@@ -111,20 +111,26 @@ ${unit}: ${createRem(min)};
 `;
 };
 
+const testIsArray = value => Array.isArray(value);
+
+const testIsString = value => typeof value === 'string';
+
+const testIsNumber = value => typeof value === 'number';
+
 const testIsUnitRelevant = (unit: string): boolean => {
   const isNotUnit = !unit;
-  const isNotString = unit && !(typeof unit === 'string');
+  const isNotString = unit && !testIsString(unit);
 
   if (isNotUnit) throw `${logPrefix} "unit" parameter is not defined`;
   else if (isNotString) throw `${logPrefix} "unit" parameter is not of type "string"`;
 
   return !(isNotUnit && isNotString);
 };
 
-const testIsValueRelevant = (value: number, reference: string): boolean => {
-  const isNotValue = !value;
-  const isNotNumber = value && !(typeof value === 'number');
-  const isNotFinite = !isNotNumber && !isFinite(value);
+const testIsSizeRelevant = (size: number, reference: string): boolean => {
+  const isNotValue = !size;
+  const isNotNumber = size && !testIsNumber(size);
+  const isNotFinite = !isNotNumber && !isFinite(size);
 
   if (isNotValue) throw `${logPrefix} "${reference}" parameter is not defined`;
   else if (isNotNumber) throw `${logPrefix} "${reference}" parameter is not of type "number"`;
@@ -133,16 +139,21 @@ const testIsValueRelevant = (value: number, reference: string): boolean => {
   return !(isNotValue && isNotNumber && isNotFinite);
 };
 
-const testDeclarationParameters = (unit: string, [min, max]: [number, number]): boolean => {
-  const isUnitRelevant = testIsUnitRelevant(unit);
-  const isMinRelevant = testIsValueRelevant(min, 'min');
-  const isMaxRelevant = testIsValueRelevant(max, 'max');
+const testMinMaxSizes = ([min, max]: [number, number]): boolean =>
+  testIsSizeRelevant(min, 'min') && testIsSizeRelevant(max, 'max');
 
-  return isUnitRelevant && isMinRelevant && isMaxRelevant;
-};
+const testIsSingleDeclaration = (sizes: [number, number] | string | number) =>
+  testIsArray(sizes) || testIsString(sizes) || testIsNumber(sizes);
 
-const createSingleDeclaration = (unit: string, [min, max]: [number, number]): string =>
-  testDeclarationParameters(unit, [min, max]) ? createDynamicValues(unit, [min, max]) : '';
+const createSingleDeclaration = (unit: string, sizes: any): string => {
+  // prettier-ignore
+  switch (true) {
+    case testIsString(sizes): return `\n${unit}: ${sizes};\n`;
+    case testIsNumber(sizes): return `\n${unit}: ${createRem(sizes)};\n`;
+    case testIsArray(sizes) && testMinMaxSizes(sizes): return createDynamicValues(unit, sizes);
+    default: return '';
+  }
+};
 
 const createMultipleDeclaretions = (unit: string, sizes: MultiMinMax): string => {
   const keys = Object.keys(sizes);
@@ -154,16 +165,15 @@ const createMultipleDeclaretions = (unit: string, sizes: MultiMinMax): string =>
 };
 
 const init = (unit: string, sizes: any): string => {
+  debugger;
   const isBaseFontSize = testBaseFontSize();
-  const isSingleDeclaration = Array.isArray(sizes);
+  const isUnitRelevant = testIsUnitRelevant(unit);
 
+  // prettier-ignore
   switch (true) {
-    case !isBaseFontSize:
-      return '';
-    case isSingleDeclaration:
-      return createSingleDeclaration(unit, sizes);
-    default:
-      return createMultipleDeclaretions(unit, sizes);
+    case !isBaseFontSize || !isUnitRelevant: return '';
+    case testIsSingleDeclaration(sizes): return createSingleDeclaration(unit, sizes);
+    default: return createMultipleDeclaretions(unit, sizes);
   }
 };