normalizeQuery: Parses query into a workable object

Author: kettanaito

packages/atomic-layout-core/src/utils/styles/createMediaQuery/createMediaQuery.ts

@@ -1,24 +1,20 @@
-import {
-  Numeric,
-  Breakpoint,
-  BreakpointBehavior,
-} from '../../../const/defaultOptions'
+import { Breakpoint, BreakpointBehavior } from '../../../const/defaultOptions'
 import transformNumeric from '../../math/transformNumeric'
-import normalizeQuery from '../../styles/normalizeQuery'
+import normalizeQuery, {
+  NormalizedQueryParam,
+} from '../../styles/normalizeQuery'
 import compose from '../../functions/compose'
 
-type MediaQueryPair = [string, Numeric]
-
 /**
  * Determines whether a given media query param should be added
  * to the media query string based on a breakpoint's behavior.
  */
 const shouldAppendProperty = (
-  queryParam: string,
+  queryParam: NormalizedQueryParam,
   behavior: BreakpointBehavior,
 ): boolean => {
-  const [prefix, splitPropName] = queryParam.split('-')
-  const isDimensionalProp = ['height', 'width'].includes(splitPropName)
+  const { prefix, name } = queryParam
+  const isDimensionalProp = ['height', 'width'].includes(name)
 
   if (!isDimensionalProp) {
     return true
@@ -31,31 +27,45 @@ const shouldAppendProperty = (
 }
 
 const filterRelevantQueryParams = (behavior: BreakpointBehavior) => (
-  queryList: MediaQueryPair[],
-): MediaQueryPair[] => {
-  return queryList.filter(([queryParam]) =>
-    shouldAppendProperty(queryParam, behavior),
+  queryList: NormalizedQueryParam[],
+): NormalizedQueryParam[] => {
+  return queryList.filter((normalizedQueryParam) =>
+    shouldAppendProperty(normalizedQueryParam, behavior),
   )
 }
 
 /**
  * Joins a given media query params list with the given transformer function.
  */
-export const joinQueryList = (transformer: (pair: MediaQueryPair) => any) => (
-  queryList: MediaQueryPair[],
+export const joinQueryList = (
+  queryList: NormalizedQueryParam[],
+  transformer: (pair: NormalizedQueryParam) => any,
 ) => {
   return queryList.map(transformer).join(' and ')
 }
 
-export default function createMediaQuery(
+export const createQueryList = (
   breakpoint: Breakpoint,
   behavior: BreakpointBehavior,
-): string {
+): NormalizedQueryParam[] => {
   return compose(
-    joinQueryList(([dashedQueryProp, propValue]) => {
-      return `(${dashedQueryProp}:${String(transformNumeric(propValue))})`
-    }),
     filterRelevantQueryParams(behavior),
     normalizeQuery,
   )(breakpoint)
 }
+
+export default function createMediaQuery(
+  breakpoint: Breakpoint,
+  behavior: BreakpointBehavior,
+): string {
+  const queryList = createQueryList(breakpoint, behavior)
+
+  const mediaQueryString = joinQueryList(
+    queryList,
+    ({ displayName, value }) => {
+      return `(${displayName}:${String(transformNumeric(value))})`
+    },
+  )
+
+  return mediaQueryString
+}

packages/atomic-layout-core/src/utils/styles/normalizeQuery/normalizeQuery.spec.ts

@@ -2,13 +2,33 @@ import normalizeQuery from './normalizeQuery'
 
 describe('normalizeQuery', () => {
   describe('given a media query Object', () => {
-    it('returns its [key, value] pairs', () => {
+    it('returns its { prefix, name, value } data', () => {
       expect(
         normalizeQuery({
+          height: 100,
           minWidth: 120,
           maxAspectRatio: '3/4',
         }),
-      ).toEqual([['min-width', 120], ['max-aspect-ratio', '3/4']])
+      ).toEqual([
+        {
+          prefix: undefined,
+          name: 'height',
+          displayName: 'height',
+          value: 100,
+        },
+        {
+          prefix: 'min',
+          name: 'width',
+          displayName: 'min-width',
+          value: 120,
+        },
+        {
+          prefix: 'max',
+          name: 'aspectRatio',
+          displayName: 'max-aspect-ratio',
+          value: '3/4',
+        },
+      ])
     })
   })
 })

packages/atomic-layout-core/src/utils/styles/normalizeQuery/normalizeQuery.ts

@@ -1,20 +1,30 @@
 import { Numeric, Breakpoint } from '../../../const/defaultOptions'
 import isset from '../../functions/isset'
 import toDashedString from '../../strings/toDashedString'
+import toLowerCaseFirst from '../../strings/toLowerCaseFirst'
+
+export interface NormalizedQueryParam {
+  prefix: string
+  name: string
+  displayName: string
+  value: Numeric
+}
 
 /**
  * Normalizes given media query object to a list of [propName, propValue].
- * @example
- * normalizeQuery({ minWidth: 120 })
- * // [['min-width', 120]]
  */
 export default function normalizeQuery(
-  queryProps: Breakpoint,
-): Array<[string, Numeric]> {
-  return Object.entries<Numeric>(queryProps)
-    .filter(([_, propValue]) => isset(propValue))
-    .map<[string, Numeric]>(([propName, propValue]) => [
-      toDashedString(propName),
-      propValue,
-    ])
+  breakpoint: Breakpoint,
+): NormalizedQueryParam[] {
+  return Object.entries<Numeric>(breakpoint)
+    .filter(([_, value]) => isset(value))
+    .map(([propName, value]) => {
+      const [_, prefix, restName] = propName.match(/(min|max)?(.+)/)
+      const normalizedName = toLowerCaseFirst(restName)
+      const displayName = [prefix, toDashedString(normalizedName)]
+        .filter(Boolean)
+        .join('-')
+
+      return { prefix, name: normalizedName, displayName, value }
+    })
 }

packages/atomic-layout/src/hooks/useMediaQuery.ts

@@ -1,7 +1,6 @@
 import { useState, useMemo, useEffect, useLayoutEffect } from 'react'
 import {
   MediaQuery as MediaQueryParams,
-  compose,
   joinQueryList,
   normalizeQuery,
   transformNumeric,
@@ -11,8 +10,10 @@ import {
  * Creates a media querty string based on the given params.
  */
 export const createMediaQuery = (queryParams: MediaQueryParams): string => {
-  return compose(
-    joinQueryList(([paramName, paramValue]) => {
+  const queryList = normalizeQuery(queryParams)
+  const mediaQueryString = joinQueryList(
+    queryList,
+    ({ displayName, value }) => {
       /**
        * Transform values that begin with a number to prevent
        * transformations of "calc" expressions.
@@ -21,14 +22,15 @@ export const createMediaQuery = (queryParams: MediaQueryParams): string => {
        *
        * (min-width: 750) ==> (min-width: 750px)
        */
-      const resolvedParamValue = /^\d/.test(String(paramValue))
-        ? transformNumeric(paramValue)
-        : paramValue
+      const resolvedParamValue = /^\d/.test(String(value))
+        ? transformNumeric(value)
+        : value
 
-      return `(${paramName}:${resolvedParamValue})`
-    }),
-    normalizeQuery,
-  )(queryParams)
+      return `(${displayName}:${resolvedParamValue})`
+    },
+  )
+
+  return mediaQueryString
 }
 
 type UseMediaQuery = (