How do you add stylesheets to JSDOM

Question

I am currently working on a project that requires me to have computed styles send to the browser via JSDOM. I am currently looking for a way to inject some basic CSS into JSDOM so that it could compute the correct inline style (Yes I know that's bad).

From what I have found out I can use JSDOM Level 2, but from there I can't find any documentation on how to inject the styles.

This is what I have so far;

    var document = jsdom.jsdom('<!DOCTYPE html><html><head></head><body id="abody" ></body></html>', jsdom.level(2, 'style'), {
        features : {
            FetchExternalResources : ['script', 'css'],
            QuerySelector : true
        }
    });

I have been inserting the css into the head tag but to no avail. And I know I could be doing the above code wrong as well.

Any help would be great.

Have you seen this **https://github.com/yonran/jsdom/blob/style/lib/jsdom/level2/style.js** — huMpty duMpty, Apr 25 '12 at 15:15
I have see it but I could not figure out a way to call those functions. — Paul, Apr 25 '12 at 15:27

score 13 · Accepted Answer · answered Apr 26 '12 at 16:46

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.

Nor.Z · Answer 2 · 2023-02-19T09:52:24.137

solution-preface

Seems Op's Answer_post's solution is:
directly copy and paste the style into the <style>.

If your question is:
How to let Jsdom load (/ why Jsdom doesnt load) external css stylesheet link in an html file? (eg: <link href="main_test.css" rel="stylesheet" />)
Following may help:

solution

- Have an html file, say main_test.html.
- main_test.html contains <link href="main_test.css" rel="stylesheet" /> -- which is the stylesheet you want to have
  - @note:
    if main_test.html doesnt have it
    & you want to add this at run time, maybe you can::
    - append this line as a string to html file, &
    - parse the html String (so, not fromFile()) into Jsdom

Load the html file into Jsdom, with the use of resources: 'usable'

  dom = await JSDOM.fromFile(pathStr_htmlFile, {
    contentType: 'text/html; charset="utf-8"',
    resources: 'usable',
  });

Make sure you wait until the css stylesheet is fully loaded, before accessing them.

reference

[Can't load external css] https://github.com/jsdom/jsdom/issues/1927

How do you add stylesheets to JSDOM

2 Answers2

solution-preface

solution

reference

Linked