https://github.com/jednano/postcss-nested-props

PostCSS plugin to unwrap nested properties.
https://github.com/jednano/postcss-nested-props

css nested nested-properties postcss postcss-plugin properties props sass

Last synced: 3 months ago
JSON representation

PostCSS plugin to unwrap nested properties.

• Host: GitHub
• URL: https://github.com/jednano/postcss-nested-props
• Owner: jednano
• License: mit
• Created: 2015-07-10T06:41:52.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-11-02T17:41:27.000Z (over 7 years ago)
• Last Synced: 2024-10-18T04:18:50.306Z (4 months ago)
• Topics: css, nested, nested-properties, postcss, postcss-plugin, properties, props, sass
• Language: TypeScript
• Size: 92.8 KB
• Stars: 58
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-nested-props



[![NPM version](http://img.shields.io/npm/v/postcss-nested-props.svg?style=flat)](https://www.npmjs.org/package/postcss-nested-props)

[![npm license](http://img.shields.io/npm/l/postcss-nested-props.svg?style=flat-square)](https://www.npmjs.org/package/postcss-nested-props)

[![Travis Build Status](https://img.shields.io/travis/jedmao/postcss-nested-props.svg)](https://travis-ci.org/jedmao/postcss-nested-props)

[![codecov](https://codecov.io/gh/jedmao/postcss-nested-props/branch/master/graph/badge.svg)](https://codecov.io/gh/jedmao/postcss-nested-props)

[![Dependency Status](https://gemnasium.com/badges/github.com/jedmao/postcss-nested-props.svg)](https://gemnasium.com/github.com/jedmao/postcss-nested-props)

[![npm](https://nodei.co/npm/postcss-nested-props.svg?downloads=true)](https://nodei.co/npm/postcss-nested-props/)

[PostCSS](https://github.com/postcss/postcss) plugin to unwrap [nested properties](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#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`](https://github.com/postcss/postcss-nested) plugin, but make sure to run it _**after**_ this one.

## Installation

```

$ npm install postcss-nested-props

```

## Usage

### JavaScript

```js

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

```

### TypeScript

```ts

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

postcss([ postcssNestedProps ]);

```

### Options

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.

### Watching

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.