MaxMilton/ekscss

${x.fn.map(x.spacingValues, (value, i) => xcss`
  .ma${i} { margin: ${value}; }
`)}
${x.fn.map(x.spacingValues, (value, i) => xcss`
  .mh${i} { margin-right: ${value}; margin-left: ${value}; }
  .mv${i} { margin-top: ${value}; margin-bottom: ${value}; }
`)}
${x.fn.map(x.spacingValues, (value, i) => xcss`
  .mt${i} { margin-top: ${value}; }
  .mr${i} { margin-right: ${value}; }
  .mb${i} { margin-bottom: ${value}; }
  .ml${i} { margin-left: ${value}; }
`)}

${x.fn.map(x.spacingValues, (value, i) => xcss`
  .pa${i} { padding: ${value}; }
`)}
${x.fn.map(x.spacingValues, (value, i) => xcss`
  .ph${i} { padding-right: ${value}; padding-left: ${value}; }
  .pv${i} { padding-top: ${value}; padding-bottom: ${value}; }
`)}
${x.fn.map(x.spacingValues, (value, i) => xcss`
  .pt${i} { padding-top: ${value}; }
  .pr${i} { padding-right: ${value}; }
  .pb${i} { padding-bottom: ${value}; }
  .pl${i} { padding-left: ${value}; }
`)}

/* Auto margin */

.mh-auto { margin-right: auto; margin-left: auto; }
.mv-auto { margin-top: auto; margin-bottom: auto; }
.mt-auto { margin-top: auto; }
.mr-auto { margin-right: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }

.mt-auto-i { margin-top: auto !important; }
.mr-auto-i { margin-right: auto !important; }
.mb-auto-i { margin-bottom: auto !important; }
.ml-auto-i { margin-left: auto !important; }

/* Negative margin */

.mh-1 { margin-right: -0.25rem; margin-left: -0.25rem; }
.mv-1 { margin-top: -0.25rem; margin-bottom: -0.25rem; }
.mt-1 { margin-top: -0.25rem; }
.mr-1 { margin-right: -0.25rem; }
.mb-1 { margin-bottom: -0.25rem; }
.ml-1 { margin-left: -0.25rem; }
.mh-2 { margin-right: -0.5rem; margin-left: -0.5rem; }
.mv-2 { margin-top: -0.5rem; margin-bottom: -0.5rem; }
.mt-2 { margin-top: -0.5rem; }
.mr-2 { margin-right: -0.5rem; }
.mb-2 { margin-bottom: -0.5rem; }
.ml-2 { margin-left: -0.5rem; }
.mh-3 { margin-right: -1rem; margin-left: -1rem; }
.mv-3 { margin-top: -1rem; margin-bottom: -1rem; }
.mt-3 { margin-top: -1rem; }
.mr-3 { margin-right: -1rem; }
.mb-3 { margin-bottom: -1rem; }
.ml-3 { margin-left: -1rem; }
.mh-4 { margin-right: -2rem; margin-left: -2rem; }
.mv-4 { margin-top: -2rem; margin-bottom: -2rem; }
.mt-4 { margin-top: -2rem; }
.mr-4 { margin-right: -2rem; }
.mb-4 { margin-bottom: -2rem; }
.ml-4 { margin-left: -2rem; }

/* Resets */

.mau { margin: unset; }
.mhu { margin-right: unset; margin-left: unset; }
.mvu { margin-top: unset; margin-bottom: unset; }
.mtu { margin-top: unset; }
.mru { margin-right: unset; }
.mbu { margin-bottom: unset; }
.mlu { margin-left: unset; }

${x.fn.each(x.media, (bp, query) => xcss`
  @media ${query} {
    ${x.fn.map(x.spacingValues, (value, i) => xcss`
      .${bp}-ma${i} { margin: ${value}; }
    `)}
    ${x.fn.map(x.spacingValues, (value, i) => xcss`
      .${bp}-mh${i} { margin-right: ${value}; margin-left: ${value}; }
      .${bp}-mv${i} { margin-top: ${value}; margin-bottom: ${value}; }
    `)}
    ${x.fn.map(x.spacingValues, (value, i) => xcss`
      .${bp}-mt${i} { margin-top: ${value}; }
      .${bp}-mr${i} { margin-right: ${value}; }
      .${bp}-mb${i} { margin-bottom: ${value}; }
      .${bp}-ml${i} { margin-left: ${value}; }
    `)}

    ${x.fn.map(x.spacingValues, (value, i) => xcss`
      .${bp}-pa${i} { padding: ${value}; }
    `)}
    ${x.fn.map(x.spacingValues, (value, i) => xcss`
      .${bp}-ph${i} { padding-right: ${value}; padding-left: ${value}; }
      .${bp}-pv${i} { padding-top: ${value}; padding-bottom: ${value}; }
    `)}
    ${x.fn.map(x.spacingValues, (value, i) => xcss`
      .${bp}-pt${i} { padding-top: ${value}; }
      .${bp}-pr${i} { padding-right: ${value}; }
      .${bp}-pb${i} { padding-bottom: ${value}; }
      .${bp}-pl${i} { padding-left: ${value}; }
    `)}
  }
`)}

${x.fn.each(x.media, (bp, query) => xcss`
  @media ${query} {
    .${bp}-mh-auto { margin-right: auto; margin-left: auto; }
    .${bp}-mv-auto { margin-top: auto; margin-bottom: auto; }
    .${bp}-mt-auto { margin-top: auto; }
    .${bp}-mr-auto { margin-right: auto; }
    .${bp}-mb-auto { margin-bottom: auto; }
    .${bp}-ml-auto { margin-left: auto; }

    .${bp}-mt-auto-i { margin-top: auto !important; }
    .${bp}-mr-auto-i { margin-right: auto !important; }
    .${bp}-mb-auto-i { margin-bottom: auto !important; }
    .${bp}-ml-auto-i { margin-left: auto !important; }

    .${bp}-mt-offset { margin-top: -${x.linkClickArea}; }
    .${bp}-mr-offset { margin-right: -${x.linkClickArea}; }
    .${bp}-mb-offset { margin-bottom: -${x.linkClickArea}; }
    .${bp}-ml-offset { margin-left: -${x.linkClickArea}; }

    .${bp}-mh-1 { margin-right: -0.25rem; margin-left: -0.25rem; }
    .${bp}-mv-1 { margin-top: -0.25rem; margin-bottom: -0.25rem; }
    .${bp}-mt-1 { margin-top: -0.25rem; }
    .${bp}-mr-1 { margin-right: -0.25rem; }
    .${bp}-mb-1 { margin-bottom: -0.25rem; }
    .${bp}-ml-1 { margin-left: -0.25rem; }
    .${bp}-mh-2 { margin-right: -0.5rem; margin-left: -0.5rem; }
    .${bp}-mv-2 { margin-top: -0.5rem; margin-bottom: -0.5rem; }
    .${bp}-mt-2 { margin-top: -0.5rem; }
    .${bp}-mr-2 { margin-right: -0.5rem; }
    .${bp}-mb-2 { margin-bottom: -0.5rem; }
    .${bp}-ml-2 { margin-left: -0.5rem; }
    .${bp}-mh-3 { margin-right: -1rem; margin-left: -1rem; }
    .${bp}-mv-3 { margin-top: -1rem; margin-bottom: -1rem; }
    .${bp}-mt-3 { margin-top: -1rem; }
    .${bp}-mr-3 { margin-right: -1rem; }
    .${bp}-mb-3 { margin-bottom: -1rem; }
    .${bp}-ml-3 { margin-left: -1rem; }
    .${bp}-mh-4 { margin-right: -2rem; margin-left: -2rem; }
    .${bp}-mv-4 { margin-top: -2rem; margin-bottom: -2rem; }
    .${bp}-mt-4 { margin-top: -2rem; }
    .${bp}-mr-4 { margin-right: -2rem; }
    .${bp}-mb-4 { margin-bottom: -2rem; }
    .${bp}-ml-4 { margin-left: -2rem; }

    .${bp}-mau { margin: unset; }
    .${bp}-mhu { margin-right: unset; margin-left: unset; }
    .${bp}-mvu { margin-top: unset; margin-bottom: unset; }
    .${bp}-mtu { margin-top: unset; }
    .${bp}-mru { margin-right: unset; }
    .${bp}-mbu { margin-bottom: unset; }
    .${bp}-mlu { margin-left: unset; }
  }
`)}