PostCSS Place Properties

npm install postcss-place --save-dev

PostCSS Place Properties lets you use place-* properties as shorthands for align-* and justify-*, following the CSS Box Alignment specification.

.example {
    place-self: center;
    place-content: space-between center;
}

/* becomes */

.example {
    align-self: center;
    justify-self: center;
    place-self: center;
    align-content: space-between;
    justify-content: center;
    place-content: space-between center;
}

Usage

Add PostCSS Place Properties to your project:

npm install postcss postcss-place --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssPlace = require('postcss-place');

postcss([
    postcssPlace(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is preserved.

postcssPlace({ preserve: false })

.example {
    place-self: center;
    place-content: space-between center;
}

/* becomes */

.example {
    align-self: center;
    justify-self: center;
    align-content: space-between;
    justify-content: center;
}