Take a look at CSSTree #2
Description
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:
