Name Last Update
..
CHANGELOG.md Loading commit data...
LICENSE.md Loading commit data...
README.md Loading commit data...
index.cjs.js Loading commit data...
index.cjs.js.map Loading commit data...
index.es.mjs Loading commit data...
index.es.mjs.map Loading commit data...
package.json Loading commit data...

PostCSS Place Properties PostCSS Logo

NPM Version CSS Standard Status Build Status Support Chat

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-place --save-dev

Use PostCSS Place Properties to process your CSS:

import postcssPlace from 'postcss-place';

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

Or use it as a PostCSS plugin:

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.

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;
}