Remove the old :where(img) css close and don't embed svgs when img ta…

…g has width or height
divriots · Oct 11, 2024 · 8f10d7e · 8f10d7e
1 parent 5aadb4c
commit 8f10d7e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/src/config-default.ts b/src/config-default.ts
@@ -5,7 +5,7 @@ const default_options: Options = {
     browserslist: 'defaults', // defaults = '> 0.5%, last 2 versions, Firefox ESR, not dead'
   },
   html: {
-    add_css_reset_as: 'inline',
+    add_css_reset_as: 'off',
     sort_attributes: false,
   },
   css: {

diff --git a/src/config-types.ts b/src/config-types.ts
@@ -11,13 +11,7 @@ export type Options = {
     browserslist: string; // browserslist query string
   };
   html: {
-    /*
-      jampack adds a little bit of css to make
-      image keep correct aspect ratio after adding
-      image dimensions.
-      ":where(img){height:auto}"
-    */
-    add_css_reset_as: 'inline' | 'off';
+    add_css_reset_as: 'inline' | 'off'; // 'inline': adds "<style>:where(img){height:auto}</style>" on top of the <head>
     sort_attributes: boolean;
   };
   js: {

diff --git a/src/optimize.ts b/src/optimize.ts
@@ -548,6 +548,10 @@ async function processImage(
       const ifmt = imageToEmbed.format;
       switch (ifmt) {
         case 'svg':
+          // When embedded, if the SVG file has width and height attributes (or viewBox without corresponding width/height),
+          // the browser respects those attributes over the external <img> tag attributes.
+          // TODO update the SVG - meanwhile don't embed it if there are attributes
+          if (img.attr('width') || img.attr('height')) break;
           datauri = svgToMiniDataURI(imageToEmbed.data.toString());
           break;
         case 'webp':