Repository navigation
ignoreJSErrors true, yet puppeteer throws in some cases. #400
Description
##Expected Behavior
When ignoreJSErrors is true to get a minimal css result.
Current Behavior 8000
minimalcss throws an exception.
Steps/Code to Reproduce
const minimalcss = require('minimalcss')
let options = {
urls: ["https://hostchefs.eu"],
enableServiceWorkers: false,
ignoreCSSErrors: true,
ignoreJSErrors: true,
ignoreRequestErrors: true,
puppeteerArgs: ['--no-sandbox'],
};
minimalcss.minimize(options)
.then(result => {
console.log( result.finalCss )
})
.catch(error => {
console.log(`Oups: ${error}`)
process.exit(1)
})
Activity
peterbe commentedon Sep 24, 2020
I'm confused. Those are two separate errors (one
ReferenceError(which I can easily see in the web console on https://hostchefs.eu/) andTypeError). And why does it not sayOups:in your output?peterbe commentedon Sep 24, 2020
So, the first error,
ReferenceErroris actually just the ignored JS error being logged to stdout. The other,TypeError, is actually an error happening deep insidecsso. You can see the whole stacktrace if you use console.error like this:The full error is:
For the record,
cssois used insideminimalcssthru the use ofcss-treewhich is a CSS parser that parses the found external CSS files. Lastly, I think after the AST tree has been manipulated byminimalcss, it gets serialized withcsso.What's curious is A) why isn't
minimalcssmentioned in the stacktrace?! B) What is the bug incsso??ggiak commentedon Sep 24, 2020
Hey @peterbe, I share the same concerns.
I also tried this against puppeteer 5.3 so I can use chromium 8x instead of 7x
but the same error applies.
Thought I should open an issue in case you have seen something similar before.
I will also ask for a css validation on the following:
https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fhostchefs.eu%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en
so that we have additional information what creates the issue.
peterbe commentedon Sep 24, 2020
For the record, I dug into it a bit and concluded that:
csso@4.0.3and/orcss-tree@1.0.0-alpha.39does not solve the problem.minimalcss's perspective happens in the linecsso.syntax.compress(allCombinedAst, cssoOptions);ggiak commentedon Sep 24, 2020
Forgot to mention I have already tried this as well.
peterbe commentedon Sep 24, 2020
I dumped all the CSS it downloads to a temp directory:
In
response.cssyou have this:And I put some
console.login node_modules/csso/lib/restructure/4-restructShorthand.js:81 and print thedeclarationwhendeclaration.value.children === undefinedand it prints:So when theres a mention of
55px width:50%it croaks. And that's mentioned in your CSS validator too.Now, I wish we can turn this into a bug on
cssoandcss-treebecause it shouldn't crash if you have invalid CSS. At least not this late.peterbe commentedon Sep 24, 2020
By the way, there's something really wrong about that
response.cssby the way. I get an error trying to runprettier --write response.csswhich means it can't parse it either.This happens. We (CSS files) all make mistakes. I just wish the error wasn't so cryptic. I'd love it if
minimalcsscould throw a helpful error like:Do you think you can take a look at that?
I suspect what happens is that
minimalcsscorrectly manages to parse it but, when you try to usecsso.syntax.compress(ast)it fails.In fact, this diff kinda solves your problem:
Obivously, that's not good enough for a fix. But might be a start. At least, equipped with something like this you'd get an insight where to put your attention (
responsive.cssin your case).Also, remember that you can potentially move this code down into the bottom of the file where you have an Object (
stylesheetAsts) that maps each URL to an AST.Perhaps something like
--debug-css-urlscould kick in some extra code that scrutinizes each AST like this. Do you think you can take a look at that? If you get stuck, I can help write a unit test.