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 {
    border-color: red;
    border: 1px solid blue;
}

Let's get the border-color:

resolveProp(rule, 'border-color', {
    defaultValue: 'black', // Note: varies from one browser to another
    shorthandParser: function(value) {
        return {
            color: postcss.list.space(value).pop() // Just a stupid example
        };
    }
}); // blue

Installation

$ npm install postcss-resolve-prop [--save[-dev]]

Usage

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

rule

See PostCSS#Rule.

prop

See PostCSS#Declaration#prop.

Options

defaultValue

Type: string
Required: false
Default: undefined

Refer to the CSS specification for what the default value should be for the property you are reading.

shorthandParser

Type: (value) => {}
Required: false
Default: undefined

If provided, the shorthand property will be implied by the beginning of your prop arg. For example, if you provide a prop named border-color, then border is the implied shorthand prop.

The function you provide takes in the shorthand property value and should return a plain JavaScript object where the keys map to CSS properties without the prefix.