feat(tools): css import caching transformer (#2689)

Author: bennypowers

.changeset/long-eyes-mate.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": patch
+---
+`typescript/css-imports`: prevent shared css modules from being inlined to files; emit them instead.

tools/pfe-tools/typescript/transformers/css-imports.cjs

@@ -1,6 +1,7 @@
 // @ts-check
 const ts = require('typescript/lib/typescript');
 const fs = require('node:fs');
+const path = require('node:path');
 const { pathToFileURL } = require('node:url');
 
 const SEEN_SOURCES = new WeakSet();
@@ -84,22 +85,86 @@ function minifyCss(stylesheet, filePath) {
   }
 }
 
+/**
+ * @param{import('typescript').ImportDeclaration} node
+ */
+function getImportSpecifier(node) {
+  return node.moduleSpecifier.getText().replace(/^'(.*)'$/, '$1');
+}
+
+/**
+ * @param{import('typescript').Node} node
+ * @return {node is import('typescript').ImportDeclaration}
+ */
+function isCssImportNode(node) {
+  if (ts.isImportDeclaration(node) && !node.importClause?.isTypeOnly) {
+    const specifier = getImportSpecifier(node);
+    return specifier.endsWith('.css');
+  } else {
+    return false;
+  }
+}
+
+/** map from (abspath to import spec) to (set of abspaths to importers) */
+const cssImportSpecImporterMap = new Map();
+
+/** map from (abspath to import spec) to (abspaths to manually written transformed module) */
+const cssImportFakeEmitMap = new Map();
+
+// abspath to file
+/** @param{import('typescript').ImportDeclaration} node */
+function getImportAbsPathOrBareSpec(node) {
+  const specifier = getImportSpecifier(node);
+  if (!specifier.startsWith('.')) {
+    return specifier;
+  } else {
+    const { fileName } = node.getSourceFile();
+    const specifierRelative = path.resolve(path.dirname(fileName), specifier);
+    return specifierRelative;
+  }
+}
+
+/**
+ * @param {import('typescript').SourceFile} sourceFile
+ */
+function cacheCssImportSpecsAbsolute(sourceFile) {
+  sourceFile.forEachChild(node => {
+    if (isCssImportNode(node)) {
+      const specifierAbs = getImportAbsPathOrBareSpec(node);
+      cssImportSpecImporterMap.set(specifierAbs, new Set([
+        ...cssImportSpecImporterMap.get(specifierAbs) ?? [],
+        node.getSourceFile().fileName,
+      ]));
+    }
+  });
+}
+
 /**
  * Replace .css import specifiers with .css.js import specifiers
- * @param {import('typescript').Program} _program
- * @return {import('typescript').TransformerFactory<import('typescript').Node>}
+ * If the inline option is set, remove the import specifier and print the css
+ * object in place, except if that module is imported elsewhere in the project,
+ * in which case leave a `.css.js` import
+ * @param {import('typescript').Program} program
+ * @return {import('typescript').TransformerFactory<import('typescript').SourceFile>}
  */
-module.exports = function(_program, { inline = false, minify = false } = {}) {
+module.exports = function(program, { inline = false, minify = false } = {}) {
   return ctx => {
-    /**
-     * @param {import('typescript').Node} node
-     */
-    function visitor(node) {
-      if (ts.isImportDeclaration(node) && !node.importClause?.isTypeOnly) {
-        const specifier = node.moduleSpecifier.getText().replace(/^'(.*)'$/, '$1');
-        if (specifier.endsWith('.css')) {
-          if (inline) {
-            const { fileName } = node.getSourceFile();
+    for (const sourceFileName of program.getRootFileNames()) {
+      const sourceFile = program.getSourceFile(sourceFileName);
+      if (sourceFile && !sourceFile.isDeclarationFile) {
+        cacheCssImportSpecsAbsolute(sourceFile);
+      }
+    }
+
+    /** @param{import('typescript').Node} node */
+    function rewriteOrInlineVisitor(node) {
+      if (isCssImportNode(node)) {
+        const { fileName } = node.getSourceFile();
+        const specifier = getImportSpecifier(node);
+        const specifierAbs = getImportAbsPathOrBareSpec(node);
+        if (inline) {
+          const cached = cssImportSpecImporterMap.get(specifierAbs);
+          if (cached?.size === 1) {
             const dir = pathToFileURL(fileName);
             const url = new URL(specifier, dir);
             const content = fs.readFileSync(url, 'utf-8');
@@ -108,21 +173,26 @@ module.exports = function(_program, { inline = false, minify = false } = {}) {
               createLitCssImportStatement(ctx, node.getSourceFile()),
               createLitCssTaggedTemplateLiteral(ctx, stylesheet, node.importClause?.name?.getText()),
             ];
-          } else {
-            return ctx.factory.createImportDeclaration(
-              node.modifiers,
-              node.importClause,
-              ctx.factory.createStringLiteral(`${specifier}.js`)
-            );
+          } else if (!cssImportFakeEmitMap.get(specifierAbs)) {
+            const outPath = `${specifierAbs}.js`;
+            const css = fs.readFileSync(specifierAbs, 'utf8');
+            const stylesheet = minify ? minifyCss(css, specifierAbs) : css;
+            fs.writeFileSync(outPath, `import { css } from 'lit';\nexport default css\`${stylesheet}\`;`, 'utf8');
+            cssImportFakeEmitMap.set(specifierAbs, outPath);
           }
         }
+        return ctx.factory.createImportDeclaration(
+          node.modifiers,
+          node.importClause,
+          ctx.factory.createStringLiteral(`${specifier}.js`)
+        );
       }
-      return ts.visitEachChild(node, visitor, ctx);
+      return ts.visitEachChild(node, rewriteOrInlineVisitor, ctx);
     }
 
     return sourceFile => {
       const children = sourceFile.getChildren();
-      const litImportBindings = /** @type {ts.ImportDeclaration|undefined} */(children.find(x =>
+      const litImportBindings = /** @type{import('typescript').ImportDeclaration}*/(children.find(x =>
         !ts.isTypeOnlyImportOrExportDeclaration(x) &&
         !ts.isNamespaceImport(x) &&
         ts.isImportDeclaration(x) &&
@@ -142,7 +212,7 @@ module.exports = function(_program, { inline = false, minify = false } = {}) {
           );
         }
       }
-      return ts.visitEachChild(sourceFile, visitor, ctx);
+      return ts.visitEachChild(sourceFile, rewriteOrInlineVisitor, ctx);
     };
   };
 };