postcss-place

Use a place-* shorthand for align-* and justify-* in CSS

MIT-0 21 个版本
安装
npm install postcss-place
yarn add postcss-place
pnpm add postcss-place
bun add postcss-place
README

PostCSS Place Properties PostCSS Logo

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;
}
版本列表
11.0.0 2026-01-14
10.0.0 2024-08-03
9.0.1 2023-12-15
9.0.0 2023-07-03
8.0.1 2023-01-28
8.0.0 2023-01-24
7.0.5 2022-07-08
7.0.4 2022-02-05
7.0.3 2022-01-02
7.0.2 2021-12-13
7.0.1 2021-11-18
7.0.0 2021-09-17
5.0.0 2020-04-26
4.0.1 2018-09-18
4.0.0 2018-09-18
3.0.1 2018-05-08
3.0.0 2018-05-08
2.0.0 2017-06-30
1.0.2 2016-12-14
1.0.1 2016-12-06
1.0.0 2016-11-26