How to Add Stylesheets to Jsdom

How do you add stylesheets to JSDOM

Well, this is going to sounds kinda dumb but this is what I did:

    var path = require('path');
    var fs = require('fs');
    var mainCss = fs.readFileSync(path.normalize(__dirname + "web_main.css"), 'utf8');
    var document = jsdom.jsdom('<!DOCTYPE html><html><meta http-equiv="content-type" content="text/html; charset=utf-8"><head></head><body id="abody" ></body></html>', jsdom.level(3, 'index'), {
        features : {
            FetchExternalResources : ['script', 'css'],
            QuerySelector : true
        }
    });     
    var window = document.createWindow();
    var head = document.getElementsByTagName('head')[0];
    style = document.createElement("style");
    style.type = 'text/css';
    style.innerHTML = mainCss;
    head.appendChild(style);

So basically all I changed was moving the level to 3 index, and instead of directly having it in the starting html, I appended it afterwards.

Its pretty simple and I hope it helps someone else out.

Rickshaw CSS/Axes in JSDOM

Unfortunately, it looks like imagemagick doesn't support external CSS and other people asking for solutions for similar problems haven't received any alternative suggestions for tools that do. So you're going to have to make sure that the relevant styles are applied inline in order for your SVG to PNG converter to recognize them.

The universal way to do this would be to write a script that traverses the CSS-DOM, grabs each rule, selects all elements that match the rule, and applies the corresponding styles to them as inline styles.

However, that would probably be overkill for your needs. Your specific problem is caused by the default style for <path> elements, which is solid black fill and no stroke. When using grid lines, this means that the axis domain path gets drawn as a solid black rectangle covering the entire plotting area.

The simple solution is therefore to select these paths after drawing the axes, and apply custom styles directly:

d3.selectAll("path.domain")
  .style({ fill:"none",
           stroke:"black",
           stroke-width:1,
        });

Why can't load CSS with jsdom module for NodeJS

It's better to install the serve-static module

And if we want to get the page with the same name as request url (for example get another.html when click by the link with href="/another") it's enough to add

if(req.url != '/' && !~req.url.indexOf('.')) {
    req.url = req.url+'.html';
}

before the line

serve(req, res);

How to get css of all elements given a url using node?

You have to make use of getComputedStyle

See https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

something like:
window.getComputedStyle(node, null).getPropertyValue('font-family');

It will return a string (like "Arial, "Helvetica Neue", Helvetica, sans-serif") in which you can search for the font

Given your exemple, I think you can do:

    function searchForHelvetica($, word) {
            var bodyText = $('*').each( function(i , e) { console.log(window.getComputedStyle($(e)[0], null).getPropertyValue('font-family')) } );
    }

Note:

As it is clearly stated in cheerio README:

Cheerio parses markup and provides an API for traversing/manipulating the resulting data structure. It does not interpret the result as a web browser does. Specifically, it does not produce a visual rendering, apply CSS, load external resources, or execute JavaScript. If your use case requires any of this functionality, you should consider projects like PhantomJS or JSDom.

cheerio does not render/apply CSS.

So you should use jsdom (https://github.com/jsdom/jsdom) as it does support getComputedStyle.

How to Add Stylesheets to Jsdom

How do you add stylesheets to JSDOM

Rickshaw CSS/Axes in JSDOM

Why can't load CSS with jsdom module for NodeJS

How to get css of all elements given a url using node?

Related Topics

Leave a reply