csstools/postcss-commas

Declare multiple, comma-separated properties

PostCSS Commas

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;
}

Usage

Add PostCSS Commas to your build tool:

npm install postcss-commas --save-dev

Node

require('postcss-commas').process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load PostCSS Commas as a PostCSS plugin:

postcss([
	require('postcss-commas')()
]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable 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('.')
	);
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable PostCSS Commas within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
	postcss: {
		options: {
			use: [
				require('postcss-commas')()
			]
		},
		dist: {
			src: '*.css'
		}
	}
});