如何在JavaScript中将CSS代码转换为数组

// CSS代码
const cssCode = `
    body {
        background-color: #f1f1f1;
        font-family: Arial, sans-serif;
    }
    h1 {
        color: #333;
        font-size: 24px;
    }
`;

// 使用正则表达式将CSS代码转换为数组
const cssArray = cssCode.split(/\r?\n/).filter(line => line.trim() !== '');

console.log(cssArray);

// 引入CSS解析库
const css = require('css');

// CSS代码
const cssCode = `
    body {
        background-color: #f1f1f1;
        font-family: Arial, sans-serif;
    }
    h1 {
        color: #333;
        font-size: 24px;
    }
`;

// 使用CSS解析库将CSS代码转换为AST（抽象语法树）
const ast = css.parse(cssCode);

// 遍历AST，提取选择器和样式属性，并将其转换为数组
const cssArray = [];
ast.stylesheet.rules.forEach(rule => {
    if (rule.type === 'rule') {
        const selectors = rule.selectors;
        const declarations = rule.declarations;
        const properties = declarations.filter(declaration => declaration.type === 'declaration').map(declaration => ({
            property: declaration.property,
            value: declaration.value
        }));
        cssArray.push({
            selectors: selectors,
            properties: properties
        });
    }
});

console.log(cssArray);