postcss-nested-props

title="Philosopher’s stone, logo of PostCSS"
src="http://postcss.github.io/postcss/logo-leftp.png">



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:

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

is compiled to:

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

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

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

is compiled to:

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

$3

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

$3

`ts
import * as postcssNestedProps from 'postcss-nested-props';

postcss([ postcssNestedProps ]);
`

$3

None at this time.

Testing

Run the following command:

`
$ npm test
`

This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.

$3

For much faster development cycles, run the following commands in 2 separate processes:

`
$ npm run build:watch
`

Compiles TypeScript source into the ./dist folder and watches for changes.

`
$ npm run watch
`

Runs the tests in the ./dist` folder and watches for changes.