PostCSS plugin to unwrap 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.

$ npm install postcss-nested-props 

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

import * as postcssNestedProps from 'postcss-nested-props'; postcss([ postcssNestedProps ]);

None at this time.

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.

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.