https://github.com/zgreen/postcss-shared-values

A PostCSS plugin that allows for a comma-separated shorthand for properties that share the same value.
https://github.com/zgreen/postcss-shared-values

css postcss postcss-plugin

Last synced: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/zgreen/postcss-shared-values
• Owner: zgreen
• Created: 2017-06-26T18:20:49.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T21:55:51.000Z (almost 2 years ago)
• Last Synced: 2024-09-28T18:48:02.540Z (about 2 months ago)
• Topics: css, postcss, postcss-plugin
• Language: JavaScript
• Homepage:
• Size: 83 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# PostCSS Shared Values

![Travis build status](https://travis-ci.org/zgreen/postcss-shared-values.svg?branch=master)

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:

```css

.foo {

  height, width: 100px;

}

```

### Output CSS:

```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.