feat: add key consolidation to API

README.md

@@ -131,7 +131,43 @@ margin-bottom: 1.25rem;
 margin-left: auto;
 ```
 
-### Example
+### Consolidation
+
+As of **release 1.3.0** you can now *consolidate* verbose references that share the same values into a single declaration by comma separating their keys.
+
+```javascript
+ft("margin", { "top,bottom": [20, 50], "right,left": "auto" });
+```
+
+_The above declaration will create the following vanilla **CSS**:_
+
+```css
+margin-top: 1.25rem;
+
+@media (min-width: 30rem) {
+  margin-top: 4.166666666666667vw;
+}
+
+@media (min-width: 75rem) {
+  margin-top: 3.125rem;
+}
+
+margin-bottom: 1.25rem;
+
+@media (min-width: 30rem) {
+  margin-bottom: 4.166666666666667vw;
+}
+
+@media (min-width: 75rem) {
+  margin-bottom: 3.125rem;
+}
+
+margin-right: auto;
+
+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.
 
@@ -143,12 +179,7 @@ import ft from "fish-tacos";
 
 const Heading1 = styled.h1`
   ${ft("font-size", [30, 50])}
-  ${ft("margin", {
-    top: [30, 60],
-    right: "auto",
-    bottom: [10, 30],
-    left: "auto",
-  })};
+  ${ft("margin", { top: [30, 60], "right,left": "auto", bottom: 20 })};
 `;
 
 ReactDOM.render(

__tests__/index.test.ts

@@ -95,8 +95,17 @@ padding: 0.625rem;
 `);
 });
 
+test('should split multi declaration keys into individual references', () => {
+  const result = ft('padding', { 'right,left': 'auto' });
+  expect(result).toMatch(`
+padding-right: auto;
+
+padding-left: auto;
+`);
+});
+
 test('should create a multi declaration in the correct format', () => {
-  const result = ft('padding', { top: [10, 20], right: 5, bottom: [15, 25], left: 'auto' });
+  const result = ft('padding', { top: [10, 20], 'right,left': 'auto', bottom: 30 });
   expect(result).toMatch(`
 padding-top: 0.625rem;
 
@@ -108,18 +117,10 @@ padding-top: 0.625rem;
   padding-top: 1.25rem;
 }
 
-padding-right: 0.3125rem;
-
-padding-bottom: 0.9375rem;
-
-@media (min-width: 30rem) {
-  padding-bottom: 3.125vw;
-}
-
-@media (min-width: 50rem) {
-  padding-bottom: 1.5625rem;
-}
+padding-right: auto;
 
 padding-left: auto;
+
+padding-bottom: 1.875rem;
 `);
 });

src/index.ts

@@ -155,17 +155,23 @@ const createSingleDeclaration = (unit: string, sizes: any): string => {
   }
 };
 
+// Flatten from { 'top.bottom': [5, 10] } into { top: [5, 10], bottom: [5, 10] }.
+const createFlattenedSizes = (keys: string, sizes: MultiMinMax) =>
+  keys.split(',').reduce((acc, key) => ({ ...acc, [key]: sizes[keys] }), {});
+
 const createMultipleDeclaretions = (unit: string, sizes: MultiMinMax): string => {
-  const keys = Object.keys(sizes);
+  const flattenedSizes = Object.keys(sizes).reduce(
+    (acc, keys) => ({ ...acc, ...createFlattenedSizes(keys, sizes) }),
+    {}
+  );
 
-  return keys.reduce(
-    (acc, key) => `${acc}${createSingleDeclaration(`${unit}-${key}`, sizes[key])}`,
+  return Object.keys(flattenedSizes).reduce(
+    (acc, key) => `${acc}${createSingleDeclaration(`${unit}-${key}`, flattenedSizes[key])}`,
     ''
   );
 };
 
 const init = (unit: string, sizes: any): string => {
-  debugger;
   const isBaseFontSize = testBaseFontSize();
   const isUnitRelevant = testIsUnitRelevant(unit);