PostCSS plugin to unwrap nested properties.
TypeScript Shell
Latest commit 98d960f Jan 20, 2017 @jedmao committed on GitHub Merge pull request #8 from jedmao/update-deps
v1.1.5: Fix issue #5, retire Babel, update deps

README.md

postcss-nested-props

NPM version npm license Travis Build Status AppVeyor Build Status

npm

PostCSS plugin to unwrap nested properties.

Nested Properties

CSS has quite a few properties that are in “namespaces;” for instance, font-family, font-size, and font-weight are all in the font namespace. In CSS, if you want to set a bunch of properties in the same namespace, you have to type it out each time. This plugin provides a shortcut: just write the namespace once, then nest each of the sub-properties within it. For example:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

is compiled to:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

The property namespace itself can also have a value. For example:

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

is compiled to:

.funky {
  font: 20px/24px fantasy;
  font-weight: bold;
}

For nested rules, use the postcss-nested plugin, but make sure to run it after this one.

Installation

$ npm install postcss-nested-props

Usage

JavaScript

postcss([ require('postcss-nested-props') ]);

TypeScript

///<reference path="node_modules/postcss-nested-props/.d.ts" />
import * as postcssNestedProps from 'postcss-nested-props';

postcss([ postcssNestedProps ]);

Options

None at this time.