🏗✨ Add lazy-build support for nested CSS imports (#36742)

build-system/tasks/css/jsify-css.js

@@ -1,7 +1,8 @@
 'use strict';
 
+const cssImports = require('css-imports');
 const cssnano = require('cssnano');
-const fs = require('fs');
+const fs = require('fs-extra');
 const path = require('path');
 const postcss = require('postcss');
 const postcssImport = require('postcss-import');
@@ -99,13 +100,37 @@ async function transformCssString(contents, opt_filename) {
  */
 async function jsifyCssAsync(filename) {
   const {contents, hash: filehash} = await batchedRead(filename);
-  const hash = md5(filehash, await getEnvironmentHash());
+  const imports = await getCssImports(filename);
+  const importHashes = await Promise.all(
+    imports.map(async (importedFile) => (await batchedRead(importedFile)).hash)
+  );
+  const hash = md5(filehash, ...importHashes, await getEnvironmentHash());
   const result = await transformCss(contents, hash, filename);
 
   result.warnings.forEach((warn) => log(red(warn)));
   return result.css + '\n/*# sourceURL=/' + filename + '*/';
 }
 
+/**
+ * Computes the transitive closure of CSS files imported by the given file.
+ * @param {string} cssFile
+ * @return {Promise<!Array<string>>}
+ */
+async function getCssImports(cssFile) {
+  const contents = await fs.readFile(cssFile);
+  const topLevelImports = cssImports(contents)
+    .map((result) => result.path)
+    .filter((importedFile) => !importedFile.startsWith('http'))
+    .map((importedFile) => path.join(path.dirname(cssFile), importedFile));
+  if (topLevelImports.length == 0) {
+    return topLevelImports;
+  }
+  const nestedImports = await Promise.all(
+    topLevelImports.map(async (file) => await getCssImports(file))
+  );
+  return topLevelImports.concat(nestedImports).flat();
+}
+
 /**
  * @param {string} contents
  * @param {string} hash

package.json

@@ -88,6 +88,7 @@
     "codecov": "3.8.3",
     "commander": "7.2.0",
     "connect-header": "0.0.5",
+    "css-imports": "0.3.1",
     "css-selector-tokenizer": "0.8.0",
     "css-what": "5.1.0",
     "cssnano": "5.0.8",