@supports rules causes Error: Could not parse CSS stylesheet

Basic info:

Node.js version: 8.5.0
jsdom version: 11.3.0

Minimal reproduction case

const { JSDOM } = require("jsdom");

new JSDOM(`<style>
  @supports (text-decoration-style: solid) {
    ul.toc a:hover, ul.toc a:focus  {
    }
  }
</style>`)

This results in this console output:

Error: Could not parse CSS stylesheet
    at exports.evaluateStylesheet (/redacted/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:18:21)
    at HTMLStyleElementImpl._attach (/redacted/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:23:5)
    at HTMLHeadElementImpl._attach (/redacted/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:281:15)
    at HTMLHeadElementImpl._attach (/redacted/node_modules/jsdom/lib/jsdom/living/nodes/Element-impl.js:90:11)
    at HTMLHtmlElementImpl._attach (/redacted/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:281:15)
    at HTMLHtmlElementImpl._attach (/redacted/node_modules/jsdom/lib/jsdom/living/nodes/Element-impl.js:90:11)
    at DocumentImpl.insertBefore (/redacted/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:221:22)
    at DocumentImpl.appendChild (/redacted/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:319:17)
    at DocumentImpl.appendChild (/redacted/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:394:18)
    at setChild (/redacted/node_modules/jsdom/lib/jsdom/browser/htmltodom.js:230:18) 
  @supports (text-decoration-style: solid) {
    ul.toc a:hover, ul.toc a:focus  {
    }
  }

How does similar code behave in browsers?

No console error or warning in Chrome: https://wicg.github.io/hsts-priming/

Source: https://github.com/WICG/hsts-priming/blob/bb84ed97793799ccc50eb36eba1d1e95722f9eb2/index.html#L856

Issue Analytics

State:
Created 6 years ago
Reactions:12
Comments:11 (2 by maintainers)

Top GitHub Comments

7reactions

adyzcommented, Aug 6, 2018

@devrelm – just running npm install --save-dev cssom worked for me!

Thanks a ton!

6reactions

devrelmcommented, Jul 2, 2018

This was fixed with NV/CSSOM#94 & NV/CSSOM#96, and available in CSSOM v0.3.3. It looks like jsdom is just looking for >= 0.3.2 < 0.4.0, so it should be available to end users by updating that sub-dependency.

Upgrading the sub-dependency might be easier said than done for some users since there’s no easy way to do it in yarn (or possibly in npm either.)

I did it with a little manual editing, like so:

yarn add cssom

find the cssom dependencies in my yarn.lock. It should look something like this:

"cssom@>= 0.3.2 < 0.4.0"
  version "0.3.2"
  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"

cssom@^0.3.3"
  version "0.3.3"
  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.3.tgz#7b344769915759c2c9e3eb8c26f7fd533dbea252"

replace the version "0.3.2" and following line with its version "0.3.3" counterparts. You should be left with a diff like so:

 "cssom@>= 0.3.2 < 0.4.0"
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.3.tgz#7b344769915759c2c9e3eb8c26f7fd533dbea252"

revert your package.json to remove the direct dependency on cssom (if you don’t need it)
run yarn to double-check that everything still works and to remove cssom@0.3.2.