PostCSS Position

PostCSS plugin that adds shorthand attributes to position declarations.

Part of Rucksack - CSS Superpowers

Input

 .foo {
  position: absolute 10px 0;
}

.bar {
  position: fixed 0;
}

.baz {
  position: relative 30% auto 0;
}

.fab {
  position: absolute 10px 0 20px 30px;
}

Output

 .foo {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 10px;
  left: 0;
}

.bar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.baz {
  position: relative;
  top: 30%;
  right: auto;
  bottom: 0;
  left: auto;
}

.fab {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 20px;
  left: 30px;
}

Usage

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

See PostCSS docs for examples for your environment.

MIT © Sean King