Retrieving CSS style values with Node.js

Question

Retrieving CSS style values with Node.js

I am looking to design a new CSS style that includes the lowest and highest values.

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

This code snippet is included in numerous CSS files within my style directory.

javascript jquery css node.js nodes

Answer 1

Answer №1

Utilizing postcss can help you extract the desired values from CSS.

Below is a sample code snippet to retrieve the minimum and maximum widths from various CSS files (using the selector 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) => {    
    // Iterate through each rule node.
    css.walkRules((rule) => {        
        // Check for matched selector 
        if (rule.selector.indexOf(selector) !== -1) {
            // Iterate through declarations.
            rule.walkDecls(decl => {
                // Extract 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('Successfully processed file : ', file))
        .catch(() => console.log('Error processing file : ', file));    

});

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

allWidthValues.sort();

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

Answer 2

Utilizing postcss can help you extract the desired values from CSS.

Below is a sample code snippet to retrieve the minimum and maximum widths from various CSS files (using the selector 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) => {    
    // Iterate through each rule node.
    css.walkRules((rule) => {        
        // Check for matched selector 
        if (rule.selector.indexOf(selector) !== -1) {
            // Iterate through declarations.
            rule.walkDecls(decl => {
                // Extract 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('Successfully processed file : ', file))
        .catch(() => console.log('Error processing file : ', file));    

});

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

allWidthValues.sort();

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

Retrieving CSS style values with Node.js

Answer №1

Similar questions

Web fonts are functioning properly only on Chrome and Safari for Macintosh operating systems

styled components are having issues with background gradients and opacity not functioning properly

The process of sending files through the multer function within a controller has many steps that need

Inquiring about the status of uploads in the AjaxFileUpload to ensure files have been successfully uploaded

Error: Unable to delete item because the delItemRow function is not defined for this.props

What is the best way to find out the hosting locations of npm packages?

Mantine UI: Elevate Your Component Library Experience

Using Jquery to add a list after parsing JSON data stored in localStorage

The error message caught us off guard: ReferenceError: Storage is not defined

The JObject parser abruptly halts its execution without producing any results or indicating any errors

Issue with Next.js: Callback function not being executed upon form submission

Encountering a "Network Error" when attempting to use Passport Google OAuth in a React.js application

Nextjs google places autocomplete not providing accurate suggestions

Should we pause JQUERY AJAX to prioritize usability, or only when absolutely necessary?

The functionality of minified JS code is limited to being copied and pasted directly into the

How can I troubleshoot jQuery not functioning in iOS even though it works on Safari?

Combine a JSON object and a JSON array by matching the value of the JSON object to the key of the JSON array

Ensure that the div automatically scrolls to the bottom when it is loaded, and also when new data is added - using angular

The transformation of a Raphael element does not occur as expected when it is passed to a function within a loop

What is the best way to utilize ng-if to conceal a component in AngularJS when a button in a separate component is clicked?