Refactor css entry points

ampproject · Jul 19, 2018 · b6f6a48 · b6f6a48
1 parent 3594afb
commit b6f6a48
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 55 deletions.
diff --git a/examples/amp-video.amp.html b/examples/amp-video.amp.html
@@ -5,6 +5,7 @@
   <title>AMP #0</title>
   <link rel="canonical" href="amps.html" >
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
   <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
   <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
   <style amp-custom>
@@ -28,33 +29,39 @@
     p, h1, h2, h3 {
       padding: 10px;
     }
+    amp-lightbox {
+      background: rgba(0, 0, 0, 0.6);
+    }
   </style>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>
-  <h1>amp-video</h1>
+  <h1 on="tap:lb">amp-video</h1>
 
-  <amp-video
-      id="myVideo"
-      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
-      width="720"
-      height="405"
-      layout="responsive"
-      controls>
-    <div placeholder>
-      This is a placeholder
-    </div>
-    <div fallback>
-      This is a fallback
-    </div>
-  </amp-video>
-  <h3>Actions</h3>
-  <button on="tap:myVideo.play">Play</button>
-  <button on="tap:myVideo.pause">Pause</button>
-  <button on="tap:myVideo.mute">Mute</button>
-  <button on="tap:myVideo.unmute">Unmute</button>
-  <button on="tap:myVideo.fullscreen">Fullscreen</button>
+  <amp-lightbox id="lb" layout="nodisplay">
+    <amp-video
+        id="myVideo"
+        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
+        width="720"
+        height="405"
+        layout="responsive"
+        controls>
+      <div placeholder>
+        This is a placeholder
+      </div>
+      <div fallback>
+        This is a fallback
+      </div>
+    </amp-video>
+    <h3>Actions</h3>
+    <button on="tap:myVideo.play">Play</button>
+    <button on="tap:myVideo.pause">Pause</button>
+    <button on="tap:myVideo.mute">Mute</button>
+    <button on="tap:myVideo.unmute">Unmute</button>
+    <button on="tap:myVideo.fullscreen">Fullscreen</button>
+    <button on="tap:lb.close">Close</button>
+  </amp-lightbox>
 
   <h2>MediaSession API</h2>
   <p>

diff --git a/gulpfile.js b/gulpfile.js
@@ -398,6 +398,29 @@ function css() {
   return compileCss();
 }
 
+const cssEntryPoints = [
+  {
+    path: 'amp.css',
+    outJs: 'css.js',
+    outCss: 'v0.css',
+  },
+  {
+    path: 'lightbox-ad.css',
+    outJs: 'lightbox-ad.css.js',
+    outCss: 'lightbox-ad.css',
+  },
+  {
+    path: 'video-docking.css',
+    outJs: 'video-docking.css.js',
+    outCss: 'video-docking.css',
+  },
+  {
+    path: 'video-autoplay.css',
+    outJs: 'video-autoplay.css.js',
+    outCss: 'video-autoplay.css',
+  },
+];
+
 /**
  * Compile all the css and drop in the build folder
  * @param {boolean} watch
@@ -432,40 +455,37 @@ function compileCss(watch, opt_compileAll) {
         }));
   }
 
+  /**
+   * @param {string} path
+   * @param {string} outJs
+   * @param {string} outCss
+   */
+  function writeCssEntryPoint(path, outJs, outCss) {
+    const startTime = Date.now();
+
+    return jsifyCssAsync(`css/${path}`)
+        .then(css => writeCss(css, path, outJs, outCss))
+        .then(() => {
+          endBuildStep('Recompiled CSS in', path, startTime);
+        });
+  }
+
   // Used by `gulp test --local-changes` to map CSS files to JS files.
   fs.writeFileSync('EXTENSIONS_CSS_MAP', JSON.stringify(extensions));
 
-  const startTime = Date.now();
-  return jsifyCssAsync('css/amp.css')
-      .then(css => writeCss(css, 'amp.css', 'css.js', 'v0.css'))
-      .then(() => {
-        endBuildStep('Recompiled CSS in', 'amp.css', startTime);
-      })
-      .then(() => jsifyCssAsync('css/lightbox-ad.css'))
-      .then(css => writeCss(css,
-          'lightbox-ad.css', 'lightbox-ad.css.js', 'lightbox-ad.css'))
-      .then(() => {
-        endBuildStep('Recompiled CSS in', 'lightbox-ad.css', startTime);
-      })
-      .then(() => jsifyCssAsync('css/video-docking.css'))
-      .then(css => writeCss(css,
-          'video-docking.css', 'video-docking.css.js', 'video-docking.css'))
-      .then(() => {
-        endBuildStep('Recompiled CSS in', 'video-docking.css', startTime);
-      })
-      .then(() => jsifyCssAsync('css/video-autoplay.css'))
-      .then(css => writeCss(css,
-          'video-autoplay.css', 'video-autoplay.css.js', 'video-autoplay.css'))
-      .then(() => {
-        endBuildStep('Recompiled CSS in', 'video-autoplay.css', startTime);
-      })
-      .then(() => {
-        return buildExtensions({
-          bundleOnlyIfListedInFiles: false,
-          compileOnlyCss: true,
-          compileAll: opt_compileAll,
-        });
-      });
+
+  let promise = Promise.resolve();
+
+  cssEntryPoints.forEach(entryPoint => {
+    const {path, outJs, outCss} = entryPoint;
+    promise = promise.then(() => writeCssEntryPoint(path, outJs, outCss));
+  });
+
+  return promise.then(() => buildExtensions({
+    bundleOnlyIfListedInFiles: false,
+    compileOnlyCss: true,
+    compileAll: opt_compileAll,
+  }));
 }
 
 /**
@@ -474,12 +494,15 @@ function compileCss(watch, opt_compileAll) {
  */
 function copyCss() {
   const startTime = Date.now();
-  fs.copySync('build/css/v0.css', 'dist/v0.css');
-  fs.copySync('build/css/video-docking.css', 'dist/video-docking.css');
+
+  cssEntryPoints.forEach(({outCss}) => {
+    fs.copySync(`build/css/${outCss}`, `dist/${outCss}`);
+  });
+
   return toPromise(gulp.src('build/css/amp-*.css')
       .pipe(gulp.dest('dist/v0')))
       .then(() => {
-        endBuildStep('Copied', 'build/css/v0.css to dist/v0.css', startTime);
+        endBuildStep('Copied', 'build/css/*.css to dist/*.css', startTime);
       });
 }