List CSS custom properties (CSS Variables)
One possible solution would be to parse the document.styleSheets, and then split the rules into properties/values
var allCSS = [].slice.call(document.styleSheets)
.reduce(function(prev, styleSheet) {
if (styleSheet.cssRules) {
return prev + [].slice.call(styleSheet.cssRules)
.reduce(function(prev, cssRule) {
if (cssRule.selectorText == ':root') {
var css = cssRule.cssText.split('{');
css = css[1].replace('}','').split(';');
for (var i = 0; i < css.length; i++) {
var prop = css[i].split(':');
if (prop.length == 2 && prop[0].indexOf('--') == 1) {
console.log('Property name: ', prop[0]);
console.log('Property value:', prop[1]);
}
}
}
}, '');
}
}, '');:root {
--bc: #fff;
--bc-primary: #eee;
--bc-secondary: #ddd;
}Based on LGSon's answer here is something similar but using map, filter, and flat to make it easier to read line by line.
const variables = [].slice.call(document.styleSheets)
.map(styleSheet => [].slice.call(styleSheet.cssRules))
.flat()
.filter(cssRule => cssRule.selectorText === ':root')
.map(cssRule => cssRule.cssText.split('{')[1].split('}')[0].trim().split(';'))
.flat()
.filter(text => text !== "")
.map(text => text.split(':'))
.map(parts => ({key: parts[0].trim(), value: parts[1].trim() }))
;
console.log(variables);:root {
--foo: #fff;
--bar: #aaa
}