divriots/jampack

<link media> queries are stripped

bennypowers opened this issue · 6 comments

before jampack:

<link rel="stylesheet" media="(prefers-color-scheme: light)" href="/assets/theme-light.css">

<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="/assets/theme-dark.css">

after jampack

<link rel="stylesheet" media="" href="/assets/theme-light.css">

<link rel="stylesheet" media="" href="/assets/theme-dark.css">

Wait what!? This is annoying. I will check this out shortly.

This is now fixed in version 0.11.+
I had to upgrade cheerio

I still have this problem with 0.11.2

❯ npx npm-why cheerio                                                                                                                                             (base) 

  Who required cheerio:

  bennypowers.dev > cheerio@1.0.0-rc.12
  bennypowers.dev > eleventy-plugin-nesting-toc > cheerio@1.0.0-rc.12
  bennypowers.dev > eleventy-plugin-slide-decks > cheerio@1.0.0-rc.12



bennypowers.dev on  main [$!] via  v18.16.0 took 3s 
❯ npx npm-why @divriots/cheerio                                                                                                                                   (base) 

  Who required @divriots/cheerio:

  bennypowers.dev > @divriots/jampack > @divriots/cheerio@1.0.0-rc.12


❯ cat _site/posts/import-map-cdn/index.html | grep media=                                                                                                         (base) 
    <link href="/assets/theme-light.css" rel="stylesheet" media="">
    <link href="/assets/theme-dark.css" rel="stylesheet" media="">

Sorry I probably tested badly.
This is after minification of HTML.
This is coming from html-minify-terser apparently.

Looking at it. Thanks

I was compressing the media queries with CSS 🤦‍♂️
Fixed (for real) in 0.11.3

Thanks again @bennypowers !

fix confirmed!

bennypowers.dev on  main [$!] via  v18.16.0 took 1m33s 
❯ cat _site/posts/import-map-cdn/index.html | grep media=                                                                                                         (base) 
    <link href="/assets/theme-light.css" rel="stylesheet" media="(prefers-color-scheme: light)">
    <link href="/assets/theme-dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">

Nice! merci, georges