Shorthands for opposite properties
Switch branches/tags
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.json

README.md

PostCSS Axis Build Status

PostCSS plugin which adds shorthands for opposite properties.

/* Input example */
.foo {
  margin-x: 10px;
  padding-y: 10px 20px;
  border-x: 1px solid #f00;
  border-y-color: #fff;
}
/* Output example */
.foo {
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 10px;
  padding-bottom: 20px;
  border-left: 1px solid #f00;
  border-right: 1px solid #f00;
  border-top-color: #fff;
  border-bottom-color: #fff;
}

Installation

npm install postcss-axis

Usage

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

Options

trbl

Type: Boolean Default: false

Swaps left and right values in shorthands according to TRBL model.


See PostCSS docs for examples for your environment.