@ryanmorr/parselector

parselector

Parse a CSS selector string

Install

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

npm install @ryanmorr/parselector

Usage

Provide a selector string and get a two-dimensional array composed of each selector group in the first array and the tokens for a selector sequence in the second array.

import parselector from '@ryanmorr/parselector';

parselector('#foo[attr$="value" i] > div:not(.bar), .baz span::before');

Generates the following AST structure:

[
    [
        {
            nodeName: null,
            attributes: [
                {
                    name: 'id',
                    operator: '=',
                    value: 'foo',
                    ignoreCase: false
                },
                {
                    name: 'attr',
                    operator: '$=',
                    value: 'value',
                    ignoreCase: true
                }
            ],
            pseudoClasses: [],
            pseudoElement: null
        },
        '>',
        {
            nodeName: 'div',
            attributes: [],
            pseudoClasses: [
                {
                    name: 'not',
                    value: '.bar'
                }
            ],
            pseudoElement: null
        }
    ],
    [
        {
            nodeName: null,
            attributes: [
                {
                    name: 'class',
                    operator: '~=',
                    value: 'baz',
                    ignoreCase: false
                }
            ],
            pseudoClasses: [],
            pseudoElement: null
        },
        ' ',
        {
            nodeName: 'span',
            attributes: [],
            pseudoClasses: [],
            pseudoElement: 'before'
        }
    ]
]

License

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