postcss-alignment-shorthands

PostCSS plugin to transform the shorthands for the alignment properties: <align|justify-self|content|items>

Reflects the idea from a csswg-drafts proposal.

Using this:

.container {
    place-content: space-between;
    place-items: stretch;
}
 
.item {
    place-self: center;
}

you will get:

.container {
    align-content: space-between;
    justify-content: space-between;
    align-items: stretch;
    justify-items: stretch;
}
 
.item {
    align-self: center;
    justify-self: center;
}

Easy configurable if the shorthand prefix is changed at some point in time.

Installation

$ npm install postcss-alignment-shorthands

Usage

postcss([ require('postcss-alignment-shorthands') ])

Check how to use with Gulp, Grunt, Webpack, Node.js etc