ryanmorr / amble

A stupid simple CSS lexer and walker

amble

A stupid simple CSS lexer and walker

Install

Download the CJS, ESM, UMD versions or install via NPM:

npm install @ryanmorr/amble

Usage

Given a string of CSS, amble will break it into logical segments such as a selector, an at-rule, or a declaration and sequentially walks them by calling a function. The function is provided the segment of CSS and the ending character used to indicate the type of segment as the only two parameters. The ending character is one of an opening brace ({) to indicate the start of a block, a semi-colon (;) to indicate a declaration, or a closing brace (}) to indicate the end of a block. For example:

import { walk } from '@ryanmorr/amble';

const css = `
    .foo {
        color: red;
    }

    @media screen and (max-width: 480px) {
        .foo {
            color: blue;
        }
    }
`;

walk(css, (style, char) => {
    console.log([style, char]);
});

Prints the following to the console:

[".foo", "{"]
["color:red", ";"]
["", "}"]
["@media screen and (max-width: 480px)", "{"]
[".foo", "{"]
["color:blue", ";"]
["", "}"]
["", "}"]

License

This project is dedicated to the public domain as described by the Unlicense.

amble's Issues

Add detokenizer/stringifier

Being able to transform the tokens back to a string would makes this even more useful!