2.6 KiB
2.6 KiB
PostCSS Place Properties
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:
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;
}