Fix bug where css files in node_modules were pre-bundled (#142)

Author: calebeby

.changeset/wet-snails-unite.md

@@ -0,0 +1,5 @@
+---
+'pleasantest': patch
+---
+
+Fix bug where css files in node_modules were pre-bundled

src/module-server/middleware/js.ts

@@ -17,7 +17,7 @@ interface JSMiddlewareOpts {
 }
 
 // TODO: make this configurable
-const jsExts = /\.(?:[jt]sx?|[cm]js)$/;
+export const jsExts = /\.(?:[jt]sx?|[cm]js)$/;
 
 // Minimal version of https://github.com/preactjs/wmr/blob/main/packages/wmr/src/wmr-middleware.js
 

src/module-server/plugins/npm-plugin.ts

@@ -9,6 +9,8 @@ import * as esbuild from 'esbuild';
 import { parse } from 'cjs-module-lexer';
 import MagicString from 'magic-string';
 import { fileURLToPath } from 'url';
+import { jsExts } from '../middleware/js';
+import { changeErrorMessage } from '../../utils';
 
 // This is the folder that Pleasantest is installed in (e.g. <something>/node_modules/pleasantest)
 const installFolder = dirname(dirname(dirname(fileURLToPath(import.meta.url))));
@@ -51,13 +53,28 @@ export const npmPlugin = ({ root }: { root: string }): Plugin => {
   return {
     name: 'npm',
     // Rewrite bare imports to have @npm/ prefix
-    resolveId(id) {
-      if (isBareImport(id)) return prefix + id;
+    async resolveId(id, importer) {
+      if (!isBareImport(id)) return;
+      const resolved = await nodeResolve(id, root).catch((error) => {
+        throw importer
+          ? changeErrorMessage(
+              error,
+              (msg) => `${msg} (imported by ${importer})`,
+            )
+          : error;
+      });
+      if (!jsExts.test(resolved.path))
+        // Don't pre-bundle, use the full path to the file in node_modules
+        // (ex: CSS files in node_modules)
+        return resolved.path;
+
+      return prefix + id;
     },
     async load(id) {
       if (!id.startsWith(prefix)) return null;
       id = id.slice(prefix.length);
       const resolved = await nodeResolve(id, root);
+      if (!jsExts.test(resolved.path)) return null; // Don't pre-bundle
       const cachePath = join(cacheDir, '@npm', `${resolved.idWithVersion}.js`);
       const cached = await getFromCache(cachePath);
       if (cached) return cached;

src/utils.ts

@@ -57,6 +57,16 @@ export const assertElementHandle: (
   }
 };
 
+export const changeErrorMessage = (
+  error: Error,
+  changeMessage: (originalMessage: string) => string,
+) => {
+  const newMessage = changeMessage(error.message);
+  if (error.stack) error.stack = error.stack.replace(error.message, newMessage);
+  error.message = newMessage;
+  return error;
+};
+
 /**
  * Manipulate the stack trace and remove fn from it
  * That way jest will show a code frame from the user's code, not ours