ignoreJSErrors true, yet puppeteer throws in some cases.

##Expected Behavior When ignoreJSErrors is true to get a minimal css result.

Current Behavior

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)
  })

[peterbe]

By the way, there’s something really wrong about that response.css by the way. I get an error trying to run prettier --write response.css which 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 minimalcss could throw a helpful error like:

throw new Error(`Unable to continue because ${url} could not correctly be parsed to an AST`);

Do you think you can take a look at that? I suspect what happens is that minimalcss correctly manages to parse it but, when you try to use csso.syntax.compress(ast) it fails.

In fact, this diff kinda solves your problem:

diff --git a/src/run.js b/src/run.js
index 69ae7b0..1637585 100644
--- a/src/run.js
+++ b/src/run.js
@@ -115,6 +115,13 @@ const processStylesheet = ({
   stylesheetContents,
 }) => {
   const ast = csstree.parse(text);
+  try {
+    csso.syntax.compress(ast);
+    console.log(`${responseUrl} WORKED!\n`);
+  } catch (ex) {
+    console.log(`${responseUrl} FAILED HORRIBLY!\n`, ex);
+  }
+
   csstree.walk(ast, (node) => {
     if (node.type !== 'Url') return;
     const value = node.value;

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.css in 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-urls could 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.

[peterbe]

I dumped all the CSS it downloads to a temp directory:

▶ ls -l *.css
-rw-r--r--  1 peterbe  wheel  209164 Sep 24 09:42 all.min.css
-rw-r--r--  1 peterbe  wheel    3938 Sep 24 09:42 cookieconsent.min.css
-rw-r--r--  1 peterbe  wheel   52479 Sep 24 09:42 custom.css
-rw-r--r--  1 peterbe  wheel    4272 Sep 24 09:42 default_theme.css
-rw-r--r--  1 peterbe  wheel  170570 Sep 24 09:42 fontawesome-all.min.css
-rw-r--r--  1 peterbe  wheel   16848 Sep 24 09:42 hc.css
-rw-r--r--  1 peterbe  wheel    3634 Sep 24 09:42 owl.carousel.css
-rw-r--r--  1 peterbe  wheel    1152 Sep 24 09:42 owl.theme.css
-rw-r--r--  1 peterbe  wheel    6626 Sep 24 09:42 responsive.css
-rw-r--r--  1 peterbe  wheel     914 Sep 24 09:42 skin_classic_white.css

In response.css you have this:

.products-res{float:left;margin-right:55px width:50%}

And I put some console.log in node_modules/csso/lib/restructure/4-restructShorthand.js:81 and print the declaration when declaration.value.children === undefined and it prints:

DECLARATION {
  type: 'Declaration',
  loc: null,
  important: false,
  property: 'margin-right',
  value: { type: 'Raw', loc: null, value: '55px width:50%' },
  id: 514,
  length: 27,
  fingerprint: null
}

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 csso and css-tree because it shouldn’t crash if you have invalid CSS. At least not this late.