zgreen / postcss-shared-values

A PostCSS plugin that allows for a comma-separated shorthand for properties that share the same value.

PostCSS Shared Values

A PostCSS plugin that allows for a comma-separated shorthand for properties that share the same value.

Install

npm install --save-dev postcss-shared-values or yarn add -D postcss-shared-values

Usage examples

Input CSS:

.foo {
  height, width: 100px;
}

Output CSS:

.foo {
  height: 100px;
  width: 100px;
}

Try it out.

An example is available in this repository. Use npm run example or yarn example to try it out.

Is this a good idea?

Maybe, maybe not. This plugin encourages an invalid CSS syntax, which may be confusing to some users. However, it also encourages the user to explicitly group properties that are meant to share the same value, which may be helpful from a code maintenance standpoint. It's also a convenient shorthand.