search

divriots / jampack

Optimizes static websites for best user experience and best Core Web Vitals scores.
https://jampack.divriots.com/
MIT License
1.62k stars 24 forks source link

<link media> queries are stripped #61

Closed bennypowers closed 1 year ago

bennypowers commented 1 year ago

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">
georges-gomes commented 1 year ago

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

georges-gomes commented 1 year ago

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

bennypowers commented 1 year ago

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="">
georges-gomes commented 1 year ago

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

Looking at it. Thanks

georges-gomes commented 1 year ago

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

Thanks again @bennypowers !

bennypowers commented 1 year ago

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