Take a look at CSSTree

[lahmatiy]

CSSTree has a functionality that can match a value against a syntax definition (CSS specs are using Value Definition Syntax to define syntaxes). Definitions dictionary can be extended or altered.

import * as csstree from 'css-tree';

const match = csstree.lexer.matchProperty(
    'background',
    'center / contain no-repeat url("../foo.svg"), #eee 35% url("../bar.png")'
);

console.log(JSON.stringify(match.matched, null, 4));

JSON output

{
    "syntax": {
        "type": "Property",
        "name": "background"
    },
    "match": [
        {
            "syntax": {
                "type": "Type",
                "name": "bg-layer",
                "opts": null
            },
            "match": [
                {
                    "syntax": {
                        "type": "Type",
                        "name": "bg-position",
                        "opts": null
                    },
                    "match": [
                        {
                            "syntax": {
                                "type": "Keyword",
                                "name": "center"
                            },
                            "token": "center",
                            "node": null
                        }
                    ]
                },
                {
                    "syntax": {
                        "type": "Token",
                        "value": "/"
                    },
                    "token": "/",
                    "node": null
                },
                {
                    "syntax": {
                        "type": "Type",
                        "name": "bg-size",
                        "opts": null
                    },
                    "match": [
                        {
                            "syntax": {
                                "type": "Keyword",
                                "name": "contain"
                            },
                            "token": "contain",
                            "node": null
                        }
                    ]
                },
                {
                    "syntax": {
                        "type": "Type",
                        "name": "repeat-style",
                        "opts": null
                    },
                    "match": [
                        {
                            "syntax": {
                                "type": "Keyword",
                                "name": "no-repeat"
                            },
                            "token": "no-repeat",
                            "node": null
                        }
                    ]
                },
                {
                    "syntax": {
                        "type": "Type",
                        "name": "bg-image",
                        "opts": null
                    },
                    "match": [
                        {
                            "syntax": {
                                "type": "Type",
                                "name": "image",
                                "opts": null
                            },
                            "match": [
                                {
                                    "syntax": {
                                        "type": "Type",
                                        "name": "url",
                                        "opts": null
                                    },
                                    "match": [
                                        {
                                            "syntax": {
                                                "type": "Function",
                                                "name": "url"
                                            },
                                            "token": "url(",
                                            "node": null
                                        },
                                        {
                                            "syntax": {
                                                "type": "Type",
                                                "name": "string",
                                                "opts": null
                                            },
                                            "match": [
                                                {
                                                    "syntax": null,
                                                    "token": "\"../foo.svg\"",
                                                    "node": null
                                                }
                                            ]
                                        },
                                        {
                                            "syntax": {
                                                "type": "Token",
                                                "value": ")"
                                            },
                                            "token": ")",
                                            "node": null
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "syntax": {
                "type": "Comma"
            },
            "token": ",",
            "node": null
        },
        {
            "syntax": {
                "type": "Type",
                "name": "final-bg-layer",
                "opts": null
            },
            "match": [
                {
                    "syntax": {
                        "type": "Property",
                        "name": "background-color"
                    },
                    "match": [
                        {
                            "syntax": {
                                "type": "Type",
                                "name": "color",
                                "opts": null
                            },
                            "match": [
                                {
                                    "syntax": {
                                        "type": "Type",
                                        "name": "hex-color",
                                        "opts": null
                                    },
                                    "match": [
                                        {
                                            "syntax": null,
                                            "token": "#eee",
                                            "node": null
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "syntax": {
                        "type": "Type",
                        "name": "bg-position",
                        "opts": null
                    },
                    "match": [
                        {
                            "syntax": {
                                "type": "Type",
                                "name": "length-percentage",
                                "opts": null
                            },
                            "match": [
                                {
                                    "syntax": {
                                        "type": "Type",
                                        "name": "percentage",
                                        "opts": null
                                    },
                                    "match": [
                                        {
                                            "syntax": null,
                                            "token": "35%",
                                            "node": null
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "syntax": {
                        "type": "Type",
                        "name": "bg-image",
                        "opts": null
                    },
                    "match": [
                        {
                            "syntax": {
                                "type": "Type",
                                "name": "image",
                                "opts": null
                            },
                            "match": [
                                {
                                    "syntax": {
                                        "type": "Type",
                                        "name": "url",
                                        "opts": null
                                    },
                                    "match": [
                                        {
                                            "syntax": {
                                                "type": "Function",
                                                "name": "url"
                                            },
                                            "token": "url(",
                                            "node": null
                                        },
                                        {
                                            "syntax": {
                                                "type": "Type",
                                                "name": "string",
                                                "opts": null
                                            },
                                            "match": [
                                                {
                                                    "syntax": null,
                                                    "token": "\"../bar.png\"",
                                                    "node": null
                                                }
                                            ]
                                        },
                                        {
                                            "syntax": {
                                                "type": "Token",
                                                "value": ")"
                                            },
                                            "token": ")",
                                            "node": null
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

All definitions can be found at CSS syntax reference (mdn/data & CSSTree).
It also makes it possible to test the value like you example:

[rtsao]

Oh wow this is great, thanks for pointing this out! Somehow I hadn't heard of CSSTree before... looks very impressive 😄