Postcss-position-alt

PostCSS plugin that adds shorthand to position declarations.

.alpha {
  absolute: top left;
}
.beta {
  absolute: bottom 10px right z-index 1;
}
.gamma {
  fixed: top left 10px;
}
.delta {
  fixed: bottom auto left 10%;
}
.epsilon {
  fixed: top left bottom right z-index 9999;
}
.zeta {
  relative: top var(--some-var) left initial bottom revert right calc(100% + 10px);
}

/* Output */
.alpha {
  position: absolute;
  top: 0;
  left: 0;
}
.beta {
  position: absolute;
  bottom: 10px;
  right: 0;
  z-index: 1;
}
.gamma {
  position: fixed;
  top: 0;
  left: 10px;
}
.delta {
  position: fixed;
  bottom: auto;
  left: 10%;
}
.epsilon {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.zeta {
  position: relative;
  top: var(--some-var);
  left: initial;
  bottom: revert;
  right: calc(100% + 10px)
}

It's also possible to use directly position without position type :

.toto {
  top: 10px left z-index 100;
}
.titi {
  right: left 10px z-index bottom 1px;
}

/* Output */
.toto {
  top: 10px;
  left: 0;
  z-index: 100;
}
.titi {
  right: 0;
  left: 10px;
  bottom: 1px;
  z-index: 0;
}

It support those properties aliases :

.aliases {
  absolute t 1px l 2px b 3px r 4px z 5 /* or zi */
}

/* Output */
.aliases {
  position: absolute;
  top: 1px;
  left: 2px;
  bottom: 3px;
  right: 4px;
  z-index: 5;
}

full keyword :

.full {
  fixed: full;
}
.full2 {
  absolute: full z 99999;
}
.full3 {
  fixed: full 10px z 99999;
}

/* Output */
.full {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.full2 {
  position: absolute;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.full3 {
  position: absolute;
  z-index: 99999;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
}

horizontal or x and vertical or y keywords (since 0.7.0) :

.horizontal {
  fixed: horizontal 10px;
}
.vertical {
  absolute: vertical z 99;
}
.xyz {
  absolute: x 10px y 20px z 99;
}
.xyz2 {
  fixed: x y z;
}

/* Output */
.horizontal {
  position: fixed;
  right: 10px;
  left: 10px;
}
.vertical {
  position: absolute;
  z-index: 99;
  top: 0;
  bottom: 0;
}
.xyz {
  position: absolute;
  z-index: 99;
  top: 20px;
  right: 10px;
  bottom: 20px;
  left: 10px;
}
.xyz2 {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

It works with postcss-center :

.center {
  absolute: left center top center;
}

You can use the center keyword :

.center {
  absolute: center z-index 99;
}

/* Output */
.center {
  position: absolute;
  top: center;
  left: center;
  z-index: 99;
}

postcss-center must be applied after postcss-position-alt

Usage

postcss([ require('postcss-position-alt') ])

See PostCSS docs for examples for your environment.

Changelog

Changelog

License

MIT © Sylvain Baronnet for Studio.gd

Alternative

See postcss-position for an alternative shorthand syntax.