test(presubmit): build a staging version of site to speed up HTML and CSS transforms (GoogleChrome#6257)

MichaelSolati · web-flow · commit 43508890ab77 · 2021-09-22T12:32:09.000-07:00
* test(presubmit): build a staging version of site to speed up HTML and CSS transforms

* fix(staging): build rss feeds in staging

* docs(presubmit): correct name of step
diff --git a/.github/workflows/presubmit-workflow.yml b/.github/workflows/presubmit-workflow.yml
@@ -23,10 +23,10 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           is_presubmit: ${{ contains(github.event.pull_request.labels.*.name, '$-presubmit') }}
 
-      - name: Run a production build of site
+      - name: Run a staging build of site
         run: npm run build
         env:
-          ELEVENTY_ENV: prod
+          ELEVENTY_ENV: staging
 
       # Checks to see if any files in the PR match one of the listed file types.
       # We can use this filter to decide whether or not to run linters or tests.
diff --git a/src/site/_collections/hooks/utils.js b/src/site/_collections/hooks/utils.js
@@ -29,7 +29,7 @@ const filterByLang = require('../../_filters/filter-by-lang');
 const feed = (items) => {
   const filteredFeed = [];
 
-  if (process.env.ELEVENTY_ENV !== 'prod') {
+  if (!['prod', 'staging'].includes(process.env.ELEVENTY_ENV)) {
     return filteredFeed;
   }
 
diff --git a/src/site/_transforms/minify-html.js b/src/site/_transforms/minify-html.js
@@ -15,9 +15,21 @@
  */
 
 const minify = require('html-minifier').minify;
+const path = require('path');
+const {URL} = require('url');
+const stagingUrls =
+  require('../../../tools/lhci/lighthouserc').ci.collect.url.map((url) =>
+    path.join('dist', new URL(url).pathname, 'index.html'),
+  );
+
+const isProd = process.env.ELEVENTY_ENV === 'prod';
+const isStaging = process.env.ELEVENTY_ENV === 'staging';
 
 const minifyHtml = (content, outputPath) => {
-  if (outputPath && outputPath.endsWith('.html')) {
+  if (
+    (isProd && outputPath && outputPath.endsWith('.html')) ||
+    (isStaging && stagingUrls.includes(outputPath))
+  ) {
     try {
       content = minify(content, {
         removeAttributeQuotes: true,
diff --git a/src/site/_transforms/purify-css.js b/src/site/_transforms/purify-css.js
@@ -18,17 +18,27 @@ const fs = require('fs');
 /* eslint-disable node/no-unpublished-require */
 const PurgeCSS = require('purgecss').PurgeCSS;
 const csso = require('csso');
+const path = require('path');
+const {URL} = require('url');
+const stagingUrls =
+  require('../../../tools/lhci/lighthouserc').ci.collect.url.map((url) =>
+    path.join('dist', new URL(url).pathname, 'index.html'),
+  );
 const pathToCss = 'dist/css/main.css';
+const isProd = process.env.ELEVENTY_ENV === 'prod';
+const isStaging = process.env.ELEVENTY_ENV === 'staging';
 
 /**
  * Inlines all of the page's CSS into the <head>
  */
 
 const purifyCss = async (content, outputPath) => {
   if (
-    outputPath &&
-    outputPath.endsWith('.html') &&
-    !/data-style-override/.test(content)
+    (isProd &&
+      outputPath &&
+      outputPath.endsWith('.html') &&
+      !/data-style-override/.test(content)) ||
+    (isStaging && stagingUrls.includes(outputPath))
   ) {
     const before = fs.readFileSync(pathToCss, {
       encoding: 'utf-8',

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ const filterByLang = require('../../_filters/filter-by-lang');`
`29`	`29`	`const feed = (items) => {`
`30`	`30`	`const filteredFeed = [];`
`31`	`31`
`32`		`- if (process.env.ELEVENTY_ENV !== 'prod') {`
	`32`	`+ if (!['prod', 'staging'].includes(process.env.ELEVENTY_ENV)) {`
`33`	`33`	`return filteredFeed;`
`34`	`34`	`}`
`35`	`35`