🖍 [amp-story-player] Extract iframe css to different file (#26613)

* split iframe css into different file

* update owners pattern to include amp-story-*

* add comments

build-system/tasks/css.js

@@ -55,10 +55,17 @@ const cssEntryPoints = [
     outCss: 'video-autoplay-out.css',
   },
   {
+    // Publisher imported CSS for `src/amp-story-player.js`.
     path: 'amp-story-player.css',
     outJs: 'amp-story-player.css.js',
     outCss: 'amp-story-player-v0.css',
   },
+  {
+    // Internal CSS used for the iframes inside `src/amp-story-player.js`.
+    path: 'amp-story-player-iframe.css',
+    outJs: 'amp-story-player-iframe.css.js',
+    outCss: 'amp-story-player-iframe-v0.css',
+  },
 ];
 
 /**

css/OWNERS

@@ -10,5 +10,9 @@
         {name: 'camelburrito', requestReviews: false},
       ],
     },
+    {
+      pattern: '{amp-story-*}.css',
+      owners: [{name: 'newmuis'}, {name: 'gmajoulet'}, {name: 'enriqe'}],
+    },
   ],
 }

css/amp-story-player-iframe.css

@@ -0,0 +1,43 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  all: initial;
+  display: block;
+  border-radius: 0 !important;
+  width: 360px;
+  height: 600px;
+  overflow: auto;
+}
+
+.story-player-iframe {
+  height: 100%;
+  width: 100%;
+  flex: 0 0 100%;
+  border: 0;
+  opacity: 0;
+  transition: opacity 500ms ease;
+}
+
+main {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+.i-amphtml-story-player-loaded iframe {
+  opacity: 1;
+}

css/amp-story-player.css

@@ -29,6 +29,10 @@ amp-story-player a:first-of-type {
   display: block;
 }
 
+amp-story-player a:not(:first-of-type) {
+  visibility: hidden;
+}
+
 amp-story-player::after {
   content: " ";
   position: absolute;

src/amp-story-player.js

@@ -23,6 +23,8 @@ import {
   removeFragment,
 } from './url';
 import {dict} from './utils/object';
+// Source for this constant is css/amp-story-player-iframe.css
+import {cssText} from '../build/amp-story-player-iframe.css';
 import {findIndex} from './utils/array';
 import {setStyle} from './style';
 import {toArray} from './types';
@@ -34,13 +36,6 @@ const LoadStateClass = {
   ERROR: 'i-amphtml-story-player-error',
 };
 
-/** @const {string} */
-const CSS = `
-  :host { all: initial; display: block; border-radius: 0 !important; width: 360px; height: 600px; overflow: auto; }
-  .story-player-iframe { height: 100%; width: 100%; flex: 0 0 100%; border: 0; opacity: 0; transition: opacity 500ms ease; }
-  main { display: flex; flex-direction: row; height: 100%; }
-  .i-amphtml-story-player-loaded iframe { opacity: 1; }`;
-
 /**
  * Note that this is a vanilla JavaScript class and should not depend on AMP
  * services, as v0.js is not expected to be loaded in this context.
@@ -112,7 +107,7 @@ export class AmpStoryPlayer {
 
     // Inject default styles
     const styleEl = this.doc_.createElement('style');
-    styleEl.textContent = CSS;
+    styleEl.textContent = cssText;
     shadowRoot.appendChild(styleEl);
     shadowRoot.appendChild(this.rootEl_);
   }