Чтение значения стилей CSS с использованием nodejs

Question

Я хочу создать новый CSS с самым низким и самым высоким значением.

     table[my-type="myStyle"] {
        width: 255.388px !important;
    }

и приведенный выше код присутствует в количестве n файлов CSS в моем каталоге стилей.

Answer 1

Вы можете использовать postcss , чтобы проанализировать CSS и получить нужные значения.

Вот пример того, как получить минимальную и максимальную ширину из разных файлов CSS (для одного и того же селектора table[my-type="myStyle"]):

const fs = require('fs');
const postcss = require('postcss');

const allWidthValues = [];

const files = [
    'styles/style-1.css',
    'styles/style-2.css',
    'styles/style-3.css'
];

const selector = 'table[my-type="myStyle"]';

const processor = postcss.plugin('processor', () => (css) => {    
    // Callback for each rule node.
    css.walkRules((rule) => {        
        // Match the individual rule selector 
        if (rule.selector.indexOf(selector) !== -1) {
            // Callback for each declaration.
            rule.walkDecls(decl => {
                // Find the width declaration
                if(decl.prop.indexOf('width') !== -1) {
                    const width = decl.value.replace('px', '') * 1;
                    allWidthValues.push(width);
                }
            })
        }
    });
});

files.forEach(file => {
    const css = fs.readFileSync(file, 'utf-8');
    postcss([processor])
        .process(css, {from : file})
        .then(() => console.log('Done processing file : ', file))
        .catch(() => console.log('Error processing file : ', file));    

});

console.log('All width values : ', allWidthValues);

allWidthValues.sort();

console.log('Min width : ', allWidthValues[0]);
console.log('Max width : ', allWidthValues[allWidthValues.length - 1]);