Merge pull request #1274 from erwinmombay/fix-ordering

erwinmombay · web-flow · commit 704b602db6d9 · 2022-01-11T08:46:17.000-08:00
insert the dvh polyfill before any of the amp-story css to avoid CLS
diff --git a/packages/optimizer/lib/transformers/ReorderHeadTransformer.js b/packages/optimizer/lib/transformers/ReorderHeadTransformer.js
@@ -64,11 +64,13 @@ class HeadNodes {
     appendChild(head, this._metaViewport);
     appendAll(head, this._resourceHintLinks);
     appendAll(head, this._metaOther);
+    // We want the dvh polyfill to be before the amp-story styles to prevent
+    // triggering an increase to CLS score.
+    appendChild(head, this._scriptAmpStoryDvhPollyfill);
     appendChild(head, this._linkStyleAmpRuntime);
     appendChild(head, this._styleAmpRuntime);
     appendChild(head, this._linkStyleAmpStory);
     appendAll(head, this._scriptAmpEngine);
-    appendChild(head, this._scriptAmpStoryDvhPollyfill);
     appendAll(head, this._scriptRenderDelayingExtensions);
     appendAll(head, this._scriptNonRenderDelayingExtensions);
     appendChild(head, this._styleAmpCustom);
@@ -207,11 +209,11 @@ class HeadNodes {
  * ReorderHead reorders the children of <head>. Specifically, it
  * orders the <head> like so:
  * (0) <meta charset> tag
- * (1) <style amp-runtime> (inserted by ampruntimecss.go)
- * (2) <link amp-extension=amp-story> (amp-story stylesheet)
- * (3) remaining <meta> tags (those other than <meta charset>)
- * (4) AMP runtime .js <script> tag
- * (5) <script amp-story-dvh-polyfill> inline script tag
+ * (1) <script amp-story-dvh-polyfill> inline script tag
+ * (2) <style amp-runtime> (inserted by ampruntimecss.go)
+ * (3) <link amp-extension=amp-story> (amp-story stylesheet)
+ * (4) remaining <meta> tags (those other than <meta charset>)
+ * (5) AMP runtime .js <script> tag
  * (6) <script> tags that are render delaying
  * (7) <script> tags for remaining extensions
  * (8) <link> tag for favicons
diff --git a/packages/optimizer/spec/end-to-end/story-optimized/expected_output.amp-story-optimized-lts.html b/packages/optimizer/spec/end-to-end/story-optimized/expected_output.amp-story-optimized-lts.html
@@ -3,8 +3,8 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/lts/v0.mjs" rel="modulepreload"><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>
-  <link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/lts/v0/amp-story-1.0.css"><script async src="https://cdn.ampproject.org/lts/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0.js" crossorigin="anonymous"></script><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</script><script async custom-element="amp-story" src="https://cdn.ampproject.org/lts/v0/amp-story-1.0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-story-1.0.js" crossorigin="anonymous" custom-element="amp-story"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/lts/v0.mjs" rel="modulepreload"><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</script><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>
+  <link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/lts/v0/amp-story-1.0.css"><script async src="https://cdn.ampproject.org/lts/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0.js" crossorigin="anonymous"></script><script async custom-element="amp-story" src="https://cdn.ampproject.org/lts/v0/amp-story-1.0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-story-1.0.js" crossorigin="anonymous" custom-element="amp-story"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <title>My Story</title>
   <link rel="canonical" href="helloworld.html"><style amp-custom>body {
         font-family: 'Roboto', sans-serif;
diff --git a/packages/optimizer/spec/end-to-end/story-optimized/expected_output.amp-story-optimized.html b/packages/optimizer/spec/end-to-end/story-optimized/expected_output.amp-story-optimized.html
@@ -3,8 +3,8 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/v0.mjs" rel="modulepreload"><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>
-  <link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/v0/amp-story-1.0.css"><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</script><script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-story-1.0.js" crossorigin="anonymous" custom-element="amp-story"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/v0.mjs" rel="modulepreload"><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</script><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>
+  <link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/v0/amp-story-1.0.css"><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-story-1.0.js" crossorigin="anonymous" custom-element="amp-story"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <title>My Story</title>
   <link rel="canonical" href="helloworld.html"><style amp-custom>body {
         font-family: 'Roboto', sans-serif;
diff --git a/packages/optimizer/spec/transformers/valid/ReorderHeadTransformer/reorders_head_amphtml/expected_output.html b/packages/optimizer/spec/transformers/valid/ReorderHeadTransformer/reorders_head_amphtml/expected_output.html
@@ -2,9 +2,9 @@
 <html ⚡>
 <head>
   <meta charset="utf-8">
-  <meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport">
+  <meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport"><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()})</script>
   <link rel="stylesheet" href="https://cdn.ampproject.org/v0.css"><style amp-runtime></style>
-  <link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/v0/amp-story-1.0.css"><script async src="https://cdn.ampproject.org/v0.js"></script><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()})</script><script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script><script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/v0/amp-story-1.0.css"><script async src="https://cdn.ampproject.org/v0.js"></script><script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script><script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <link href="https://example.com/favicon.ico" rel="icon">
   <link href="https://fonts.googleapis.com/css?foobar" rel="stylesheet" type="text/css">
   <title>Title</title><style amp-custom></style>
