postcss-resolve-prop
Version:
PostCSS helper method to shallowly iterate over each declaration.
106 lines (73 loc) • 2.73 kB
Markdown
# postcss-resolve-prop
<img align="right" width="135" height="95"
title="Philosopher’s stone, logo of PostCSS"
src="http://postcss.github.io/postcss/logo-leftp.png">
[](https://www.npmjs.org/package/postcss-resolve-prop)
[](https://www.npmjs.org/package/postcss-resolve-prop)
[](https://travis-ci.org/jedmao/postcss-resolve-prop)
[](https://ci.appveyor.com/project/jedmao/postcss-resolve-prop)
[](https://nodei.co/npm/postcss-resolve-prop/)
[PostCSS](https://github.com/postcss/postcss) helper method to resolve a rule's property value.
## Introduction
This project exposes a single function that simplifies the process of resolving a CSS rule's property value.
Given a CSS rule:
```css
a {
color: red;
color: blue;
}
```
Once parsed with PostCSS, you can request the value of the `color` property like so:
```js
var resolveProp = require('postcss-resolve-prop');
resolveProp(rule, 'color'); // blue
```
_Note: inherited properties are not supported at this time._
A more complicated example is when [shorthand properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) are used.
```css
a {
font-size: 1rem;
font: 1.2rem serif;
}
```
Let's get the `font-size`:
```js
resolveProp(rule, 'font-size', {
parsers: {
font: function(value) {
return require('parse-css-font')(value).size;
}
}
}); // 1.2rem
```
If no value can be resolved, `null` will be returned.
## Installation
```
$ npm install postcss-resolve-prop [--save[-dev]]
```
## Usage
```js
require('postcss-resolve-prop')(rule, prop[, options]);
```
### rule
The rule you wish to read. See [`PostCSS#Rule`](https://github.com/postcss/postcss/blob/master/docs/api.md#rule-node).
### prop
The property you wish to read. See [`PostCSS#Declaration#prop`](https://github.com/postcss/postcss/blob/master/docs/api.md#declarationprop).
## Options
### isObjectMode
Type: `Boolean`<br>
Required: `false`<br>
Default: `undefined`
Accumulates parser result objects into a final result object.
### parsers
Type: `Object`<br>
Required: `false`<br>
Default: `undefined`
An object where the keys map to CSS properties and the values are functions that parse the declaration value into a result.
```js
{
parser: function(value) {
return require('parse-css-font')(value).size;
}
}
```