peach a19a732be8 commit message | 2 年 前 | |
---|---|---|
.. | ||
CHANGELOG.md | 2 年 前 | |
LICENSE.md | 2 年 前 | |
README.md | 2 年 前 | |
index.cjs.js | 2 年 前 | |
index.cjs.js.map | 2 年 前 | |
index.es.mjs | 2 年 前 | |
index.es.mjs.map | 2 年 前 | |
package.json | 2 年 前 |
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;
}
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 |
---|
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;
}