css-query
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-fix • Public • Published

    css-query NPM version

    A simple parser that allows querying of CSS values in a stylesheet.

    Why?

    I needed to parse values off a CSS stylesheet in a personal project, so I created this because I didn't find anything that did this.

    Example

    Warning:
    Currently it's only possible to query for a selector that's actually present in the CSS since there isn't any matching functionality present yet.

    That's why a random selector like html body #foo.active:hover isn't going to work if you don't specifically define a selector like that.


    style.css:

    #foo {
        color: red;
        font-size: 20px;
    }
     
    #foo.active {
        color: green !important;
    }

    index.js:

    const cssQuery = require('css-query');
     
    cssQuery.forFile('style.css')
        .then(query => {
            const color = query.query({
                selector: '#foo.active',
                property: 'color'
            }).value
     
            console.log(`The element's color is: ${color}`)
        })
     

    Output:

    The element's color is: green

    To do

    I won't be actively working on this, but there's still some stuff that should get added to this over time.

    • Getting this to work with @media queries
    • Generic selector matching, so that it's less like selecting the key from a JSON and more like "I have 'span.foo', which styles do I get for it in this stylesheet?"

    Contributing

    I'll gladly appreciate any contribution on this package!

    Install

    npm i css-query

    DownloadsWeekly Downloads

    0

    Version

    1.0.0-fix

    License

    MIT

    Last publish

    Collaborators

    • metaa