Jsdom: As regras @supports causam erro: não foi possível analisar a folha de estilo CSS

Criado em 24 out. 2017  ·  9Comentários  ·  Fonte: jsdom/jsdom

Informação básica:

  • Versão do Node.js: 8.5.0
  • versão do jsdom: 11.3.0

Estojo de reprodução mínima

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

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

Isso resulta nesta saída do console:

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) 
  <strong i="16">@supports</strong> (text-decoration-style: solid) {
    ul.toc a:hover, ul.toc a:focus  {
    }
  }

Como um código semelhante se comporta em navegadores?

Nenhum erro de console ou aviso no Chrome:
https://wicg.github.io/hsts-priming/

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

css
Fonte
picture foolip
👍10

Comentários muito úteis

@devrelm -- apenas executar npm install --save-dev cssom funcionou para mim!

Muito obrigado!

picture adyz em 6 ago. 2018
👍6 🎉1

Todos 9 comentários

jsdom está atualmente usando o pacote CSSOM para analisar CSS. Ele não inclui suporte para @supports -rules e, infelizmente, não parece mais estar em desenvolvimento ativo.

Comecei a trabalhar em uma substituição atualizada e compatível com os padrões destinada ao uso em jsdom - css-object-model - mas ainda resta muito trabalho antes de estar pronto para substituir as dependências atuais do CSSOM/CSSStyleDeclaration.

Zirro picture Zirro em 24 out. 2017
🎉2

Enquanto isso, você pode suprimir esses logs usando o console virtual para ouvir eventos "jsdomError" e optar por não registrá-los. Existe até uma opção omitJSDOMErrors para fazer isso para você, embora isso suprimirá todos os logs de erros (por exemplo, exceção de tempo de execução não capturada), não apenas os CSS.

domenic picture domenic em 24 out. 2017
👍2

Obrigado @domenic! Por enquanto, resolvi o problema com uma lista de bloqueio de repositórios para ignorar (a maioria deles), mas usarei omitJSDOMErrors se isso acontecer em algo que não quero ignorar.

foolip picture foolip em 25 out. 2017

Ei, algum progresso com isso?
Estou tentando usar CSS.supports() com Jest e aparentemente ainda não está implementado.

PeterShershov picture PeterShershov em 17 mar. 2018

Vale a pena, há um PR aberto no CSSOM aqui: NV/CSSOM#94

No momento, está aguardando os testes serem escritos, o que espero fazer hoje à noite.

devrelm picture devrelm em 27 jun. 2018
👍1

Isso foi corrigido com NV/CSSOM#94 e NV/CSSOM#96 e está disponível no CSSOM v0.3.3. Parece que jsdom está apenas procurando por >= 0.3.2 < 0.4.0 , então deve estar disponível para usuários finais atualizando essa subdependência.

Atualizar a subdependência pode ser mais fácil dizer do que fazer para alguns usuários, pois não há uma maneira fácil de fazê-lo em yarn (ou possivelmente em npm ).

Eu fiz isso com um pouco de edição manual, assim:

cssom@^0.3.3"
versão "0.3.3"
resolvido " https://registry.yarnpkg.com/cssom/-/cssom-0.3.3.tgz#7b344769915759c2c9e3eb8c26f7fd533dbea252 "
```

  • substitua o version "0.3.2" e a linha seguinte por suas contrapartes version "0.3.3" . Você deve ficar com um diff assim:
    diff "cssom@>= 0.3.2 < 0.4.0" <ul> <li>version "0.3.2"</li> <li>resolved "<a href="https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b">https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b</a>"</li> <li>version "0.3.3"</li> <li>resolved "<a href="https://registry.yarnpkg.com/cssom/-/cssom-0.3.3.tgz#7b344769915759c2c9e3eb8c26f7fd533dbea252">https://registry.yarnpkg.com/cssom/-/cssom-0.3.3.tgz#7b344769915759c2c9e3eb8c26f7fd533dbea252</a>"<br />

  • reverta seu package.json para remover a dependência direta de cssom (se você não precisar)
  • execute yarn para verificar se tudo ainda funciona e para remover [email protected] .
    • devrelm picture devrelm em 2 jul. 2018
    👍6

    @devrelm -- apenas executar npm install --save-dev cssom funcionou para mim!

    Muito obrigado!

    adyz picture adyz em 6 ago. 2018
    👍6 🎉1

    Excelente! Obrigado!

    PeterShershov picture PeterShershov em 6 ago. 2018

    Se você estiver usando yarn , poderá substituir a versão resolvida em seu package.json :

      "resolutions": {
    "cssom": "0.3.3"
  }

    Dica de chapéu: @nsimonson que apontou a diretiva de resoluções para mim.

    mikelovesrobots picture mikelovesrobots em 30 jul. 2019
    Esta página foi útil?
    0 / 5 - 0 avaliações

    Questões relacionadas

    josephrexme picture josephrexme  ·  4Comentários
    domenic picture domenic  ·  3Comentários
    jacekpl picture jacekpl  ·  4Comentários
    machineghost picture machineghost  ·  4Comentários
    eszthoff picture eszthoff  ·  3Comentários