PostCSS plugin that adds shorthand declarations for position attributes
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
gulpfile.js
index.js
package-lock.json
package.json

README.md

PostCSS Position

NPM version Downloads Build Status

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