You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

2.7 KiB

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