PostCSS Place Properties

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

```pcss .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:

bash npm install postcss-place --save-dev

Use PostCSS Place Properties to process your CSS:

```js import postcssPlace from 'postcss-place';

postcssPlace.process(YOUR_CSS /, processOptions, pluginOptions /); ```

Or use it as a PostCSS plugin:

```js import postcss from 'postcss'; import postcssPlace from 'postcss-place';

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

PostCSS Place Properties runs in all Node environments, with special instructions for:

| Node | Webpack | Create React App | Gulp | Grunt | | --- | --- | --- | --- | --- |

Options

preserve

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

js postcssPlace({ preserve: false })

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

/ becomes /

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