Fix: hero image not visible on load (#872)

This fixes v0.css hiding ssr'd hero images on load by patching the runtime styles. See ampproject/amphtml#29479
ampproject · Jul 24, 2020 · d128925 · d128925
1 parent 1fbe951
commit d128925
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 7 deletions.
diff --git a/packages/optimizer/lib/fetchRuntimeParameters.js b/packages/optimizer/lib/fetchRuntimeParameters.js
@@ -234,6 +234,11 @@ async function downloadAmpRuntimeStyles_(config, runtimeCssUrl) {
       return null;
     }
     styles = await response.text();
+    // HACK: patch v0.css to support transforming amp-img -> img
+    // TODO remove once v0.css has been updated
+    if (!styles.includes('i-amphtml-ssr')) {
+      styles += `amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}`;
+    }
     config.log.debug(`Downloaded AMP runtime styles from ${runtimeCssUrl}`);
     if (config.cache !== false) {
       cache.set(runtimeCssUrl, styles);

diff --git a/packages/optimizer/spec/end-to-end/body-only/expected_output.default.html b/packages/optimizer/spec/end-to-end/body-only/expected_output.default.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
-  <meta data-auto charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */</style>
+  <meta data-auto charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style>
   <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link rel="preload" href="https://cdn.ampproject.org/v0.js" as="script">
   <script data-auto async src="https://cdn.ampproject.org/v0.js"></script>

diff --git a/packages/optimizer/spec/end-to-end/body-only/expected_output.lts.html b/packages/optimizer/spec/end-to-end/body-only/expected_output.lts.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
-  <meta data-auto charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */</style>
+  <meta data-auto charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style>
   <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link rel="preload" href="https://cdn.ampproject.org/lts/v0.js" as="script">
   <script data-auto async src="https://cdn.ampproject.org/lts/v0.js"></script>

diff --git a/packages/optimizer/spec/end-to-end/hello-world/expected_output.default.html b/packages/optimizer/spec/end-to-end/hello-world/expected_output.default.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
-  <meta charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */</style>
+  <meta charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style>
   <meta name="viewport" content="width=device-width,minimum-scale=1">
   <link rel="preload" href="https://cdn.ampproject.org/v0.js" as="script">
   <script async src="https://cdn.ampproject.org/v0.js"></script>

diff --git a/packages/optimizer/spec/end-to-end/hello-world/expected_output.lts.html b/packages/optimizer/spec/end-to-end/hello-world/expected_output.lts.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
-  <meta charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */</style>
+  <meta charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style>
   <meta name="viewport" content="width=device-width,minimum-scale=1">
   <link rel="preload" href="https://cdn.ampproject.org/lts/v0.js" as="script">
   <script async src="https://cdn.ampproject.org/lts/v0.js"></script>

diff --git a/packages/optimizer/spec/end-to-end/hello-world/expected_output.paired.html b/packages/optimizer/spec/end-to-end/hello-world/expected_output.paired.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
-  <meta charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* example.com v0.css */</style>
+  <meta charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* example.com v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style>
   <meta name="viewport" content="width=device-width,minimum-scale=1">
   <link rel="preload" href="https://example.com/amp/rtv/123456789000000/v0.js" as="script">
   <meta name="runtime-host" content="https://example.com">

diff --git a/packages/optimizer/spec/end-to-end/markdown/expected_output.default.html b/packages/optimizer/spec/end-to-end/markdown/expected_output.default.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
-  <meta data-auto charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */</style>
+  <meta data-auto charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style>
   <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link rel="preload" href="https://cdn.ampproject.org/v0.js" as="script">
   <script data-auto async src="https://cdn.ampproject.org/v0.js"></script>

diff --git a/packages/optimizer/spec/end-to-end/markdown/expected_output.lts.html b/packages/optimizer/spec/end-to-end/markdown/expected_output.lts.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
-  <meta data-auto charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */</style>
+  <meta data-auto charset="utf-8"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style>
   <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link rel="preload" href="https://cdn.ampproject.org/lts/v0.js" as="script">
   <script data-auto async src="https://cdn.ampproject.org/lts/v0.js"></script>