can't generate critical css at all

[IOWEB TECHNOLOGIES]

Describe the bug
I'm not able to generate critical css from a website URL no matter what I tried. I followed all the examples and nothing is generated. The critical variable is always empty and I Only get this message

root@LUCIANO-PC:/mnt/g/Projects/critical# node millionbeautylooks_com.js
/mnt/g/Projects/critical/css/millionbeatylooks_com_critical.css
▶  Crittr Run Initialized timer...
◼  Crittr Run Timer run for: 15.81s

I'm not sure if it has any meaning but the end of the timer is marked with red color while the initialize message is marked with green color.

To Reproduce
Steps to reproduce the behavior:

1. Use this js file

js

const Crittr = require("crittr");
const path = require('path');
const fs = require('fs');


var filename = "millionbeatylooks_com_critical.css";
var filepath = path.resolve("./css/" + filename);
if (!fs.existsSync(path.dirname(filepath))) {
    fs.mkdirSync(path.dirname(filepath));
}

const urls = [
    "https://www.millionbeautylooks.com/",
];

console.log(filepath);

Crittr({
    urls: urls,
    css: ".io{}",
}).then(({critical, rest}) => {
    // criticalCss contains all the above the fold css
    // restCss is the rest remaining after excluding the criticalCss.
    // You can start including it directly as a defered css without
    // any need to calculate it on your own
    console.log(critical);
    fs.writeFile(filepath, critical, {}, function () {
    });
    console.log("done");
});

2. execute node

Package.json

{
  "dependencies": {
    "crittr": "^1.2.6",
    "path": "^0.12.7"
  }
}

Expected behavior
I expected to see in console output the critical css, and the critical css stored in the target css file.

Screenshots

Environment (please complete the following information):

• OS: I tried [WSL Debian 9.6, Native Kali Linux kali-rolling, Native Xubuntu ]

[Philipp Winterle]

Hello @ioweb-gr,

thanks for submitting this issue.

I guess you missed out to use your css in the css property.
In the property:
css: ".io{}",
you have to place either the path to your final css containing all of the rules on your site or you provide a string of your css.

What happens in crittr?

It will get on the website your provided with a window of default desktop or mobile sizes (if not defined). Then it will take a snapshot of all CSS rules applied to this frame of your window. Afterwards it checks your given CSS file or string and checks which rule is in both, the result of the frame and the css. The matching ones will be in the final critical css result.

As far as I can see you only have provided ".io {}" which most likely won't match any rule on your site. There can be no css found.

Please try to use it like in this:

const Crittr = require("crittr");
const path = require('path');
const fs = require('fs');


var filename = "millionbeatylooks_com_critical.css";
var filepath = path.resolve("./css/" + filename);
if (!fs.existsSync(path.dirname(filepath))) {
    fs.mkdirSync(path.dirname(filepath));
}

const urls = [
    "https://www.millionbeautylooks.com/",
];

console.log(filepath);

Crittr({
    urls: urls,
    css: filepath, // !!!! this was wrong
}).then(({critical, rest}) => {
    // criticalCss contains all the above the fold css
    // restCss is the rest remaining after excluding the criticalCss.
    // You can start including it directly as a defered css without
    // any need to calculate it on your own
    console.log(critical);
    fs.writeFile(filepath, critical, {}, function () {
    });
    console.log("done");
});

[IOWEB TECHNOLOGIES]

Oh I see, I misunderstood how crittr works. Based on another tool I was using I thought it would extract all the css automatically from the target urls as well and the css property was only there in case you worked with a single bundle. I didn't understand that it only extracted the critical css from the css property.

That's why I was puzzled about this when reading the documentation.

Thank you very much for clarifying this for me

[Philipp Winterle]

I totally understand your point. Maybe I could be more clear in documentation about this. Feel free to add a pr writing more detailed docu.

About your idea of using the page CSS:
At the beginning crittr was using this method to extract data from the page itself. As Iam coming from an business use case to the idea of crittr I had to go back to use the css property method.
If you have third party css on your page, it would be considered as your css and so it could be in the critical css path. Which is not always what you want. Sometimes the third party code is so bad structured that it always pops up in critical path but is never shown there. For the sake of performance I came to the conclusion it would be better to only use the property option.

I will think about adding the option to leave it empty while then using the website css. Then the user has the chance to decide.
Guess it is not big of a deal.

[IOWEB TECHNOLOGIES]

It makes a lot of sense. I would have loved to have the option to use the website css. If you find the time to implement it, it would be awesome

[Philipp Winterle]

already opened a feature request issue. :)