Utils for generating responsive styles

responsive-utils.js

// import { createUseStyles } from 'react-jss'

export const breakpoints = {
  'xs': 480,
  'sm': 720,
  'md': 1280,
  'lg': 1440,
  'xl': 1920
}

const styles = [{
  prefix: 'p',
  props: ['padding']
}, {
  prefix: 'm',
  props: ['margin']
}, {
  prefix: 'mr',
  props: ['marginRight']
}, {
  prefix: 'ml',
  props: ['marginLeft']
}, {
  prefix: 'mt',
  props: ['marginTop']
}, {
  prefix: 'mb',
  props: ['marginBottom']
}, {
  prefix: 'mx',
  props: ['marginLeft', 'marginRight']
}, {
  prefix: 'my',
  props: ['marginTop', 'marginBottom']
}]

// Multiplier for sizes Based on REMs
const sizeBase = 0.25

// Suffix for sizing
const sizeIncrements = [0, 1, 2, 3, 4, 5, 6, 8, 10, 16, 24]

const generateResponsiveStyles = (styles, breakpoints) => {
  return Object.entries(breakpoints).map(([breakpoint, size]) => ({
    [`@media (min-width: ${size}px)`] : {
      ...styles.map(({ prefix, props }) =>
        sizeIncrements.map(increment => ({
          [`${breakpoint}:${prefix}-${increment}`] : {
            ...props.map(prop => ({ [prop]: sizeBase * increment + 'rem' }))
          }
        }))
      ).flat()
    }
  }))
}

const generateStyles = (styles) => {
  return styles.map(({ prefix, prop }) => {
    return sizeIncrements.map(increment => {
      return {
        [`${prefix}-${increment}`]: {
          [prop]: sizeBase * increment + 'rem'
        }
      }
    })
  })
}

export const responsiveUtils = generateResponsiveStyles(styles, breakpoints).flat(6)
export const standardUtils = generateStyles(styles).flat(6)

// export default createUseStyles({
//   // ...output
// })