diff --git a/README.md b/README.md index ef7fc12..f11cfc5 100644 --- a/README.md +++ b/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( diff --git a/__tests__/index.test.ts b/__tests__/index.test.ts index ae8c462..67692ad 100644 --- a/__tests__/index.test.ts +++ b/__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; `); }); diff --git a/src/index.ts b/src/index.ts index c568e3f..adbd9ee 100644 --- a/src/index.ts +++ b/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);