postcss-resolve-prop

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:

a {
    color: red;
    color: blue;
}

Once parsed with PostCSS, you can request the value of the color property like so:

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 are used.

a {
    font-size: 1rem;
    font: 1.2rem serif;
}

Let's get the font-size:

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

require('postcss-resolve-prop')(rule, prop[, options]);

rule

The rule you wish to read. See PostCSS#Rule.

prop

The property you wish to read. See PostCSS#Declaration#prop.

Options

isObjectMode

Type: Boolean
Required: false
Default: undefined

Accumulates parser result objects into a final result object.

parsers

Type: Object
Required: false
Default: undefined

An object where the keys map to CSS properties and the values are functions that parse the declaration value into a result.

{
    parser: function(value) {
        return require('parse-css-font')(value).size;
    }
}