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 build tool:
npm install postcss-place --save-dev
Node
Use PostCSS Place Properties to process your CSS:
import postcssPlace from 'postcss-place';
postcssPlace.process(YOUR_CSS, , );
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use PostCSS Place Properties as a plugin:
import postcss from 'gulp-postcss';
import postcssPlace from 'postcss-place';
postcss([
postcssPlace()
]).process(YOUR_CSS);
Webpack
Add PostCSS Loader to your build tool:
npm install postcss-loader --save-dev
Use PostCSS Place Properties in your Webpack configuration:
import postcssPlace from 'postcss-place';
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssPlace()
]
} }
]
}
]
}
}
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use PostCSS Place Properties in your Gulpfile:
import postcss from 'gulp-postcss';
import postcssPlace from 'postcss-place';
gulp.task('css', () => gulp.src('./src/*.css').pipe(
postcss([
postcssPlace()
])
).pipe(
gulp.dest('.')
));
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use PostCSS Place Properties in your Gruntfile:
import postcssPlace from 'postcss-place';
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
postcssPlace()
]
},
dist: {
src: '*.css'
}
}
});
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;
}