Usage - "skipping" over null values when using many breakpoints

[bryanberger]

Love the library so far, any suggestion on how to improve the readability here?

Define our breakpoints

export const breakpoints = {
  xs: 480,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1600,
}

Feed into facepaint

export const mq = facepaint([
  `@media(min-width: ${breakpoints.xs}px)`,
  `@media(min-width: ${breakpoints.sm}px)`,
  `@media(min-width: ${breakpoints.md}px)`,
  `@media(min-width: ${breakpoints.lg}px)`,
  `@media(min-width: ${breakpoints.xl}px)`,
  `@media(min-width: ${breakpoints.xxl}px)`,
])

Usage

mq({
      paddingLeft: [
        0,
        null,
        null,
        null,
        null,
        '320px'
      ],
    })

In this case I want the paddingLeft to remain 0 until breakpoint xl. Typically all I would need to do is use @media(min-width: ${breakpoints.xl}px) and be done. How might I reduce the need to liter the code with null values, also how might I make it more readable? You must keep the breakpoint order in your head or constantly refer back to the facepaint declaration as the array size expands.

Perhaps a regular media query could be used here instead, but I prefer not to mix/match. Thoughts?

[ichabodcole]

@bryanberger
My 2cents, create a helper function to generate the array of nulls, and then splat into your mq array.

// Somewhere far far away in a stylz helper file...

export const nullFill = count => {
  return new Array(count).fill(null);
};

then

mq({
      paddingLeft: [
        0,
        ...nullFill(4)
        '320px'
      ],
    })

Perhaps name the helper something more "domain driven" like mqFill.