postcss-each-decl

PostCSS helper method to shallowly iterate over each declaration.

Introduction

Ever since PostCSS 5.0, a container method called walkDecls traverses the container's descendant nodes, calling a callback function for each declaration node found. Conversely, this project exposes a simple function that shallowly iterates over a container's direct child nodes, using no recursion.

const rule = postcss.parse(`
    a {
        foo: FOO;
        bar: BAR;
        b {
            baz: BAZ;
        }
        qux: QUX;
`).first;

eachDecl(rule, decl => {
    console.log(decl.prop, decl.value);
});

The above example outputs the following:

foo FOO
bar BAR
qux QUX

Installation

$ npm install postcss-each-decl

Usage

JavaScript

import postcss from 'postcss';
import eachDecl from 'postcss-each-decl';

const rule = postcss.parse('a{foo:bar}').first;
eachDecl(rule, decl => {
    console.log(decl.prop, decl.value); // foo bar
});

TypeScript

///<reference path="node_modules/postcss-each-decl/.d.ts" />
import postcss from 'postcss';
import eachDecl from 'postcss-each-decl';

const rule = postcss.parse('a{foo:bar}').first;
eachDecl(<postcss.Container>rule, decl => {
    console.log(decl.prop, decl.value); // foo bar
});

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 command:

$ npm run watch

This will build scripts, run tests and watch for changes.