PostCSS Commas allows you to declare multiple, comma-separated properties in CSS.
/* before */
.foo {
position: absolute;
top, left: 0;
margin, padding: 1em;
}
/* after */
.foo {
position: absolute;
top: 0;
left: 0;
margin: 1em;
padding: 1em;
}Add PostCSS Commas to your build tool:
npm install postcss-commas --save-devrequire('postcss-commas').process(YOUR_CSS);Add PostCSS to your build tool:
npm install postcss --save-devLoad PostCSS Commas as a PostCSS plugin:
postcss([
require('postcss-commas')()
]).process(YOUR_CSS);Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-devEnable PostCSS Commas within your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('postcss-commas')()
])
).pipe(
gulp.dest('.')
);
});Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-devEnable PostCSS Commas within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-commas')()
]
},
dist: {
src: '*.css'
}
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent