UNPKG

postcss-resolve-prop

Version:

PostCSS helper method to shallowly iterate over each declaration.

106 lines (73 loc) 2.73 kB
# 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"> [![NPM version](http://img.shields.io/npm/v/postcss-resolve-prop.svg?style=flat)](https://www.npmjs.org/package/postcss-resolve-prop) [![npm license](http://img.shields.io/npm/l/postcss-resolve-prop.svg?style=flat-square)](https://www.npmjs.org/package/postcss-resolve-prop) [![Travis Build Status](https://img.shields.io/travis/jedmao/postcss-resolve-prop.svg?label=unix)](https://travis-ci.org/jedmao/postcss-resolve-prop) [![AppVeyor Build Status](https://img.shields.io/appveyor/ci/jedmao/postcss-resolve-prop.svg?label=windows)](https://ci.appveyor.com/project/jedmao/postcss-resolve-prop) [![npm](https://nodei.co/npm/postcss-resolve-prop.svg?downloads=true)](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; } } ```